/* Generated from @alterra-mountain-company/alterra-design-system 30.0.0 (ikonWeb). Do not edit. * Source: ~/Code/Corduroy/dist/scss/ikonWeb.scss * Regenerate with: node tools/build-tokens.mjs * 460 tokens written, 3 skipped (invalid upstream value), 9 breakpoint declarations documented below (not emitted as variables). */ :root { /* Core opacity */ --ds-core-opacity-100: .08; --ds-core-opacity-200: .2; --ds-core-opacity-300: .5; --ds-core-opacity-400: .8; /* Core font — family */ --ds-core-font-family-primary: 'Futura PT', futura-pt, sans-serif; --ds-core-font-family-secondary: 'Futura PT', futura-pt, sans-serif; --ds-core-font-family-icon: 'Font Awesome 6 Pro'; --ds-core-font-family-campaign: 'Futura PT Cond', futura-pt-cond, sans-serif; /* Core font — line */ --ds-core-font-line-height-90: 0.9; --ds-core-font-line-height-100: 1; --ds-core-font-line-height-110: 1.1; --ds-core-font-line-height-120: 1.2; --ds-core-font-line-height-150: 1.5; --ds-core-font-line-height-auto: normal; /* Core font — weight */ --ds-core-font-weight-regular: 400; --ds-core-font-weight-book: 400; --ds-core-font-weight-medium: 500; --ds-core-font-weight-semi-bold: 600; --ds-core-font-weight-demi: 600; --ds-core-font-weight-heavy: 700; --ds-core-font-weight-bold: 700; --ds-core-font-weight-extra-bold: 800; --ds-core-font-weight-black: 900; --ds-core-font-weight-ultra-black: 900; --ds-core-font-weight-extra-bold-oblique-weight: 800; --ds-core-font-weight-extra-bold-oblique-style: oblique; /* Core font — size */ --ds-core-font-size-100: 1rem; --ds-core-font-size-117: 1.167rem; --ds-core-font-size-125: 1.25rem; --ds-core-font-size-150: 1.5rem; --ds-core-font-size-175: 1.75rem; --ds-core-font-size-200: 2rem; --ds-core-font-size-250: 2.5rem; --ds-core-font-size-300: 3rem; --ds-core-font-size-350: 3.5rem; --ds-core-font-size-400: 4rem; --ds-core-font-size-450: 4.5rem; --ds-core-font-size-550: 5.5rem; --ds-core-font-size-600: 6rem; --ds-core-font-size-800: 8rem; --ds-core-font-size-075: 0.75rem; --ds-core-font-size-087: 0.875rem; --ds-core-font-size-button: 1rem; /* Core color — neutral */ --ds-core-color-neutral-25: #FAFAFA; --ds-core-color-neutral-50: #F4F4F4; --ds-core-color-neutral-100: #EDEDED; --ds-core-color-neutral-200: #d9d9d9; --ds-core-color-neutral-300: #C2C2C2; --ds-core-color-neutral-400: #a3a3a3; --ds-core-color-neutral-500: #8C8C8C; --ds-core-color-neutral-550: #757575; --ds-core-color-neutral-600: #575757; --ds-core-color-neutral-700: #383838; --ds-core-color-neutral-800: #252525; --ds-core-color-neutral-900: #191919; --ds-core-color-neutral-white: #ffffff; --ds-core-color-neutral-black: #000000; --ds-core-color-neutral-beige: #C5B9AC; /* Core color — primary */ --ds-core-color-primary-100: #09396D; --ds-core-color-primary-200: #092E57; --ds-core-color-primary-300: #092340; --ds-core-color-primary-400: #08203A; --ds-core-color-primary-500: #071C33; /* Core color — secondary */ --ds-core-color-secondary-100: #FFD256; --ds-core-color-secondary-200: #FFCD41; --ds-core-color-secondary-300: #FFC72C; --ds-core-color-secondary-400: #EDB137; --ds-core-color-secondary-500: #CC9700; /* Core color — tertiary */ --ds-core-color-tertiary-100: #21A4E1; --ds-core-color-tertiary-200: #089ADE; --ds-core-color-tertiary-300: #007DB7; --ds-core-color-tertiary-400: #0071A5; --ds-core-color-tertiary-500: #006695; /* Core color — red */ --ds-core-color-red-100: #FBEDEA; --ds-core-color-red-200: #FAB5B0; --ds-core-color-red-300: #FA8078; --ds-core-color-red-400: #EA1609; --ds-core-color-red-500: #D91208; --ds-core-color-red-600: #C91208; /* Core color — orange */ --ds-core-color-orange-100: #FFFAF1; --ds-core-color-orange-200: #FF9F46; --ds-core-color-orange-300: #F68C42; --ds-core-color-orange-400: #F47721; --ds-core-color-orange-500: #F68C42; --ds-core-color-orange-600: #F47721; /* Core color — yellow */ --ds-core-color-yellow-100: #FFF2C5; --ds-core-color-yellow-200: #FEDE6A; --ds-core-color-yellow-300: #f7cb14; --ds-core-color-yellow-400: #EDB137; --ds-core-color-yellow-500: #FEDE6A; --ds-core-color-yellow-600: #FED647; /* Core color — green */ --ds-core-color-green-100: #EDF8ED; --ds-core-color-green-200: #D3F3D0; --ds-core-color-green-300: #A3E79D; --ds-core-color-green-400: #73DA6A; --ds-core-color-green-500: #3AAA36; --ds-core-color-green-600: #2B8028; /* Core color — blue */ --ds-core-color-blue-100: #E3ECF0; --ds-core-color-blue-200: #3772C4; --ds-core-color-blue-300: #0047b6; --ds-core-color-blue-400: #09396D; --ds-core-color-blue-500: #0EA5E9; --ds-core-color-blue-600: #3772C4; /* Core color — purple */ --ds-core-color-purple-100: #BA96DB; --ds-core-color-purple-200: #A97CD1; --ds-core-color-purple-300: #9B67CA; --ds-core-color-purple-400: #8A4CC1; --ds-core-color-purple-500: #7C3EB3; --ds-core-color-purple-600: #6A3599; /* Core color — campaign */ --ds-core-color-campaign-high-viz-green: #AFFC41; --ds-core-color-campaign-glacier-blue: #0047B6; --ds-core-color-campaign-glacier-blue-alt: #0061FE; /* Core radius */ --ds-core-radius-0px: 0px; --ds-core-radius-4px: 4px; --ds-core-radius-10px: 10px; --ds-core-radius-24px: 24px; --ds-core-radius-999px: 999px; /* Core border */ --ds-core-border-width-1px: 1px; --ds-core-border-width-2px: 2px; --ds-core-border-width-3px: 3px; /* Space */ --ds-space-0: 0; --ds-space-100: 1rem; --ds-space-150: 1.5rem; --ds-space-200: 2rem; --ds-space-300: 3rem; --ds-space-400: 4rem; --ds-space-500: 5rem; --ds-space-1000: 10rem; --ds-space-012: 0.125rem; --ds-space-025: 0.25rem; --ds-space-050: 0.5rem; --ds-space-006: 1px; --ds-space-037: 0.375rem; --ds-space-075: 0.75rem; /* Skipped — value was the literal `[object Object]` in the source SCSS (broken upstream serialization, not a real value): $ds-space-margin-default-desktop $ds-space-margin-default-mobile $ds-space-margin-default-tablet */ --ds-space-margin-breakpoint: 10rem; /* Color — text */ --ds-color-text-default: #092340; --ds-color-text-headline: #092340; --ds-color-text-subdued: #575757; --ds-color-text-on-dark: #ffffff; --ds-color-text-disabled: #C2C2C2; --ds-color-text-success: #2B8028; --ds-color-text-danger-default: #D91208; --ds-color-text-danger-hover: #C91208; --ds-color-text-danger-pressed: #C91208; --ds-color-text-button-default: #ffffff; --ds-color-text-button-secondary: #007DB7; --ds-color-text-button-accent: #092340; --ds-color-text-alert-default: #092340; --ds-color-text-alert-secondary: #ffffff; --ds-color-text-link-default: #007DB7; --ds-color-text-link-hover: #006695; --ds-color-text-link-pressed: #006695; --ds-color-text-link-subdued: #092340; --ds-color-text-link-on-dark: #089ADE; --ds-color-text-badge-default: #092340; --ds-color-text-footer-nav-bar: #ffffff; --ds-color-text-header-nav-menu: #ffffff; --ds-color-text-header-nav-button: #ffffff; /* Color — background */ --ds-color-background-default: #ffffff; --ds-color-background-secondary: #F4F4F4; --ds-color-background-dark: #092340; --ds-color-background-disabled: #EDEDED; --ds-color-background-accent: #FFC72C; --ds-color-background-highlight: rgba(0, 125, 183, 0.08); --ds-color-background-input-default: #ffffff; --ds-color-background-input-secondary: #ffffff; --ds-color-background-input-hover: #EDEDED; --ds-color-background-input-pressed: #EDEDED; --ds-color-background-input-on-dark: #092340; --ds-color-background-input-hover-on-dark: #383838; --ds-color-background-action-default: #575757; --ds-color-background-action-hover: #383838; --ds-color-background-action-pressed: #383838; --ds-color-background-action-ripple: rgba(0, 125, 183, 0.08); --ds-color-background-action-selected-default: #007DB7; --ds-color-background-action-selected-hover: #0071A5; --ds-color-background-action-selected-pressed: #0071A5; --ds-color-background-action-on-dark: #ffffff; --ds-color-background-action-hover-on-dark: rgba(255, 255, 255, 0.08); --ds-color-background-action-secondary-default: #252525; --ds-color-background-action-secondary-hover: rgba(37, 37, 37, 0.08); --ds-color-background-action-secondary-pressed: rgba(37, 37, 37, 0.36); --ds-color-background-button-default: #007DB7; --ds-color-background-button-hover: #006695; --ds-color-background-button-pressed: #006695; --ds-color-background-button-secondary-default: #ffffff; --ds-color-background-button-secondary-hover: #EDEDED; --ds-color-background-button-secondary-pressed: #EDEDED; --ds-color-background-button-accent-default: #FFC72C; --ds-color-background-button-accent-pressed: #EDB137; --ds-color-background-alert-default: #FFC72C; --ds-color-background-alert-secondary: #007DB7; --ds-color-background-success-default: #2B8028; --ds-color-background-success-subdued: #EDF8ED; --ds-color-background-danger-default: #EA1609; --ds-color-background-danger-subdued: #FBEDEA; --ds-color-background-danger-pressed: #D91208; --ds-color-background-danger-hover: #D91208; --ds-color-background-warning-default: #FF9F46; --ds-color-background-warning-subdued: #FFFAF1; --ds-color-background-badge-default: #FFC72C; --ds-color-background-subdued-default: #d9d9d9; --ds-color-background-subdued-on-dark: #8C8C8C; --ds-color-background-toggle-selected: #007DB7; --ds-color-background-toggle-inactive: #8C8C8C; /* Color — background (destination markers) */ --ds-color-background-destination-default: #383838; --ds-color-background-destination-aba: #012F64; --ds-color-background-destination-alt: #D71821; --ds-color-background-destination-alyk: #003B4D; --ds-color-background-destination-apik: #2484C6; --ds-color-background-destination-asn: #000000; --ds-color-background-destination-bac: #F74D1E; --ds-color-background-destination-bbm: #D44735; --ds-color-background-destination-bbm-bm: #ed1c24; --ds-color-background-destination-bbm-ss: #ADD256; --ds-color-background-destination-bhr: #2D682B; --ds-color-background-destination-big: #000000; --ds-color-background-destination-blm: #00AEEF; --ds-color-background-destination-blmt: #0076A2; --ds-color-background-destination-bmr: #28317E; --ds-color-background-destination-bri: #00539F; --ds-color-background-destination-cha: #D71635; --ds-color-background-destination-cmbk: #FB2E33; --ds-color-background-destination-cmh: #EE3124; --ds-color-background-destination-cop: #1BD5EE; --ds-color-background-destination-crm: #072B38; --ds-color-background-destination-cyp: #004B8D; --ds-color-background-destination-dos: #005EB8; --ds-color-background-destination-dvr: #006747; --ds-color-background-destination-eld: #E54E26; --ds-color-background-destination-fura: #000000; --ds-color-background-destination-grpk: #047278; --ds-color-background-destination-grv: #003DA6; --ds-color-background-destination-isch: #BB1B3F; --ds-color-background-destination-jax: #B20838; --ds-color-background-destination-jun: #036A37; --ds-color-background-destination-kil: #009DDC; --ds-color-background-destination-kil-kil: #009DDC; --ds-color-background-destination-kil-pic: #006A51; --ds-color-background-destination-kzs: #ED1C24; --ds-color-background-destination-lema: #37707c; --ds-color-background-destination-loo: #EF5D20; --ds-color-background-destination-lot: #897767; --ds-color-background-destination-luts: #6B7B7A; --ds-color-background-destination-mam: #0072B2; --ds-color-background-destination-mege: #002F6C; --ds-color-background-destination-mntt: #E60014; --ds-color-background-destination-mnyp: #343B19; --ds-color-background-destination-mtb: #20419A; --ds-color-background-destination-mwhs: #EF4035; --ds-color-background-destination-myok: #3965b4; --ds-color-background-destination-neko: #000000; --ds-color-background-destination-nis: #FC5000; --ds-color-background-destination-pan: #0098D6; --ds-color-background-destination-red: #C42031; --ds-color-background-destination-rvs: #0C2340; --ds-color-background-destination-satt: #F04D47; --ds-color-background-destination-sb: #2C3E50; --ds-color-background-destination-sb3: #0C233F; --ds-color-background-destination-sb3-ll: #ED1D23; --ds-color-background-destination-sb3-nrq: #27809C; --ds-color-background-destination-sb3-sun: #0055A5; --ds-color-background-destination-shig: #00A9D6; --ds-color-background-destination-slf: #00467F; --ds-color-background-destination-snb: #0082CA; --ds-color-background-destination-sno: #0064A4; --ds-color-background-destination-snwr: #255642; --ds-color-background-destination-snq: #3F738D; --ds-color-background-destination-snz: #000000; --ds-color-background-destination-snz-cor: #01A0C6; --ds-color-background-destination-snz-hut: #FD050B; --ds-color-background-destination-snz-rmk: #3CA42A; --ds-color-background-destination-sol: #173963; --ds-color-background-destination-spk: #1B2776; --ds-color-background-destination-sqa: #201547; --ds-color-background-destination-srv: #C5281C; --ds-color-background-destination-stmz: #002D5D; --ds-color-background-destination-str: #E32619; --ds-color-background-destination-sug: #BA1A22; --ds-color-background-destination-svmr: #91B9E2; --ds-color-background-destination-svr: #002856; --ds-color-background-destination-svst: #00b6ea; --ds-color-background-destination-swb: #17528A; --ds-color-background-destination-szm: #0ED771; --ds-color-background-destination-tao: #00AEEF; --ds-color-background-destination-tbo: #EE3124; --ds-color-background-destination-trb: #AB192D; --ds-color-background-destination-vald: #FF0048; --ds-color-background-destination-vnv: #000000; --ds-color-background-destination-win: #4F2D12; --ds-color-background-destination-wp: #C8102E; --ds-color-background-destination-zaoo: #29A846; --ds-color-background-destination-yund: #008643; --ds-color-background-destination-zer: #245686; --ds-color-background-destination-ikon-pass: #FFC72C; /* Color — background */ --ds-color-background-footer-nav-bar: #092340; --ds-color-background-header-nav-bar: #092340; --ds-color-background-header-nav-menu: #006695; --ds-color-background-header-nav-cart-animation: rgb(100% 78.039% 17.255% / 0.2); --ds-color-background-header-nav-button-default: #007DB7; --ds-color-background-header-nav-button-hover: #006695; --ds-color-background-wallet-button-default: #092E57; /* Color — icon */ --ds-color-icon-default: #092340; --ds-color-icon-subdued: #757575; --ds-color-icon-on-dark: #ffffff; --ds-color-icon-disabled: #C2C2C2; --ds-color-icon-success: #2B8028; --ds-color-icon-warning: #FF9F46; --ds-color-icon-danger-default: #D91208; --ds-color-icon-danger-hover: #C91208; --ds-color-icon-danger-pressed: #C91208; --ds-color-icon-link-default: #007DB7; --ds-color-icon-link-hover: #006695; --ds-color-icon-link-pressed: #006695; --ds-color-icon-link-on-dark: #089ADE; --ds-color-icon-button-default: #ffffff; --ds-color-icon-button-secondary: #007DB7; --ds-color-icon-button-accent: #092340; --ds-color-icon-trails-easy: #3AAA36; --ds-color-icon-trails-intermediate: #3772C4; --ds-color-icon-trails-expert: #000000; --ds-color-icon-trails-terrain: #F68C42; --ds-color-icon-trails-fun: #7C3EB3; --ds-color-icon-action-default: #575757; --ds-color-icon-action-hover: #383838; --ds-color-icon-action-pressed: #383838; --ds-color-icon-action-on-dark: #ffffff; --ds-color-icon-action-selected-default: #007DB7; --ds-color-icon-action-selected-hover: #0071A5; --ds-color-icon-action-selected-pressed: #0071A5; --ds-color-icon-badge-default: #092340; --ds-color-icon-alert-default: #092340; --ds-color-icon-ikon-pass-full: #EDB137; --ds-color-icon-ikon-pass-base: #0047b6; --ds-color-icon-ikon-pass-session: #09396D; --ds-color-icon-header-nav-bar: #092340; --ds-color-icon-header-nav-menu: #ffffff; --ds-color-icon-header-nav-button: #ffffff; /* Color — border */ --ds-color-border-default: #d9d9d9; --ds-color-border-on-dark: #ffffff; --ds-color-border-dark: #092340; --ds-color-border-disabled: #EDEDED; --ds-color-border-success: #2B8028; --ds-color-border-danger: #EA1609; --ds-color-border-warning: #FFC72C; --ds-color-border-button-secondary: #007DB7; --ds-color-border-focused-default: #007DB7; --ds-color-border-focused-on-dark: #089ADE; --ds-color-border-input-default: #757575; --ds-color-border-input-focused: #007DB7; --ds-color-border-link-on-dark: #ffffff; --ds-color-border-link-default: #EDB137; --ds-color-border-link-hover: #000000; --ds-color-border-accent: #FFC72C; /* Color — overlay */ --ds-color-overlay-default: rgba(0, 0, 0, 0.50); --ds-color-overlay-dark: rgba(0, 0, 0, 0.80); /* Color — logo */ --ds-color-logo-default: #000000; --ds-color-logo-on-dark: #ffffff; --ds-color-logo-neutral: #373A36; --ds-color-logo-ikon-pass: #092340; --ds-color-logo-disabled: #C2C2C2; /* Color — campaign */ --ds-color-campaign-1: #AFFC41; --ds-color-campaign-2: #0047B6; --ds-color-campaign-3: #0061FE; --ds-color-campaign-4: #C5B9AC; /* Font — letter */ --ds-font-letter-spacing-tight: -0.025em; --ds-font-letter-spacing-default: 0em; --ds-font-letter-spacing-wide: 0.025em; --ds-font-letter-spacing-display: 0em; --ds-font-letter-spacing-title: 0em; /* Font — weight */ --ds-font-weight-display: 700; --ds-font-weight-campaign-weight: 800; --ds-font-weight-campaign-style: oblique; --ds-font-weight-title: 600; --ds-font-weight-body-default: 500; --ds-font-weight-body-bold: 700; --ds-font-weight-body-link: 600; /* Font — display */ --ds-font-display-1-desktop: 700 5.5rem/1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-display-1-mobile: 700 3rem/1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-display-1-tablet: 700 4.5rem/1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-display-2-desktop: 700 4rem/1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-display-2-mobile: 700 2.5rem/1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-display-2-tablet: 700 3.5rem/1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-display-3-desktop: 700 2.5rem/1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-display-3-mobile: 700 2rem/1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-display-3-tablet: 700 2.5rem/1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-display-plus-desktop: oblique Extra Bold 8rem/0.9 'Futura PT Cond', futura-pt-cond, sans-serif; --ds-font-display-plus-mobile: oblique Extra Bold 4rem/0.9 'Futura PT Cond', futura-pt-cond, sans-serif; --ds-font-display-plus-tablet: oblique Extra Bold 5.5rem/0.9 'Futura PT Cond', futura-pt-cond, sans-serif; /* Font — stat */ --ds-font-stat-1-desktop: 700 8rem/1.1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-stat-1-mobile: 700 4rem/1.1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-stat-1-tablet: 700 5.5rem/1.1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-stat-2-desktop: 700 5.5rem/1.1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-stat-2-mobile: 700 3rem/1.1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-stat-2-tablet: 700 4rem/1.1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-stat-3-desktop: 700 3rem/1.1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-stat-3-mobile: 700 2rem/1.1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-stat-3-tablet: 700 2.5rem/1.1 'Futura PT Bold', futura-pt-bold, sans-serif; /* Font — title */ --ds-font-title-1-default: 600 1.75rem/1.2 'Futura PT', futura-pt, sans-serif; --ds-font-title-1-uppercase: 700 1.75rem/1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-title-2-default: 600 1.25rem/1.2 'Futura PT', futura-pt, sans-serif; --ds-font-title-2-uppercase: 700 1.25rem/1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-title-3-default: 600 1rem/1.2 'Futura PT', futura-pt, sans-serif; --ds-font-title-3-uppercase: 700 1rem/1 'Futura PT Bold', futura-pt-bold, sans-serif; /* Font — subtitle */ --ds-font-subtitle-default: 500 1.25rem/1.2 'Futura PT', futura-pt, sans-serif; --ds-font-subtitle-link: 600 1.25rem/1.2 'Futura PT', futura-pt, sans-serif; /* Font — body */ --ds-font-body-default: 500 1rem/1.5 'Futura PT', futura-pt, sans-serif; --ds-font-body-bold: 700 1rem/1.5 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-body-link: 600 1rem/1.5 'Futura PT', futura-pt, sans-serif; --ds-font-body-compact-default: 500 1rem/1.2 'Futura PT', futura-pt, sans-serif; --ds-font-body-compact-bold: 700 1rem/1.2 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-body-compact-link: 600 1rem/1.2 'Futura PT', futura-pt, sans-serif; /* Font — button */ --ds-font-button-1: 700 1rem/1 'Futura PT Bold', futura-pt-bold, sans-serif; --ds-font-button-2: 700 0.75rem/1 'Futura PT Bold', futura-pt-bold, sans-serif; /* Font — utility */ --ds-font-utility-1-default: 500 0.875rem/1.2 'Futura PT', futura-pt, sans-serif; --ds-font-utility-1-link: 500 0.875rem/1.2 'Futura PT', futura-pt, sans-serif; --ds-font-utility-2-default: 400 0.75rem/1.2 'Futura PT', futura-pt, sans-serif; --ds-font-utility-2-link: 400 0.75rem/1.2 'Futura PT', futura-pt, sans-serif; --ds-font-utility-2-uppercase: 700 0.75rem/1 'Futura PT Bold', futura-pt-bold, sans-serif; /* Font — nav */ --ds-font-nav-app: 500 11px/normal 'Futura PT', futura-pt, sans-serif; /* Font — text */ --ds-font-text-case-upper-case: uppercase; --ds-font-text-case-title-case: capitalize; --ds-font-text-case-display: uppercase; --ds-font-text-decoration-underline: underline; /* Elevation */ --ds-elevation-light: 0 0.25rem 1rem 0 rgba(0,0,0,0.12); --ds-elevation-default: 0 1rem 2rem 0.25rem rgba(0,0,0,0.05); --ds-elevation-dark: 0 1rem 1rem 0 rgba(0,0,0,0.08); --ds-elevation-bottom-sheet: 0 -4px 8px 0 rgba(0,0,0,0.10); --ds-elevation-header-nav: 0 16px 32px 4px rgba(0,0,0,0.12); /* Size */ --ds-size-0: 0rem; --ds-size-100: 1rem; --ds-size-125: 1.25rem; --ds-size-150: 1.5rem; --ds-size-175: 1.75rem; --ds-size-200: 2rem; --ds-size-225: 2.25rem; --ds-size-250: 2.5rem; --ds-size-300: 3rem; --ds-size-350: 3.5rem; --ds-size-400: 4rem; --ds-size-500: 5rem; --ds-size-600: 6rem; --ds-size-800: 8rem; --ds-size-006: 1px; --ds-size-012: 0.125rem; --ds-size-025: 0.25rem; --ds-size-050: 0.5rem; --ds-size-075: 0.75rem; --ds-size-087: 0.875rem; /* Radius */ --ds-radius-button-default: 4px; --ds-radius-button-header-nav: 0px; --ds-radius-default: 4px; --ds-radius-emphasis: 10px; --ds-radius-rounded: 24px; --ds-radius-circle: 999px; /* Glass */ --ds-glass-default-background-blur: blur(31.9px); /* Breakpoints — documentation only. Custom properties cannot be read inside @media queries, so these are not emitted as variables; use the literal pixel values below in @media (min-width: …) / (max-width: …). xs 0px–767px sm 768px–1023px md 1024px–1199px lg 1200px–1439px xl ≥1440px */ /* Border */ --ds-border-width-default: 1px; --ds-border-width-emphasis: 2px; --ds-border-width-tab-selected: 3px; /* Title */ --ds-title: 600; } /* --------------------------------------------------------------------- * Theme layer — lifted-corduroy's own tokens, not from Corduroy. * Kept tiny and documented. Prefixed --lc- to stay distinct from --ds-*. * ------------------------------------------------------------------- */ :root { --lc-container: 70rem; /* 1120px — ikonpass.com content width at 1440 */ --lc-measure: 44rem; /* article reading column, INCLUDING gutters: 44rem - 2*2rem = 640px text at tablet */ --lc-gutter: var(--ds-space-100); /* xs */ --lc-header-height: 3.5rem; /* 56px xs */ --lc-speed: 200ms; --lc-speed-slow: 500ms; /* button hover wipe; matches ikonpass.com */ --lc-ease: cubic-bezier(.2,.7,.2,1); --lc-z-header: 100; --lc-z-drawer: 110; --lc-z-overlay: 105; /* Vertical rhythm — two steps, used by role, never by eye (spec §5). section: between page sections, and from the header/hero to the first content. block: between the parts of one section (head → body → foot, grid → pagination). */ --lc-space-section: var(--ds-space-300); /* 48px xs */ --lc-space-block: var(--ds-space-200); /* 32px xs/sm */ } @media (min-width: 768px) { :root { --lc-gutter: var(--ds-space-200); --lc-header-height: 4rem; --lc-space-section: var(--ds-space-400); /* 64px */ } } @media (min-width: 1024px) { :root { --lc-gutter: var(--ds-space-300); --lc-space-section: var(--ds-space-500); /* 80px */ --lc-space-block: var(--ds-space-300); /* 48px */ --lc-measure: 50rem; /* 800px incl. 2*3rem gutters = 704px of text (owner: "closer to 700") */ } }