adilallo
1495 lines
59 KiB
CSS
1495 lines
59 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Make sure Tailwind scans stories and .storybook files */
|
|
@source "../stories/**/*";
|
|
@source "../app/**/*";
|
|
@source "../.storybook/**/*";
|
|
@source "./**/*";
|
|
|
|
/* Hide scrollbar utility */
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none; /* Safari and Chrome */
|
|
}
|
|
|
|
/* Design system scrollbar (Figma node 20612-36521): dark track + thumb with states */
|
|
.scrollbar-design {
|
|
scrollbar-width: thin; /* Firefox: narrow scrollbar */
|
|
scrollbar-color: #545b64 #292d32; /* Firefox: thumb track */
|
|
}
|
|
.scrollbar-design::-webkit-scrollbar {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
.scrollbar-design::-webkit-scrollbar-track {
|
|
background: #292d32;
|
|
}
|
|
.scrollbar-design::-webkit-scrollbar-thumb {
|
|
background: #545b64;
|
|
border-radius: 4px;
|
|
border: 4px solid #292d32; /* visual padding: thumb appears 8px within 16px track */
|
|
background-clip: padding-box;
|
|
}
|
|
.scrollbar-design::-webkit-scrollbar-thumb:hover {
|
|
background: #787f8a;
|
|
border-width: 2px; /* hover: thumb expands to 12px */
|
|
}
|
|
.scrollbar-design::-webkit-scrollbar-thumb:active {
|
|
background: #3f434c;
|
|
border-width: 2px;
|
|
}
|
|
.scrollbar-design::-webkit-scrollbar-corner {
|
|
background: #292d32;
|
|
}
|
|
|
|
@theme inline {
|
|
/* Custom breakpoints */
|
|
--breakpoint-xsm: 429px;
|
|
--breakpoint-sm: 430px;
|
|
--breakpoint-sm2: 440px;
|
|
--breakpoint-smd: 530px;
|
|
--breakpoint-md: 640px;
|
|
--breakpoint-xmd: 768px;
|
|
--breakpoint-lg: 1024px;
|
|
--breakpoint-lg2: 1150px;
|
|
--breakpoint-xl: 1440px;
|
|
|
|
/* Reset Tailwind color defaults to avoid collisions */
|
|
--color-*: initial;
|
|
|
|
/* Font families */
|
|
--font-sans:
|
|
var(--font-inter), ui-sans-serif, system-ui, -apple-system, "Segoe UI",
|
|
Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--font-display:
|
|
var(--font-bricolage-grotesque), ui-sans-serif, system-ui, -apple-system,
|
|
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--font-mono:
|
|
var(--font-space-grotesk), ui-monospace, SFMono-Regular, "SF Mono",
|
|
Consolas, "Liberation Mono", Menlo, monospace;
|
|
|
|
/* Typography weight tokens */
|
|
--typography-thin: 100;
|
|
--typography-extralight: 200;
|
|
--typography-light: 300;
|
|
--typography-regular: 400;
|
|
--typography-medium: 500;
|
|
--typography-semibold: 600;
|
|
--typography-bold: 700;
|
|
--typography-extrabold: 800;
|
|
--typography-black: 900;
|
|
|
|
/* Dimension */
|
|
--spacing-scale-000: 0px;
|
|
--spacing-scale-001: 1px;
|
|
--spacing-scale-002: 2px;
|
|
--spacing-scale-003: 3px;
|
|
--spacing-scale-004: 4px;
|
|
--spacing-scale-005: 5px;
|
|
--spacing-scale-006: 6px;
|
|
--spacing-scale-008: 8px;
|
|
--spacing-scale-010: 10px;
|
|
--spacing-scale-012: 12px;
|
|
--spacing-scale-014: 14px;
|
|
--spacing-scale-016: 16px;
|
|
--spacing-scale-018: 18px;
|
|
--spacing-scale-020: 20px;
|
|
--spacing-scale-022: 22px;
|
|
--spacing-scale-024: 24px;
|
|
--spacing-scale-032: 32px;
|
|
--spacing-scale-040: 40px;
|
|
--spacing-scale-048: 48px;
|
|
--spacing-scale-056: 56px;
|
|
--spacing-scale-060: 60px;
|
|
--spacing-scale-064: 64px;
|
|
--spacing-scale-076: 76px;
|
|
--spacing-scale-096: 96px;
|
|
--spacing-scale-120: 120px;
|
|
--spacing-scale-160: 160px;
|
|
--spacing-scale-260: 260px;
|
|
--spacing-scale-290: 290px;
|
|
|
|
/* Negative spacing scales */
|
|
--spacing-scale--004: -4px;
|
|
--spacing-scale--008: -8px;
|
|
--spacing-scale--012: -12px;
|
|
--spacing-scale--016: -16px;
|
|
--spacing-scale--024: -24px;
|
|
|
|
/* Scale aliases for measures compatibility */
|
|
--scale-000: var(--spacing-scale-000);
|
|
--scale-001: var(--spacing-scale-001);
|
|
--scale-002: var(--spacing-scale-002);
|
|
--scale-003: var(--spacing-scale-003);
|
|
--scale-004: var(--spacing-scale-004);
|
|
--scale-005: var(--spacing-scale-005);
|
|
--scale-006: var(--spacing-scale-006);
|
|
--scale-008: var(--spacing-scale-008);
|
|
--scale-010: var(--spacing-scale-010);
|
|
--scale-012: var(--spacing-scale-012);
|
|
--scale-014: var(--spacing-scale-014);
|
|
--scale-016: var(--spacing-scale-016);
|
|
--scale-018: var(--spacing-scale-018);
|
|
--scale-020: var(--spacing-scale-020);
|
|
--scale-022: var(--spacing-scale-022);
|
|
--scale-024: var(--spacing-scale-024);
|
|
--scale-032: var(--spacing-scale-032);
|
|
--scale-040: var(--spacing-scale-040);
|
|
--scale-048: var(--spacing-scale-048);
|
|
--scale-056: var(--spacing-scale-056);
|
|
--scale-060: var(--spacing-scale-060);
|
|
--scale-064: var(--spacing-scale-064);
|
|
--scale-076: var(--spacing-scale-076);
|
|
--scale-096: var(--spacing-scale-096);
|
|
--scale-120: var(--spacing-scale-120);
|
|
--scale-160: var(--spacing-scale-160);
|
|
--scale-260: var(--spacing-scale-260);
|
|
--scale-290: var(--spacing-scale-290);
|
|
--scale--004: var(--spacing-scale--004);
|
|
--scale--008: var(--spacing-scale--008);
|
|
--scale--012: var(--spacing-scale--012);
|
|
--scale--016: var(--spacing-scale--016);
|
|
--scale--024: var(--spacing-scale--024);
|
|
|
|
--spacing-measures-sizing-008: var(--spacing-scale-008);
|
|
--spacing-measures-sizing-010: var(--spacing-scale-010);
|
|
--spacing-measures-sizing-012: var(--spacing-scale-012);
|
|
--spacing-measures-sizing-014: var(--spacing-scale-014);
|
|
--spacing-measures-sizing-016: var(--spacing-scale-016);
|
|
--spacing-measures-sizing-018: var(--spacing-scale-018);
|
|
--spacing-measures-sizing-020: var(--spacing-scale-020);
|
|
--spacing-measures-sizing-022: var(--spacing-scale-022);
|
|
--spacing-measures-sizing-024: var(--spacing-scale-024);
|
|
--spacing-measures-sizing-032: var(--spacing-scale-032);
|
|
--spacing-measures-sizing-040: var(--spacing-scale-040);
|
|
--spacing-measures-sizing-048: var(--spacing-scale-048);
|
|
--spacing-measures-sizing-056: var(--spacing-scale-056);
|
|
--spacing-measures-sizing-060: var(--spacing-scale-060);
|
|
--spacing-measures-sizing-064: var(--spacing-scale-064);
|
|
--spacing-measures-sizing-076: var(--spacing-scale-076);
|
|
--spacing-measures-sizing-096: var(--spacing-scale-096);
|
|
--spacing-measures-sizing-120: var(--spacing-scale-120);
|
|
|
|
/* Spacing aliases */
|
|
--spacing-measures-spacing-000: var(--spacing-scale-000);
|
|
--spacing-measures-spacing-001: var(--spacing-scale-001);
|
|
--spacing-measures-spacing-002: var(--spacing-scale-002);
|
|
--spacing-measures-spacing-004: var(--spacing-scale-004);
|
|
--spacing-measures-spacing-006: var(--spacing-scale-006);
|
|
--spacing-measures-spacing-008: var(--spacing-scale-008);
|
|
--spacing-measures-spacing-010: var(--spacing-scale-010);
|
|
--spacing-measures-spacing-012: var(--spacing-scale-012);
|
|
--spacing-measures-spacing-014: var(--spacing-scale-014);
|
|
--spacing-measures-spacing-016: var(--spacing-scale-016);
|
|
--spacing-measures-spacing-018: var(--spacing-scale-018);
|
|
--spacing-measures-spacing-020: var(--spacing-scale-020);
|
|
--spacing-measures-spacing-022: var(--spacing-scale-022);
|
|
--spacing-measures-spacing-024: var(--spacing-scale-024);
|
|
--spacing-measures-spacing-032: var(--spacing-scale-032);
|
|
--spacing-measures-spacing-040: var(--spacing-scale-040);
|
|
--spacing-measures-spacing-048: var(--spacing-scale-048);
|
|
--spacing-measures-spacing-056: var(--spacing-scale-056);
|
|
--spacing-measures-spacing-060: var(--spacing-scale-060);
|
|
--spacing-measures-spacing-064: var(--spacing-scale-064);
|
|
--spacing-measures-spacing-076: var(--spacing-scale-076);
|
|
--spacing-measures-spacing-096: var(--spacing-scale-096);
|
|
--spacing-measures-spacing-120: var(--spacing-scale-120);
|
|
--spacing-measures-spacing-160: var(--spacing-scale-160);
|
|
--spacing-measures-spacing-260: var(--spacing-scale-260);
|
|
|
|
/* Border radius */
|
|
--radius-measures-radius-none: var(--spacing-scale-000);
|
|
--radius-measures-radius-xsmall: var(--spacing-scale-006);
|
|
--radius-measures-radius-small: var(--spacing-scale-012);
|
|
--radius-measures-radius-medium: var(--spacing-scale-016);
|
|
--radius-measures-radius-large: var(--spacing-scale-024);
|
|
--radius-measures-radius-xlarge: var(--spacing-scale-032);
|
|
--radius-measures-radius-full: 9999px;
|
|
|
|
/* Border widths */
|
|
--border-measures-stroke-small: var(--spacing-scale-001);
|
|
--border-measures-stroke-medium: var(--spacing-scale-002);
|
|
--border-measures-stroke-large: var(--spacing-scale-003);
|
|
|
|
/* Compatibility aliases */
|
|
--measures-radius-none: var(--radius-measures-radius-none);
|
|
--measures-radius-xsmall: var(--radius-measures-radius-xsmall);
|
|
--measures-radius-small: var(--radius-measures-radius-small);
|
|
--measures-radius-medium: var(--radius-measures-radius-medium);
|
|
--measures-radius-large: var(--radius-measures-radius-large);
|
|
--measures-radius-xlarge: var(--radius-measures-radius-xlarge);
|
|
--measures-radius-full: var(--radius-measures-radius-full);
|
|
--measures-stroke-small: var(--border-measures-stroke-small);
|
|
--measures-stroke-medium: var(--border-measures-stroke-medium);
|
|
--measures-stroke-large: var(--border-measures-stroke-large);
|
|
--measures-sizing-008: var(--spacing-measures-sizing-008);
|
|
--measures-sizing-010: var(--spacing-measures-sizing-010);
|
|
--measures-sizing-012: var(--spacing-measures-sizing-012);
|
|
--measures-sizing-014: var(--spacing-measures-sizing-014);
|
|
--measures-sizing-016: var(--spacing-measures-sizing-016);
|
|
--measures-sizing-018: var(--spacing-measures-sizing-018);
|
|
--measures-sizing-020: var(--spacing-measures-sizing-020);
|
|
--measures-sizing-022: var(--spacing-measures-sizing-022);
|
|
--measures-sizing-024: var(--spacing-measures-sizing-024);
|
|
--measures-sizing-032: var(--spacing-measures-sizing-032);
|
|
--measures-sizing-040: var(--spacing-measures-sizing-040);
|
|
--measures-sizing-048: var(--spacing-measures-sizing-048);
|
|
--measures-sizing-056: var(--spacing-measures-sizing-056);
|
|
--measures-sizing-060: var(--spacing-measures-sizing-060);
|
|
--measures-sizing-064: var(--spacing-measures-sizing-064);
|
|
--measures-sizing-076: var(--spacing-measures-sizing-076);
|
|
--measures-sizing-096: var(--spacing-measures-sizing-096);
|
|
--measures-sizing-120: var(--spacing-measures-sizing-120);
|
|
--measures-spacing-000: var(--spacing-measures-spacing-000);
|
|
--measures-spacing-001: var(--spacing-measures-spacing-001);
|
|
--measures-spacing-002: var(--spacing-measures-spacing-002);
|
|
--measures-spacing-004: var(--spacing-measures-spacing-004);
|
|
--measures-spacing-006: var(--spacing-measures-spacing-006);
|
|
--measures-spacing-008: var(--spacing-measures-spacing-008);
|
|
--measures-spacing-010: var(--spacing-measures-spacing-010);
|
|
--measures-spacing-012: var(--spacing-measures-spacing-012);
|
|
--measures-spacing-014: var(--spacing-measures-spacing-014);
|
|
--measures-spacing-016: var(--spacing-measures-spacing-016);
|
|
--measures-spacing-018: var(--spacing-measures-spacing-018);
|
|
--measures-spacing-020: var(--spacing-measures-spacing-020);
|
|
--measures-spacing-022: var(--spacing-measures-spacing-022);
|
|
--measures-spacing-024: var(--spacing-measures-spacing-024);
|
|
--measures-spacing-032: var(--spacing-measures-spacing-032);
|
|
--measures-spacing-040: var(--spacing-measures-spacing-040);
|
|
--measures-spacing-048: var(--spacing-measures-spacing-048);
|
|
--measures-spacing-056: var(--spacing-measures-spacing-056);
|
|
--measures-spacing-060: var(--spacing-measures-spacing-060);
|
|
--measures-spacing-064: var(--spacing-measures-spacing-064);
|
|
--measures-spacing-076: var(--spacing-measures-spacing-076);
|
|
--measures-spacing-096: var(--spacing-measures-spacing-096);
|
|
--measures-spacing-120: var(--spacing-measures-spacing-120);
|
|
--measures-spacing-160: var(--spacing-measures-spacing-160);
|
|
--measures-spacing-260: var(--spacing-measures-spacing-260);
|
|
|
|
/* Negative spacing aliases */
|
|
--measures-spacing--004: var(--spacing-scale--004);
|
|
--measures-spacing--008: var(--spacing-scale--008);
|
|
--measures-spacing--012: var(--spacing-scale--012);
|
|
--measures-spacing--016: var(--spacing-scale--016);
|
|
--measures-spacing--024: var(--spacing-scale--024);
|
|
|
|
/* Semantic space tokens */
|
|
--space-0: var(--spacing-scale-000);
|
|
--space-025: var(--spacing-scale-001);
|
|
--space-050: var(--spacing-scale-002);
|
|
--space-100: var(--spacing-scale-004);
|
|
--space-150: var(--spacing-scale-006);
|
|
--space-200: var(--spacing-scale-008);
|
|
--space-250: var(--spacing-scale-010);
|
|
--space-300: var(--spacing-scale-012);
|
|
--space-400: var(--spacing-scale-016);
|
|
--space-500: var(--spacing-scale-020);
|
|
--space-600: var(--spacing-scale-024);
|
|
--space-800: var(--spacing-scale-032);
|
|
--space-1000: var(--spacing-scale-040);
|
|
--space-1200: var(--spacing-scale-048);
|
|
--space-1400: var(--spacing-scale-056);
|
|
--space-1500: var(--spacing-scale-060);
|
|
--space-1800: var(--spacing-scale-064);
|
|
--space-2100: var(--spacing-scale-076);
|
|
--space-2400: var(--spacing-scale-096);
|
|
--space-3000: var(--spacing-scale-120);
|
|
--space-4000: var(--spacing-scale-160);
|
|
--space-6500: var(--spacing-scale-260);
|
|
|
|
/* Semantic negative space tokens */
|
|
--space-negative-100: var(--spacing-scale--004);
|
|
--space-negative-200: var(--spacing-scale--008);
|
|
--space-negative-300: var(--spacing-scale--012);
|
|
--space-negative-400: var(--spacing-scale--016);
|
|
--space-negative-600: var(--spacing-scale--024);
|
|
|
|
/* Semantic radius tokens */
|
|
--radius-0: var(--spacing-scale-000);
|
|
--radius-100: var(--spacing-scale-004);
|
|
--radius-200: var(--spacing-scale-008);
|
|
--radius-300: var(--spacing-scale-012);
|
|
--radius-400: var(--spacing-scale-016);
|
|
--radius-500: var(--spacing-scale-020);
|
|
--radius-full: 9999px;
|
|
|
|
/* Semantic sizing tokens */
|
|
--sizing-200: var(--spacing-scale-008);
|
|
--sizing-250: var(--spacing-scale-010);
|
|
--sizing-300: var(--spacing-scale-012);
|
|
--sizing-350: var(--spacing-scale-014);
|
|
--sizing-400: var(--spacing-scale-016);
|
|
--sizing-500: var(--spacing-scale-020);
|
|
--sizing-600: var(--spacing-scale-024);
|
|
--sizing-800: var(--spacing-scale-032);
|
|
--sizing-1000: var(--spacing-scale-040);
|
|
--sizing-1200: var(--spacing-scale-048);
|
|
--sizing-1400: var(--spacing-scale-056);
|
|
--sizing-1500: var(--spacing-scale-060);
|
|
--sizing-1600: var(--spacing-scale-064);
|
|
--sizing-2400: var(--spacing-scale-096);
|
|
--sizing-3000: var(--spacing-scale-120);
|
|
--sizing-6500: var(--spacing-scale-260);
|
|
|
|
/* Semantic border tokens */
|
|
--border-x-small: var(--spacing-scale-001);
|
|
--border-small: var(--spacing-scale-002);
|
|
--border-medium: var(--spacing-scale-004);
|
|
--border-large: var(--spacing-scale-008);
|
|
|
|
/* Semantic icon tokens */
|
|
--icon-xsmall: var(--spacing-scale-012);
|
|
--icon-small: var(--spacing-scale-016);
|
|
--icon-medium: var(--spacing-scale-024);
|
|
--icon-large: var(--spacing-scale-032);
|
|
--icon-xlarge: var(--spacing-scale-040);
|
|
|
|
/* Grays & alpha */
|
|
--color-gray-000: #ffffff;
|
|
--color-gray-050: #f6f6f6;
|
|
--color-gray-100: #e5e5e5;
|
|
--color-gray-200: #d2d2d2;
|
|
--color-gray-300: #b4b4b4;
|
|
--color-gray-400: #8f8f8f;
|
|
--color-gray-500: #666666;
|
|
--color-gray-600: #464646;
|
|
--color-gray-700: #2d2d2d;
|
|
--color-gray-800: #1f1f1f;
|
|
--color-gray-900: #141414;
|
|
--color-gray-1000: #000000;
|
|
|
|
--color-opacity-000: #00000000;
|
|
--color-opacity-001: #00000003;
|
|
--color-opacity-050: #0000000d;
|
|
--color-opacity-100: #0000001a;
|
|
--color-opacity-200: #00000033;
|
|
--color-opacity-300: #0000004d;
|
|
--color-opacity-400: #00000066;
|
|
--color-opacity-500: #00000080;
|
|
--color-opacity-600: #00000099;
|
|
--color-opacity-700: #000000b2;
|
|
--color-opacity-800: #000000cc;
|
|
--color-opacity-900: #000000e5;
|
|
|
|
/* Kiwi */
|
|
--color-kiwi-kiwi0: #ebfff2;
|
|
--color-kiwi-kiwi50: #c9fedf;
|
|
--color-kiwi-kiwi100: #a8fdcd;
|
|
--color-kiwi-kiwi150: #8cf9bd;
|
|
--color-kiwi-kiwi200: #6ff6ae;
|
|
--color-kiwi-kiwi300: #45ea97;
|
|
--color-kiwi-kiwi400: #29d984;
|
|
--color-kiwi-kiwi500: #16c472;
|
|
--color-kiwi-kiwi600: #0ba960;
|
|
--color-kiwi-kiwi700: #058c4e;
|
|
--color-kiwi-kiwi800: #016c3c;
|
|
--color-kiwi-kiwi900: #004d2b;
|
|
--color-kiwi-kiwi1000: #00331c;
|
|
|
|
/* Lavender */
|
|
--color-lavender-lavender0: #f0ebff;
|
|
--color-lavender-lavender50: #e8defe;
|
|
--color-lavender-lavender100: #e0d1fd;
|
|
--color-lavender-lavender150: #d7c3f9;
|
|
--color-lavender-lavender200: #ceb5f6;
|
|
--color-lavender-lavender300: #bb97ea;
|
|
--color-lavender-lavender400: #a578d9;
|
|
--color-lavender-lavender500: #8d5ac4;
|
|
--color-lavender-lavender600: #743ea9;
|
|
--color-lavender-lavender700: #5a278c;
|
|
--color-lavender-lavender800: #41146c;
|
|
--color-lavender-lavender900: #2b074d;
|
|
--color-lavender-lavender1000: #1a0033;
|
|
|
|
/* Lime */
|
|
--color-lime-lime0: #fbffeb;
|
|
--color-lime-lime50: #f2fec9;
|
|
--color-lime-lime100: #e7fda8;
|
|
--color-lime-lime150: #daf98c;
|
|
--color-lime-lime200: #ccf66f;
|
|
--color-lime-lime300: #b1ea45;
|
|
--color-lime-lime400: #98d929;
|
|
--color-lime-lime500: #80c416;
|
|
--color-lime-lime600: #6aa90b;
|
|
--color-lime-lime700: #548c05;
|
|
--color-lime-lime800: #406c01;
|
|
--color-lime-lime900: #2d4d00;
|
|
--color-lime-lime1000: #1e3300;
|
|
|
|
/* Magenta */
|
|
--color-magenta-magenta0: #ffebf0;
|
|
--color-magenta-magenta50: #fedee7;
|
|
--color-magenta-magenta100: #fdd1dd;
|
|
--color-magenta-magenta150: #f9c3d2;
|
|
--color-magenta-magenta200: #f6b5c7;
|
|
--color-magenta-magenta300: #ea97ad;
|
|
--color-magenta-magenta400: #d97892;
|
|
--color-magenta-magenta500: #c45a76;
|
|
--color-magenta-magenta600: #a93e5b;
|
|
--color-magenta-magenta700: #8c2742;
|
|
--color-magenta-magenta800: #6c142b;
|
|
--color-magenta-magenta900: #4d071a;
|
|
--color-magenta-magenta1000: #33000e;
|
|
|
|
/* Red */
|
|
--color-red-red0: #ffebf1;
|
|
--color-red-red50: #fec9d6;
|
|
--color-red-red100: #fda8b7;
|
|
--color-red-red150: #f98c98;
|
|
--color-red-red200: #f66f78;
|
|
--color-red-red300: #ea4845;
|
|
--color-red-red400: #d93529;
|
|
--color-red-red500: #c42916;
|
|
--color-red-red600: #a9200b;
|
|
--color-red-red700: #8c1905;
|
|
--color-red-red800: #6c1301;
|
|
--color-red-red900: #4d0d00;
|
|
--color-red-red1000: #330800;
|
|
|
|
/* Royal Blue */
|
|
--color-royal-blue-royal-blue0: #ebecff;
|
|
--color-royal-blue-royal-blue50: #c9cdfe;
|
|
--color-royal-blue-royal-blue100: #a8adfd;
|
|
--color-royal-blue-royal-blue150: #8c91f9;
|
|
--color-royal-blue-royal-blue200: #6f74f6;
|
|
--color-royal-blue-royal-blue300: #4548ea;
|
|
--color-royal-blue-royal-blue400: #2b29d9;
|
|
--color-royal-blue-royal-blue500: #1c16c4;
|
|
--color-royal-blue-royal-blue600: #140ba9;
|
|
--color-royal-blue-royal-blue700: #0f058c;
|
|
--color-royal-blue-royal-blue800: #0c016c;
|
|
--color-royal-blue-royal-blue900: #0a004d;
|
|
--color-royal-blue-royal-blue1000: #080033;
|
|
|
|
/* Rust */
|
|
--color-rust-rust0: #ffedeb;
|
|
--color-rust-rust50: #fed8d4;
|
|
--color-rust-rust100: #fdc4bd;
|
|
--color-rust-rust150: #f9b0a6;
|
|
--color-rust-rust200: #f69c8f;
|
|
--color-rust-rust300: #ea7a65;
|
|
--color-rust-rust400: #d96043;
|
|
--color-rust-rust500: #c44e29;
|
|
--color-rust-rust600: #a94417;
|
|
--color-rust-rust700: #8c3d0b;
|
|
--color-rust-rust800: #6c3604;
|
|
--color-rust-rust900: #4d2c01;
|
|
--color-rust-rust1000: #332100;
|
|
|
|
/* Teal */
|
|
--color-teal-teal0: #ebfffc;
|
|
--color-teal-teal50: #c9fef9;
|
|
--color-teal-teal100: #a8fdf8;
|
|
--color-teal-teal150: #8cf9f8;
|
|
--color-teal-teal200: #6ff2f6;
|
|
--color-teal-teal300: #45dcea;
|
|
--color-teal-teal400: #29c3d9;
|
|
--color-teal-teal500: #16a9c4;
|
|
--color-teal-teal600: #0b8ea9;
|
|
--color-teal-teal700: #05728c;
|
|
--color-teal-teal800: #01576c;
|
|
--color-teal-teal900: #003e4d;
|
|
--color-teal-teal1000: #002933;
|
|
|
|
/* Yellow */
|
|
--color-yellow-yellow0: #fffeeb;
|
|
--color-yellow-yellow50: #fefcc9;
|
|
--color-yellow-yellow100: #fdfaa8;
|
|
--color-yellow-yellow150: #f9f58c;
|
|
--color-yellow-yellow200: #f6f06f;
|
|
--color-yellow-yellow300: #eae345;
|
|
--color-yellow-yellow400: #d9d129;
|
|
--color-yellow-yellow500: #c4bb16;
|
|
--color-yellow-yellow600: #a9a20b;
|
|
--color-yellow-yellow700: #8c8505;
|
|
--color-yellow-yellow800: #6c6701;
|
|
--color-yellow-yellow900: #4d4a00;
|
|
--color-yellow-yellow1000: #333000;
|
|
|
|
/* Border */
|
|
--color-border-default-brand-accent: var(--color-yellow-yellow300);
|
|
--color-border-default-brand-primary: var(--color-yellow-yellow100);
|
|
--color-border-default-brand-secondary: var(--color-rust-rust100);
|
|
--color-border-default-primary: var(--color-gray-900);
|
|
--color-border-default-secondary: var(--color-gray-800);
|
|
--color-border-default-tertiary: var(--color-gray-600);
|
|
--color-border-default-utility-info: var(--color-royal-blue-royal-blue300);
|
|
--color-border-default-utility-negative: var(--color-red-red300);
|
|
--color-border-default-utility-positive: var(--color-kiwi-kiwi300);
|
|
--color-border-default-utility-warning: var(--color-yellow-yellow300);
|
|
|
|
/* Theme-dark aliases for utility tokens */
|
|
--color-border-default-negative-primary: var(
|
|
--color-border-default-utility-negative
|
|
);
|
|
--color-border-default-warning-primary: var(
|
|
--color-border-default-utility-warning
|
|
);
|
|
--color-border-default-positive-primary: var(
|
|
--color-border-default-utility-positive
|
|
);
|
|
|
|
/* Theme-light variants */
|
|
--color-border-default-negative-primary-light: var(--color-red-red300);
|
|
--color-border-default-warning-primary-light: var(--color-yellow-yellow600);
|
|
--color-border-default-positive-primary-light: var(--color-kiwi-kiwi400);
|
|
--color-border-default-brand-accent-light: var(--color-yellow-yellow600);
|
|
--color-border-default-brand-primary-light: var(--color-yellow-yellow800);
|
|
--color-border-default-primary-light: var(--color-gray-000);
|
|
--color-border-default-secondary-light: var(--color-gray-100);
|
|
--color-border-default-tertiary-light: var(--color-gray-300);
|
|
|
|
--color-border-inverse-brand-accent: var(--color-yellow-yellow50);
|
|
--color-border-inverse-brand-primary: var(--color-yellow-yellow800);
|
|
--color-border-inverse-brand-secondary: var(--color-rust-rust800);
|
|
--color-border-inverse-primary: var(--color-gray-000);
|
|
--color-border-inverse-secondary: var(--color-opacity-200);
|
|
--color-border-inverse-tertiary: var(--color-opacity-300);
|
|
--color-border-inverse-utility-info: var(--color-royal-blue-royal-blue300);
|
|
--color-border-inverse-utility-negative: var(--color-red-red300);
|
|
--color-border-inverse-utility-positive: var(--color-kiwi-kiwi400);
|
|
--color-border-inverse-utility-warning: var(--color-yellow-yellow400);
|
|
|
|
/* Theme-dark invert aliases (mapping to inverse) */
|
|
--color-border-invert-primary: var(--color-border-inverse-primary);
|
|
--color-border-invert-secondary: var(--color-border-inverse-secondary);
|
|
--color-border-invert-tertiary: var(--color-border-inverse-tertiary);
|
|
--color-border-invert-brand-primary: var(--color-yellow-yellow800);
|
|
--color-border-invert-brand-accent: var(--color-yellow-yellow600);
|
|
--color-border-invert-positive-primary: var(--color-kiwi-kiwi500);
|
|
--color-border-invert-warning-primary: var(--color-yellow-yellow600);
|
|
--color-border-invert-negative-primary: var(--color-red-red300);
|
|
|
|
/* Theme-light invert variants */
|
|
--color-border-invert-primary-light: var(--color-gray-900);
|
|
--color-border-invert-secondary-light: var(--color-gray-800);
|
|
--color-border-invert-tertiary-light: var(--color-gray-600);
|
|
--color-border-invert-brand-primary-light: var(--color-yellow-yellow100);
|
|
--color-border-invert-brand-accent-light: var(--color-yellow-yellow300);
|
|
--color-border-invert-positive-primary-light: var(--color-kiwi-kiwi300);
|
|
--color-border-invert-warning-primary-light: var(--color-yellow-yellow300);
|
|
--color-border-invert-negative-primary-light: var(--color-red-red300);
|
|
|
|
/* Navigation / Link — Figma "Link" (21861:21428) */
|
|
--color-link-primary: #090909;
|
|
--color-link-primary-hover: #6d6d6d;
|
|
--color-link-primary-focus: #6d6d6d;
|
|
--color-link-primary-active: #6d6d6d;
|
|
--color-link-secondary: #6d6d6d;
|
|
--color-link-secondary-hover: #373737;
|
|
--color-link-secondary-focus: #373737;
|
|
--color-link-secondary-active: #373737;
|
|
--color-link-invert-primary: #ffffff;
|
|
--color-link-invert-primary-hover: #b4b4b4;
|
|
--color-link-invert-primary-focus: #b4b4b4;
|
|
--color-link-invert-primary-active: #b4b4b4;
|
|
--color-link-invert-secondary: #b4b4b4;
|
|
--color-link-invert-secondary-hover: #f5f5f5;
|
|
--color-link-invert-secondary-focus: #f5f5f5;
|
|
--color-link-invert-secondary-active: #f5f5f5;
|
|
--color-border-link-focus: #090909;
|
|
--color-border-link-invert-focus: #ffffff;
|
|
|
|
/* Content */
|
|
--color-content-brand-darker-accent-2: var(--color-yellow-yellow200);
|
|
--color-content-brand-kiwi: var(--color-kiwi-kiwi600);
|
|
--color-content-brand-lavender: var(--color-lavender-lavender500);
|
|
--color-content-brand-lighter-accent-2: var(--color-yellow-yellow100);
|
|
--color-content-brand-lime: var(--color-lime-lime500);
|
|
--color-content-brand-primary: var(--color-yellow-yellow50);
|
|
--color-content-brand-red: var(--color-red-red400);
|
|
--color-content-brand-royal: var(--color-royal-blue-royal-blue400);
|
|
--color-content-brand-rust: var(--color-rust-rust400);
|
|
--color-content-brand-teal: var(--color-teal-teal500);
|
|
|
|
--color-content-default-brand-accent: var(--color-opacity-700);
|
|
--color-content-default-brand-primary: var(--color-yellow-yellow50);
|
|
--color-content-default-brand-secondary: var(--color-rust-rust400);
|
|
--color-content-default-brand-lime: var(--color-lime-lime200);
|
|
--color-content-default-brand-rust: var(--color-rust-rust150);
|
|
--color-content-default-brand-royal: var(--color-royal-blue-royal-blue200);
|
|
--color-content-default-brand-red: var(--color-red-red100);
|
|
--color-content-default-brand-teal: var(--color-teal-teal200);
|
|
--color-content-default-brand-kiwi: var(--color-kiwi-kiwi100);
|
|
--color-content-default-brand-lavender: var(--color-lavender-lavender150);
|
|
--color-content-default-primary: var(--color-gray-000);
|
|
--color-content-default-secondary: var(--color-gray-200);
|
|
--color-content-default-tertiary: var(--color-gray-300);
|
|
--color-content-default-utility-info: var(--color-royal-blue-royal-blue500);
|
|
--color-content-default-utility-negative: var(--color-red-red400);
|
|
--color-content-default-utility-positive: var(--color-lime-lime400);
|
|
--color-content-default-utility-warning: var(--color-yellow-yellow500);
|
|
|
|
/* Theme-dark aliases for utility tokens */
|
|
--color-content-default-negative-primary: var(
|
|
--color-content-default-utility-negative
|
|
);
|
|
--color-content-default-warning-primary: var(
|
|
--color-content-default-utility-warning
|
|
);
|
|
--color-content-default-positive-primary: var(
|
|
--color-content-default-utility-positive
|
|
);
|
|
|
|
/* Theme-light variants */
|
|
--color-content-default-negative-primary-light: var(--color-red-red500);
|
|
--color-content-default-warning-primary-light: var(--color-yellow-yellow600);
|
|
--color-content-default-positive-primary-light: var(--color-kiwi-kiwi700);
|
|
--color-content-default-brand-primary-light: var(--color-yellow-yellow900);
|
|
--color-content-default-brand-secondary-light: var(--color-yellow-yellow600);
|
|
--color-content-default-primary-light: var(--color-gray-1000);
|
|
--color-content-default-secondary-light: var(--color-gray-800);
|
|
--color-content-default-tertiary-light: var(--color-gray-700);
|
|
--color-content-default-brand-lime-light: var(--color-lime-lime600);
|
|
--color-content-default-brand-rust-light: var(--color-rust-rust500);
|
|
--color-content-default-brand-royal-light: var(
|
|
--color-royal-blue-royal-blue1000
|
|
);
|
|
--color-content-default-brand-red-light: var(--color-red-red500);
|
|
--color-content-default-brand-teal-light: var(--color-teal-teal500);
|
|
--color-content-default-brand-kiwi-light: var(--color-kiwi-kiwi600);
|
|
--color-content-default-brand-lavender-light: var(
|
|
--color-lavender-lavender500
|
|
);
|
|
|
|
--color-content-inverse-brand-accent: var(--color-yellow-yellow700);
|
|
--color-content-inverse-brand-primary: var(--color-yellow-yellow900);
|
|
--color-content-inverse-brand-secondary: var(--color-rust-rust800);
|
|
--color-content-inverse-brand-royal: var(--color-royal-blue-royal-blue1000);
|
|
--color-content-inverse-primary: var(--color-gray-1000);
|
|
--color-content-inverse-secondary: var(--color-gray-800);
|
|
--color-content-inverse-tertiary: var(--color-gray-700);
|
|
--color-content-inverse-utility-info: var(--color-royal-blue-royal-blue300);
|
|
--color-content-inverse-utility-negative: var(--color-red-red300);
|
|
--color-content-inverse-utility-positive: var(--color-kiwi-kiwi300);
|
|
--color-content-inverse-utility-warning: var(--color-yellow-yellow300);
|
|
|
|
/* Theme-dark invert aliases (mapping to inverse) */
|
|
--color-content-invert-primary: var(--color-content-inverse-primary);
|
|
--color-content-invert-secondary: var(--color-content-inverse-secondary);
|
|
--color-content-invert-tertiary: var(--color-content-inverse-tertiary);
|
|
--color-content-invert-brand-primary: var(--color-yellow-yellow900);
|
|
--color-content-invert-brand-secondary: var(--color-yellow-yellow600);
|
|
--color-content-invert-brand-lime: var(--color-lime-lime600);
|
|
--color-content-invert-brand-royal: var(--color-royal-blue-royal-blue1000);
|
|
--color-content-invert-brand-teal: var(--color-teal-teal500);
|
|
--color-content-invert-brand-rust: var(--color-rust-rust500);
|
|
--color-content-invert-brand-lavender: var(--color-lavender-lavender500);
|
|
--color-content-invert-brand-kiwi: var(--color-kiwi-kiwi600);
|
|
--color-content-invert-brand-red: var(--color-red-red500);
|
|
--color-content-invert-positive-primary: var(--color-kiwi-kiwi700);
|
|
--color-content-invert-warning-primary: var(--color-yellow-yellow600);
|
|
--color-content-invert-negative-primary: var(--color-red-red500);
|
|
|
|
/* Theme-light invert variants */
|
|
--color-content-invert-primary-light: var(--color-gray-000);
|
|
--color-content-invert-secondary-light: var(--color-gray-200);
|
|
--color-content-invert-tertiary-light: var(--color-gray-300);
|
|
--color-content-invert-brand-primary-light: var(--color-yellow-yellow50);
|
|
--color-content-invert-brand-secondary-light: var(--color-yellow-yellow200);
|
|
--color-content-invert-brand-lime-light: var(--color-lime-lime200);
|
|
--color-content-invert-brand-royal-light: var(
|
|
--color-royal-blue-royal-blue200
|
|
);
|
|
--color-content-invert-brand-teal-light: var(--color-teal-teal200);
|
|
--color-content-invert-brand-rust-light: var(--color-rust-rust150);
|
|
--color-content-invert-brand-lavender-light: var(
|
|
--color-lavender-lavender150
|
|
);
|
|
--color-content-invert-brand-kiwi-light: var(--color-kiwi-kiwi100);
|
|
--color-content-invert-brand-red-light: var(--color-red-red100);
|
|
--color-content-invert-positive-primary-light: var(--color-kiwi-kiwi300);
|
|
--color-content-invert-warning-primary-light: var(--color-yellow-yellow300);
|
|
--color-content-invert-negative-primary-light: var(--color-red-red300);
|
|
|
|
/* Surface */
|
|
--color-surface-default-brand-red: var(--color-red-red100);
|
|
--color-surface-default-brand-darker-accent: var(--color-yellow-yellow200);
|
|
--color-surface-default-brand-kiwi: var(--color-kiwi-kiwi200);
|
|
--color-surface-default-brand-lavender: var(--color-lavender-lavender200);
|
|
--color-surface-default-brand-lighter-accent: var(--color-yellow-yellow100);
|
|
--color-surface-default-brand-lime: var(--color-lime-lime100);
|
|
--color-surface-default-brand-primary: var(--color-yellow-yellow1000);
|
|
--color-surface-default-brand-secondary: var(--color-yellow-yellow800);
|
|
--color-surface-default-brand-royal: var(--color-royal-blue-royal-blue50);
|
|
--color-surface-default-brand-rust: var(--color-rust-rust100);
|
|
--color-surface-default-brand-teal: var(--color-teal-teal50);
|
|
|
|
/* Theme-dark brand token variants */
|
|
--color-surface-default-brand-royal-dark: var(
|
|
--color-royal-blue-royal-blue800
|
|
);
|
|
--color-surface-default-brand-lime-dark: var(--color-lime-lime800);
|
|
--color-surface-default-brand-rust-dark: var(--color-rust-rust700);
|
|
--color-surface-default-brand-red-dark: var(--color-red-red700);
|
|
--color-surface-default-brand-kiwi-dark: var(--color-kiwi-kiwi700);
|
|
--color-surface-default-brand-lavender-dark: var(
|
|
--color-lavender-lavender700
|
|
);
|
|
--color-surface-default-brand-teal-dark: var(--color-teal-teal700);
|
|
--color-surface-default-positive-secondary: var(--color-kiwi-kiwi1000);
|
|
--color-surface-default-warning-secondary: var(--color-yellow-yellow1000);
|
|
--color-surface-default-negative-secondary: var(--color-red-red1000);
|
|
|
|
--color-surface-default-primary: var(--color-gray-1000);
|
|
--color-surface-default-secondary: var(--color-gray-900);
|
|
--color-surface-default-semi-opaque: var(--color-opacity-050);
|
|
--color-surface-default-tertiary: var(--color-gray-800);
|
|
--color-surface-default-transparent: var(--color-opacity-000);
|
|
|
|
--color-surface-default-utility-info: var(--color-royal-blue-royal-blue400);
|
|
--color-surface-default-utility-negative: var(--color-red-red400);
|
|
--color-surface-default-utility-positive: var(--color-kiwi-kiwi500);
|
|
--color-surface-default-utility-warning: var(--color-yellow-yellow500);
|
|
|
|
/* Theme-dark aliases for utility tokens */
|
|
--color-surface-default-negative-primary: var(
|
|
--color-surface-default-utility-negative
|
|
);
|
|
--color-surface-default-warning-primary: var(
|
|
--color-surface-default-utility-warning
|
|
);
|
|
--color-surface-default-positive-primary: var(
|
|
--color-surface-default-utility-positive
|
|
);
|
|
|
|
/* Theme-light variants */
|
|
--color-surface-default-negative-primary-light: var(--color-red-red200);
|
|
--color-surface-default-warning-primary-light: var(--color-yellow-yellow300);
|
|
--color-surface-default-positive-primary-light: var(--color-kiwi-kiwi300);
|
|
--color-surface-default-brand-primary-light: var(--color-yellow-yellow50);
|
|
--color-surface-default-primary-light: var(--color-gray-000);
|
|
--color-surface-default-secondary-light: var(--color-gray-100);
|
|
--color-surface-default-tertiary-light: var(--color-gray-200);
|
|
--color-surface-default-brand-secondary-light: var(--color-yellow-yellow200);
|
|
--color-surface-default-positive-secondary-light: var(--color-kiwi-kiwi0);
|
|
--color-surface-default-warning-secondary-light: var(--color-yellow-yellow0);
|
|
--color-surface-default-negative-secondary-light: var(--color-red-red0);
|
|
|
|
--color-surface-inverse-brand-accent: var(--color-yellow-yellow100);
|
|
--color-surface-inverse-brand-primary: var(--color-yellow-yellow50);
|
|
--color-surface-inverse-brand-secondary: var(--color-yellow-yellow200);
|
|
--color-surface-inverse-primary: var(--color-gray-000);
|
|
--color-surface-inverse-secondary: var(--color-gray-100);
|
|
--color-surface-inverse-tertiary: var(--color-gray-200);
|
|
--color-surface-inverse-utility-info: var(--color-royal-blue-royal-blue300);
|
|
--color-surface-inverse-utility-negative: var(--color-red-red300);
|
|
--color-surface-inverse-utility-positive: var(--color-kiwi-kiwi300);
|
|
--color-surface-inverse-utility-warning: var(--color-yellow-yellow300);
|
|
|
|
/* Theme-dark invert aliases (mapping to inverse) */
|
|
--color-surface-invert-primary: var(--color-surface-inverse-primary);
|
|
--color-surface-invert-secondary: var(--color-surface-inverse-secondary);
|
|
--color-surface-invert-tertiary: var(--color-surface-inverse-tertiary);
|
|
--color-surface-invert-brand-primary: var(
|
|
--color-surface-inverse-brand-primary
|
|
);
|
|
--color-surface-invert-brand-secondary: var(
|
|
--color-surface-inverse-brand-secondary
|
|
);
|
|
--color-surface-invert-brand-accent: var(
|
|
--color-surface-inverse-brand-accent
|
|
);
|
|
--color-surface-invert-brand-lime: var(--color-lime-lime100);
|
|
--color-surface-invert-brand-royal: var(--color-royal-blue-royal-blue50);
|
|
--color-surface-invert-brand-teal: var(--color-teal-teal50);
|
|
--color-surface-invert-brand-rust: var(--color-rust-rust100);
|
|
--color-surface-invert-brand-lavender: var(--color-lavender-lavender150);
|
|
--color-surface-invert-brand-kiwi: var(--color-kiwi-kiwi200);
|
|
--color-surface-invert-brand-red: var(--color-red-red100);
|
|
--color-surface-invert-negative-primary: var(--color-red-red200);
|
|
--color-surface-invert-negative-secondary: var(--color-red-red0);
|
|
--color-surface-invert-warning-primary: var(--color-yellow-yellow300);
|
|
--color-surface-invert-warning-secondary: var(--color-yellow-yellow0);
|
|
--color-surface-invert-positive-primary: var(--color-kiwi-kiwi300);
|
|
--color-surface-invert-positive-secondary: var(--color-kiwi-kiwi0);
|
|
|
|
/* Theme-light invert variants */
|
|
--color-surface-invert-primary-light: var(--color-gray-1000);
|
|
--color-surface-invert-secondary-light: var(--color-gray-900);
|
|
--color-surface-invert-tertiary-light: var(--color-gray-800);
|
|
--color-surface-invert-brand-primary-light: var(--color-yellow-yellow1000);
|
|
--color-surface-invert-brand-secondary-light: var(--color-yellow-yellow800);
|
|
--color-surface-invert-brand-lime-light: var(--color-lime-lime800);
|
|
--color-surface-invert-brand-royal-light: var(
|
|
--color-royal-blue-royal-blue800
|
|
);
|
|
--color-surface-invert-brand-teal-light: var(--color-teal-teal700);
|
|
--color-surface-invert-brand-rust-light: var(--color-rust-rust700);
|
|
--color-surface-invert-brand-lavender-light: var(
|
|
--color-lavender-lavender700
|
|
);
|
|
--color-surface-invert-brand-kiwi-light: var(--color-kiwi-kiwi700);
|
|
--color-surface-invert-brand-red-light: var(--color-red-red700);
|
|
--color-surface-invert-negative-primary-light: var(--color-red-red400);
|
|
--color-surface-invert-negative-secondary-light: var(--color-red-red1000);
|
|
--color-surface-invert-warning-primary-light: var(--color-yellow-yellow500);
|
|
--color-surface-invert-warning-secondary-light: var(
|
|
--color-yellow-yellow1000
|
|
);
|
|
--color-surface-invert-positive-primary-light: var(--color-kiwi-kiwi500);
|
|
--color-surface-invert-positive-secondary-light: var(--color-kiwi-kiwi1000);
|
|
|
|
/* Color */
|
|
--color-config-europe-morning-magenta: oklch(66.27% 0.264 321.73);
|
|
/* white */
|
|
--bg-color-light-primary: oklch(100% 0 263.28);
|
|
|
|
/* Shadow */
|
|
--shadow-focus-default: 0px 0px 10px 1px oklch(98.01% 0.065 105.71);
|
|
--shadow-subtle: 0px 0px 48px 0px oklch(0% 0 0 / 10%);
|
|
--shadow-minimal-shadow: 0px 0px 8px 0px oklch(0% 0 0 / 15%);
|
|
--shadow-focus-inverse: 0px 0px 10px 1px oklch(23.93% 0 263.28);
|
|
/* Use this shadow most of the time */
|
|
--shadow-shallow-below: 0px 4px 16px 0px oklch(0% 0 0 / 12%);
|
|
--shadow-default: 0px 4px 6px 0px oklch(0% 0 0 / 9%);
|
|
|
|
/* Typography */
|
|
--text-xx-large-display: 96px;
|
|
--text-xx-large-display--line-height: 110%;
|
|
--text-xx-large-display--letter-spacing: 0px;
|
|
--text-xx-large-display--font-weight: 400;
|
|
|
|
--text-xx-large-heading: 40px;
|
|
--text-xx-large-heading--line-height: 52px;
|
|
--text-xx-large-heading--letter-spacing: 0px;
|
|
--text-xx-large-heading--font-weight: 700;
|
|
|
|
--text-x-large-heading: 36px;
|
|
--text-x-large-heading--line-height: 44px;
|
|
--text-x-large-heading--letter-spacing: 0px;
|
|
--text-x-large-heading--font-weight: 800;
|
|
|
|
--text-large-heading: 32px;
|
|
--text-large-heading--line-height: 40px;
|
|
--text-large-heading--letter-spacing: 0px;
|
|
--text-large-heading--font-weight: 700;
|
|
|
|
--text-medium-heading: 28px;
|
|
--text-medium-heading--line-height: 36px;
|
|
--text-medium-heading--letter-spacing: 0px;
|
|
--text-medium-heading--font-weight: 700;
|
|
|
|
--text-small-heading: 24px;
|
|
--text-small-heading--line-height: 32px;
|
|
--text-small-heading--letter-spacing: 0px;
|
|
--text-small-heading--font-weight: 700;
|
|
|
|
--text-x-small-heading: 20px;
|
|
--text-x-small-heading--line-height: 28px;
|
|
--text-x-small-heading--letter-spacing: 0px;
|
|
--text-x-small-heading--font-weight: 700;
|
|
|
|
--text-large-label: 18px;
|
|
--text-large-label--line-height: 24px;
|
|
--text-large-label--letter-spacing: 0px;
|
|
--text-large-label--font-weight: 500;
|
|
|
|
--text-medium-label: 16px;
|
|
--text-medium-label--line-height: 20px;
|
|
--text-medium-label--letter-spacing: 0px;
|
|
--text-medium-label--font-weight: 500;
|
|
|
|
--text-small-label: 14px;
|
|
--text-small-label--line-height: 16px;
|
|
--text-small-label--letter-spacing: 0px;
|
|
--text-small-label--font-weight: 500;
|
|
|
|
/* Regular 400 */
|
|
--text-large-paragraph: 18px;
|
|
--text-large-paragraph--line-height: 130%;
|
|
--text-large-paragraph--letter-spacing: 0px;
|
|
--text-large-paragraph--font-weight: 400;
|
|
|
|
--text-medium-paragraph: 16px;
|
|
--text-medium-paragraph--line-height: 24px;
|
|
--text-medium-paragraph--letter-spacing: 0px;
|
|
--text-medium-paragraph--font-weight: 400;
|
|
|
|
--text-small-paragraph: 14px;
|
|
--text-small-paragraph--line-height: 20px;
|
|
--text-small-paragraph--letter-spacing: 0px;
|
|
--text-small-paragraph--font-weight: 400;
|
|
|
|
--text-x-small-paragraph: 12px;
|
|
--text-x-small-paragraph--line-height: 16px;
|
|
--text-x-small-paragraph--letter-spacing: 0px;
|
|
--text-x-small-paragraph--font-weight: 400;
|
|
|
|
--text-xx-small-label: 10px;
|
|
--text-xx-small-label--line-height: 12px;
|
|
--text-xx-small-label--letter-spacing: 0px;
|
|
--text-xx-small-label--font-weight: 500;
|
|
|
|
--text-xx-small-paragraph: 10px;
|
|
--text-xx-small-paragraph--line-height: 14px;
|
|
--text-xx-small-paragraph--letter-spacing: 0px;
|
|
--text-xx-small-paragraph--font-weight: 400;
|
|
|
|
--text-xx-small-italic: 10px;
|
|
--text-xx-small-italic--line-height: 14px;
|
|
--text-xx-small-italic--letter-spacing: 0px;
|
|
--text-xx-small-italic--font-weight: 400;
|
|
|
|
--text-x-large-label: 24px;
|
|
--text-x-large-label--line-height: 28px;
|
|
--text-x-large-label--letter-spacing: 0px;
|
|
--text-x-large-label--font-weight: 400;
|
|
|
|
--text-x-large-paragraph: 24px;
|
|
--text-x-large-paragraph--line-height: 32px;
|
|
--text-x-large-paragraph--letter-spacing: 0px;
|
|
--text-x-large-paragraph--font-weight: 400;
|
|
|
|
--text-xx-large-paragraph: 32px;
|
|
--text-xx-large-paragraph--line-height: 40px;
|
|
--text-xx-large-paragraph--letter-spacing: 0px;
|
|
--text-xx-large-paragraph--font-weight: 400;
|
|
|
|
--text-xx-large-label: 32px;
|
|
--text-xx-large-label--line-height: 36px;
|
|
--text-xx-large-label--letter-spacing: 0px;
|
|
--text-xx-large-label--font-weight: 400;
|
|
|
|
--text-x-small-underline: 12px;
|
|
--text-x-small-underline--line-height: 14px;
|
|
--text-x-small-underline--letter-spacing: 0px;
|
|
--text-x-small-underline--font-weight: 400;
|
|
|
|
--text-small-underline: 14px;
|
|
--text-small-underline--line-height: 16px;
|
|
--text-small-underline--letter-spacing: 0px;
|
|
--text-small-underline--font-weight: 400;
|
|
|
|
--text-medium-underline: 16px;
|
|
--text-medium-underline--line-height: 20px;
|
|
--text-medium-underline--letter-spacing: 0px;
|
|
--text-medium-underline--font-weight: 400;
|
|
|
|
--text-large-underline: 18px;
|
|
--text-large-underline--line-height: 24px;
|
|
--text-large-underline--letter-spacing: 0px;
|
|
--text-large-underline--font-weight: 400;
|
|
|
|
--text-x-large-underline: 24px;
|
|
--text-x-large-underline--line-height: 28px;
|
|
--text-x-large-underline--letter-spacing: 0px;
|
|
--text-x-large-underline--font-weight: 400;
|
|
|
|
--text-x-small-label: 12px;
|
|
--text-x-small-label--line-height: 14px;
|
|
--text-x-small-label--letter-spacing: 0px;
|
|
--text-x-small-label--font-weight: 500;
|
|
|
|
--text-x-small-label-caps: 10px;
|
|
--text-x-small-label-caps--line-height: 12px;
|
|
--text-x-small-label-caps--letter-spacing: 0px;
|
|
--text-x-small-label-caps--font-weight: 500;
|
|
|
|
--text-xx-small-heading: 16px;
|
|
--text-xx-small-heading--line-height: 22px;
|
|
--text-xx-small-heading--letter-spacing: 0px;
|
|
--text-xx-small-heading--font-weight: 700;
|
|
|
|
--text-x-small-display: 24px;
|
|
--text-x-small-display--line-height: 24px;
|
|
--text-x-small-display--letter-spacing: 0px;
|
|
--text-x-small-display--font-weight: 400;
|
|
|
|
--text-x-large-uppercase: 24px;
|
|
--text-x-large-uppercase--line-height: 120%;
|
|
--text-x-large-uppercase--letter-spacing: 0.48px;
|
|
--text-x-large-uppercase--font-weight: 400;
|
|
|
|
--text-xx-large-uppercase: 32px;
|
|
--text-xx-large-uppercase--line-height: 120%;
|
|
--text-xx-large-uppercase--letter-spacing: 0.64px;
|
|
--text-xx-large-uppercase--font-weight: 400;
|
|
|
|
--text-x-large-display: 64px;
|
|
--text-x-large-display--line-height: 110%;
|
|
--text-x-large-display--letter-spacing: 0px;
|
|
--text-x-large-display--font-weight: 400;
|
|
|
|
--text-large-display: 52px;
|
|
--text-large-display--line-height: 110%;
|
|
--text-large-display--letter-spacing: 0px;
|
|
--text-large-display--font-weight: 400;
|
|
|
|
--text-medium-display: 44px;
|
|
--text-medium-display--line-height: 110%;
|
|
--text-medium-display--letter-spacing: 0px;
|
|
--text-medium-display--font-weight: 400;
|
|
|
|
--text-xx-small-display: 18px;
|
|
--text-xx-small-display--line-height: 120%;
|
|
--text-xx-small-display--letter-spacing: 0px;
|
|
--text-xx-small-display--font-weight: 400;
|
|
|
|
--text-x-small-uppercase: 12px;
|
|
--text-x-small-uppercase--line-height: 120%;
|
|
--text-x-small-uppercase--letter-spacing: 0.24px;
|
|
--text-x-small-uppercase--font-weight: 400;
|
|
|
|
--text-large-uppercase: 18px;
|
|
--text-large-uppercase--line-height: 120%;
|
|
--text-large-uppercase--letter-spacing: 0.36px;
|
|
--text-large-uppercase--font-weight: 400;
|
|
|
|
--text-small-display: 36px;
|
|
--text-small-display--line-height: 110%;
|
|
--text-small-display--letter-spacing: 0px;
|
|
--text-small-display--font-weight: 400;
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-x-small-heading {
|
|
font-size: var(--text-x-small-heading);
|
|
line-height: var(--text-x-small-heading--line-height);
|
|
font-weight: var(--text-x-small-heading--font-weight);
|
|
letter-spacing: var(--text-x-small-heading--letter-spacing);
|
|
}
|
|
.text-x-small-paragraph {
|
|
font-size: var(--text-x-small-paragraph);
|
|
line-height: var(--text-x-small-paragraph--line-height);
|
|
font-weight: var(--text-x-small-paragraph--font-weight);
|
|
letter-spacing: var(--text-x-small-paragraph--letter-spacing);
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.xx-large-display {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-xx-large-display);
|
|
font-weight: var(--text-xx-large-display--font-weight);
|
|
line-height: var(--text-xx-large-display--line-height);
|
|
letter-spacing: var(--text-xx-large-display--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.xx-large-heading {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-xx-large-heading);
|
|
font-weight: var(--text-xx-large-heading--font-weight);
|
|
line-height: var(--text-xx-large-heading--line-height);
|
|
letter-spacing: var(--text-xx-large-heading--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-large-heading {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-x-large-heading);
|
|
font-weight: var(--text-x-large-heading--font-weight);
|
|
line-height: var(--text-x-large-heading--line-height);
|
|
letter-spacing: var(--text-x-large-heading--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.large-heading {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-large-heading);
|
|
font-weight: var(--text-large-heading--font-weight);
|
|
line-height: var(--text-large-heading--line-height);
|
|
letter-spacing: var(--text-large-heading--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.medium-heading {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-medium-heading);
|
|
font-weight: var(--text-medium-heading--font-weight);
|
|
line-height: var(--text-medium-heading--line-height);
|
|
letter-spacing: var(--text-medium-heading--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.small-heading {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-small-heading);
|
|
font-weight: var(--text-small-heading--font-weight);
|
|
line-height: var(--text-small-heading--line-height);
|
|
letter-spacing: var(--text-small-heading--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-small-heading {
|
|
font-family: var(--font-space-grotesk);
|
|
font-size: var(--text-x-small-heading);
|
|
font-weight: var(--text-x-small-heading--font-weight);
|
|
line-height: var(--text-x-small-heading--line-height);
|
|
letter-spacing: var(--text-x-small-heading--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.large-label {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-large-label);
|
|
font-weight: var(--text-large-label--font-weight);
|
|
line-height: var(--text-large-label--line-height);
|
|
letter-spacing: var(--text-large-label--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.medium-label {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-medium-label);
|
|
font-weight: var(--text-medium-label--font-weight);
|
|
line-height: var(--text-medium-label--line-height);
|
|
letter-spacing: var(--text-medium-label--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.small-label {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-small-label);
|
|
font-weight: var(--text-small-label--font-weight);
|
|
line-height: var(--text-small-label--line-height);
|
|
letter-spacing: var(--text-small-label--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
/* Regular 400 */
|
|
.large-paragraph {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-large-paragraph);
|
|
font-weight: var(--text-large-paragraph--font-weight);
|
|
line-height: var(--text-large-paragraph--line-height);
|
|
letter-spacing: var(--text-large-paragraph--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.medium-paragraph {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-medium-paragraph);
|
|
font-weight: var(--text-medium-paragraph--font-weight);
|
|
line-height: var(--text-medium-paragraph--line-height);
|
|
letter-spacing: var(--text-medium-paragraph--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.small-paragraph {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-small-paragraph);
|
|
font-weight: var(--text-small-paragraph--font-weight);
|
|
line-height: var(--text-small-paragraph--line-height);
|
|
letter-spacing: var(--text-small-paragraph--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-small-paragraph {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-x-small-paragraph);
|
|
font-weight: var(--text-x-small-paragraph--font-weight);
|
|
line-height: var(--text-x-small-paragraph--line-height);
|
|
letter-spacing: var(--text-x-small-paragraph--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.xx-small-label {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-xx-small-label);
|
|
font-weight: var(--text-xx-small-label--font-weight);
|
|
line-height: var(--text-xx-small-label--line-height);
|
|
letter-spacing: var(--text-xx-small-label--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.xx-small-paragraph {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-xx-small-paragraph);
|
|
font-weight: var(--text-xx-small-paragraph--font-weight);
|
|
line-height: var(--text-xx-small-paragraph--line-height);
|
|
letter-spacing: var(--text-xx-small-paragraph--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.xx-small-italic {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-xx-small-italic);
|
|
font-weight: var(--text-xx-small-italic--font-weight);
|
|
line-height: var(--text-xx-small-italic--line-height);
|
|
letter-spacing: var(--text-xx-small-italic--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-large-label {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-x-large-label);
|
|
font-weight: var(--text-x-large-label--font-weight);
|
|
line-height: var(--text-x-large-label--line-height);
|
|
letter-spacing: var(--text-x-large-label--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-large-paragraph {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-x-large-paragraph);
|
|
font-weight: var(--text-x-large-paragraph--font-weight);
|
|
line-height: var(--text-x-large-paragraph--line-height);
|
|
letter-spacing: var(--text-x-large-paragraph--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.xx-large-paragraph {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-xx-large-paragraph);
|
|
font-weight: var(--text-xx-large-paragraph--font-weight);
|
|
line-height: var(--text-xx-large-paragraph--line-height);
|
|
letter-spacing: var(--text-xx-large-paragraph--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.xx-large-label {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-xx-large-label);
|
|
font-weight: var(--text-xx-large-label--font-weight);
|
|
line-height: var(--text-xx-large-label--line-height);
|
|
letter-spacing: var(--text-xx-large-label--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-small-underline {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-x-small-underline);
|
|
font-weight: var(--text-x-small-underline--font-weight);
|
|
line-height: var(--text-x-small-underline--line-height);
|
|
letter-spacing: var(--text-x-small-underline--letter-spacing);
|
|
text-decoration: underline;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.small-underline {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-small-underline);
|
|
font-weight: var(--text-small-underline--font-weight);
|
|
line-height: var(--text-small-underline--line-height);
|
|
letter-spacing: var(--text-small-underline--letter-spacing);
|
|
text-decoration: underline;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.medium-underline {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-medium-underline);
|
|
font-weight: var(--text-medium-underline--font-weight);
|
|
line-height: var(--text-medium-underline--line-height);
|
|
letter-spacing: var(--text-medium-underline--letter-spacing);
|
|
text-decoration: underline;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.large-underline {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-large-underline);
|
|
font-weight: var(--text-large-underline--font-weight);
|
|
line-height: var(--text-large-underline--line-height);
|
|
letter-spacing: var(--text-large-underline--letter-spacing);
|
|
text-decoration: underline;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-large-underline {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-x-large-underline);
|
|
font-weight: var(--text-x-large-underline--font-weight);
|
|
line-height: var(--text-x-large-underline--line-height);
|
|
letter-spacing: var(--text-x-large-underline--letter-spacing);
|
|
text-decoration: underline;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-small-label {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-x-small-label);
|
|
font-weight: var(--text-x-small-label--font-weight);
|
|
line-height: var(--text-x-small-label--line-height);
|
|
letter-spacing: var(--text-x-small-label--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-small-label-caps {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-x-small-label-caps);
|
|
font-weight: var(--text-x-small-label-caps--font-weight);
|
|
line-height: var(--text-x-small-label-caps--line-height);
|
|
letter-spacing: var(--text-x-small-label-caps--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.xx-small-heading {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-xx-small-heading);
|
|
font-weight: var(--text-xx-small-heading--font-weight);
|
|
line-height: var(--text-xx-small-heading--line-height);
|
|
letter-spacing: var(--text-xx-small-heading--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-small-display {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-x-small-display);
|
|
font-weight: var(--text-x-small-display--font-weight);
|
|
line-height: var(--text-x-small-display--line-height);
|
|
letter-spacing: var(--text-x-small-display--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-large-uppercase {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-x-large-uppercase);
|
|
font-weight: var(--text-x-large-uppercase--font-weight);
|
|
line-height: var(--text-x-large-uppercase--line-height);
|
|
letter-spacing: var(--text-x-large-uppercase--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.xx-large-uppercase {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-xx-large-uppercase);
|
|
font-weight: var(--text-xx-large-uppercase--font-weight);
|
|
line-height: var(--text-xx-large-uppercase--line-height);
|
|
letter-spacing: var(--text-xx-large-uppercase--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-large-display {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-x-large-display);
|
|
font-weight: var(--text-x-large-display--font-weight);
|
|
line-height: var(--text-x-large-display--line-height);
|
|
letter-spacing: var(--text-x-large-display--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.large-display {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-large-display);
|
|
font-weight: var(--text-large-display--font-weight);
|
|
line-height: var(--text-large-display--line-height);
|
|
letter-spacing: var(--text-large-display--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.medium-display {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-medium-display);
|
|
font-weight: var(--text-medium-display--font-weight);
|
|
line-height: var(--text-medium-display--line-height);
|
|
letter-spacing: var(--text-medium-display--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.xx-small-display {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-xx-small-display);
|
|
font-weight: var(--text-xx-small-display--font-weight);
|
|
line-height: var(--text-xx-small-display--line-height);
|
|
letter-spacing: var(--text-xx-small-display--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.x-small-uppercase {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-x-small-uppercase);
|
|
font-weight: var(--text-x-small-uppercase--font-weight);
|
|
line-height: var(--text-x-small-uppercase--line-height);
|
|
letter-spacing: var(--text-x-small-uppercase--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.large-uppercase {
|
|
font-family: var(--font-inter);
|
|
font-size: var(--text-large-uppercase);
|
|
font-weight: var(--text-large-uppercase--font-weight);
|
|
line-height: var(--text-large-uppercase--line-height);
|
|
letter-spacing: var(--text-large-uppercase--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
.small-display {
|
|
font-family: var(--font-bricolage-grotesque);
|
|
font-size: var(--text-small-display);
|
|
font-weight: var(--text-small-display--font-weight);
|
|
line-height: var(--text-small-display--line-height);
|
|
letter-spacing: var(--text-small-display--letter-spacing);
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
text-indent: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|