/* * Design tokens from Figma — Components · Build 1 * Light: node 24886:413424 | Dark: node 24886:413677 * * Toggling: * - Color mode: set `data-color-scheme="light"` | `data-color-scheme="dark"` on * (defaults to light when omitted). * - Brand: set `class="theme-gm"` or `class="theme-buick"` on (GM is also the * default token set on :root when no Buick overrides apply). */ /* -------------------------------------------------------------------------- */ /* Primitives (shared across light / dark — from Figma variables) */ /* -------------------------------------------------------------------------- */ @layer fonts, tokens, styles, sections, blocks, utilities, states, themes; @layer tokens { :root { /* Spacing scale */ --spacing-0: 0; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px; --spacing-48: 48px; --spacing-64: 64px; --spacing-80: 80px; --spacing-160: 160px; /* Sizing */ --sizing-12: 12px; --sizing-16: 16px; /* Breadcrumb (Figma Components · Build 1, node 36450:259862) */ --breadcrumb-gap: var(--spacing-12); --breadcrumb-separator-width: 7px; --sizing-24: 24px; --sizing-32: 32px; --sizing-48: 48px; --sizing-64: 64px; /* Radius */ --radius-small: 8px; --radius-medium: 12px; --radius-xlarge: 32px; /* Border width */ --border-default: 1px; --border-focus: 2px; --border-none: 0; /* Typography — families & weights */ --type-font-family-label: inter, system-ui, sans-serif; --type-font-family-paragraph: inter, system-ui, sans-serif; --type-font-family-display: inter, system-ui, sans-serif; --type-font-weight-label: 500; --type-font-weight-paragraph: 500; --type-font-weight-display: 500; /* Typography — sizes & line heights */ --type-font-size-label-1: 16px; --type-line-height-label-1: 16px; --type-font-size-label-2: 14px; --type-line-height-label-2: 14px; --type-font-size-paragraph-1: 16px; --type-line-height-paragraph-1: 22px; --type-font-size-paragraph-2: 14px; --type-line-height-paragraph-2: 20px; --type-font-size-display-1: 80px; --type-line-height-display-1: 88px; --type-font-size-display-5: 24px; --type-line-height-display-5: 32px; /* Figma letterSpacing -2 → -0.02em; Display 5 uses -1 → -0.01em */ --type-letter-spacing-default: -0.02em; --type-letter-spacing-display-5: -0.01em; /* Composite text styles (Figma: Label/Label 1, etc.) */ --type-style-label-1: var(--type-font-weight-label) var(--type-font-size-label-1) / var(--type-line-height-label-1) var(--type-font-family-label); --type-style-label-2: var(--type-font-weight-label) var(--type-font-size-label-2) / var(--type-line-height-label-2) var(--type-font-family-label); --type-style-paragraph-1: var(--type-font-weight-paragraph) var(--type-font-size-paragraph-1) / var(--type-line-height-paragraph-1) var(--type-font-family-paragraph); --type-style-paragraph-2: var(--type-font-weight-paragraph) var(--type-font-size-paragraph-2) / var(--type-line-height-paragraph-2) var(--type-font-family-paragraph); --type-style-display-1: var(--type-font-weight-display) var(--type-font-size-display-1) / var(--type-line-height-display-1) var(--type-font-family-display); --type-style-display-5: var(--type-font-weight-display) var(--type-font-size-display-5) / var(--type-line-height-display-5) var(--type-font-family-display); color-scheme: light; } /* Buick typography (Figma — Components · Build 1, Buick theme) */ body.theme-buick { --type-font-family-label: 'Universal Buick Text', inter, system-ui, sans-serif; --type-font-family-paragraph: 'Universal Buick Text', inter, system-ui, sans-serif; --type-font-family-display: 'Universal Buick Display', inter, system-ui, sans-serif; --type-font-weight-label: 450; --type-font-weight-paragraph: 450; --type-font-weight-display: 450; --type-style-label-1: var(--type-font-weight-label) var(--type-font-size-label-1) / var(--type-line-height-label-1) var(--type-font-family-label); --type-style-label-2: var(--type-font-weight-label) var(--type-font-size-label-2) / var(--type-line-height-label-2) var(--type-font-family-label); --type-style-paragraph-1: var(--type-font-weight-paragraph) var(--type-font-size-paragraph-1) / var(--type-line-height-paragraph-1) var(--type-font-family-paragraph); --type-style-paragraph-2: var(--type-font-weight-paragraph) var(--type-font-size-paragraph-2) / var(--type-line-height-paragraph-2) var(--type-font-family-paragraph); --type-style-display-1: var(--type-font-weight-display) var(--type-font-size-display-1) / var(--type-line-height-display-1) var(--type-font-family-display); --type-style-display-5: var(--type-font-weight-display) var(--type-font-size-display-5) / var(--type-line-height-display-5) var(--type-font-family-display); } /* -------------------------------------------------------------------------- */ /* Light mode — semantic colors (Figma node 24886:413424) */ /* -------------------------------------------------------------------------- */ :root, html[data-color-scheme='light'] { /* Content */ --colors-content-primary: #090909; --colors-content-secondary: #6d6d6d; --colors-content-invert-primary: #fff; /* Background */ --colors-background-default: #fff; --colors-background-divider: #e6e6e6; /* Buttons */ --colors-button-primary: #090909; --colors-button-primary-hover: #505050; --colors-button-primary-focus: #505050; --colors-button-primary-active: #505050; --colors-button-secondary: #f5f5f5; --colors-button-secondary-hover: #e6e6e6; --colors-button-secondary-focus: #e6e6e6; --colors-button-secondary-active: #e6e6e6; /* Surfaces (Figma: colors/tile/default — neutral tile; fallback #f5f5f5) */ --colors-tile-default: #f5f5f5; --colors-button-tertiary: #e6e6e6; --colors-button-tertiary-hover: #cecece; --colors-button-tertiary-focus: #cecece; --colors-button-tertiary-active: #cecece; /* Links */ --colors-link-primary: #090909; --colors-link-primary-hover: #6d6d6d; --colors-link-primary-focus: #6d6d6d; --colors-link-primary-active: #6d6d6d; --colors-link-secondary: #6d6d6d; --colors-link-secondary-hover: #373737; --colors-link-secondary-focus: #373737; --colors-link-secondary-active: #373737; /* Border */ --colors-border-focus: #090909; /* Dark-only tokens: not used in light — neutral placeholders */ --colors-background-invert-divider: transparent; --colors-button-invert-primary: transparent; --colors-button-invert-primary-hover: transparent; --colors-button-invert-primary-focus: transparent; --colors-button-invert-primary-active: transparent; --colors-button-invert-secondary: transparent; --colors-button-invert-secondary-hover: transparent; --colors-button-invert-secondary-focus: transparent; --colors-button-invert-secondary-active: transparent; --colors-button-invert-tertiary: transparent; --colors-button-invert-tertiary-hover: transparent; --colors-button-invert-tertiary-focus: transparent; --colors-button-invert-tertiary-active: transparent; --colors-content-invert-secondary: transparent; --colors-link-invert-primary: transparent; --colors-link-invert-primary-hover: transparent; --colors-link-invert-primary-focus: transparent; --colors-link-invert-primary-active: transparent; --colors-link-invert-secondary: transparent; --colors-link-invert-secondary-hover: transparent; --colors-link-invert-secondary-focus: transparent; --colors-link-invert-secondary-active: transparent; --colors-border-invert-focus: transparent; /* Legacy / layout aliases (wire into existing global styles) */ --background-color: var(--colors-background-default); --text-color: var(--colors-content-primary); --link-color: var(--colors-link-primary); --link-hover-color: var(--colors-link-primary-hover); /* Legacy block/section names → semantic tokens (Figma Components · Build 1) */ --white: #fff; --black: #000; --brand-white: #fff; --brand-blue: var(--colors-link-primary); --light-color: var(--colors-tile-default); --dark-color: var(--colors-background-divider); --brand-background-default: var(--colors-background-default); --brand-foreground-default: var(--colors-content-primary); --brand-background-primary: var(--colors-tile-default); --brand-foreground-primary: var(--colors-content-primary); --brand-background-secondary: var(--colors-button-primary); --brand-foreground-secondary: var(--colors-content-invert-primary); --brand-background-tertiary: var(--colors-button-primary); --brand-foreground-tertiary: var(--colors-content-invert-primary); --brand-background-quaternary: var(--colors-button-tertiary); --brand-foreground-quaternary: var(--colors-content-primary); --brand-main: var(--colors-link-primary); --brand-main-accent: var(--colors-link-secondary); --brand-default-black: var(--colors-content-primary); --brand-default-gray: var(--colors-content-secondary); --brand-default-gray-accent: var(--colors-background-divider); --brand-dark-blue: var(--colors-button-primary); --brand-primary-gray-accent: 229 229 229; --brand-success: #00b387; --brand-warning: #ffc107; --brand-error: #ff4757; --brand-info: var(--colors-link-primary); --brand-foreground-success: var(--brand-success); --brand-foreground-warning: var(--brand-warning); --brand-foreground-error: var(--brand-error); --brand-foreground-info: var(--brand-info); --icon-primary: var(--colors-link-primary); --icon-secondary: var(--colors-link-secondary); --icon-tertiary: var(--colors-content-secondary); --icon-quaternary: var(--colors-background-divider); --btn-radius: var(--radius-small); --btn-border-width: var(--border-default); --brand-default-btn-background: var(--colors-button-primary); --brand-default-btn-foreground: var(--colors-content-invert-primary); --brand-default-btn-border: var(--colors-button-primary); --brand-default-btn-background-hover: var(--colors-button-primary-hover); --brand-default-btn-foreground-hover: var(--colors-content-invert-primary); --brand-default-btn-border-hover: var(--colors-button-primary-hover); --brand-primary-btn-background: var(--colors-button-primary); --brand-primary-btn-foreground: var(--colors-content-invert-primary); --brand-primary-btn-border: var(--colors-button-primary); --brand-primary-btn-background-hover: var(--colors-button-primary-hover); --brand-primary-btn-foreground-hover: var(--colors-content-invert-primary); --brand-primary-btn-border-hover: var(--colors-button-primary-hover); --brand-secondary-btn-background: transparent; --brand-secondary-btn-foreground: var(--colors-content-primary); --brand-secondary-btn-border: var(--colors-button-primary); --brand-secondary-btn-background-hover: var(--colors-button-secondary-hover); --brand-secondary-btn-foreground-hover: var(--colors-content-primary); --brand-secondary-btn-border-hover: var(--colors-button-primary-hover); } /* Buick — light (Figma node 24886:413424, Buick theme) */ html[data-color-scheme='light'] body.theme-buick { --colors-content-primary: #232323; --colors-content-secondary: #707070; --colors-content-invert-primary: #fff; --colors-background-default: #f7f5f1; --colors-background-divider: #e2e0dc; --colors-button-primary: #232323; --colors-button-primary-hover: #4d4d4c; --colors-button-primary-focus: #4d4d4c; --colors-button-primary-active: #4d4d4c; --colors-button-secondary: #fff; --colors-button-secondary-hover: #e2e0dc; --colors-button-secondary-focus: #e2e0dc; --colors-button-secondary-active: #e2e0dc; --colors-tile-default: var(--colors-button-secondary); --colors-button-tertiary: #eae6e1; --colors-button-tertiary-hover: #cdcbc8; --colors-button-tertiary-focus: #cdcbc8; --colors-button-tertiary-active: #cdcbc8; --colors-link-primary: #232323; --colors-link-primary-hover: #707070; --colors-link-primary-focus: #707070; --colors-link-primary-active: #707070; --colors-link-secondary: #707070; --colors-link-secondary-hover: #383838; --colors-link-secondary-focus: #383838; --colors-link-secondary-active: #383838; --colors-border-focus: #232323; --background-color: var(--colors-background-default); --text-color: var(--colors-content-primary); --link-color: var(--colors-link-primary); --link-hover-color: var(--colors-link-primary-hover); } @media (prefers-color-scheme: light) { html:not([data-color-scheme]) body.theme-buick { --colors-content-primary: #232323; --colors-content-secondary: #707070; --colors-content-invert-primary: #fff; --colors-background-default: #f7f5f1; --colors-background-divider: #e2e0dc; --colors-button-primary: #232323; --colors-button-primary-hover: #4d4d4c; --colors-button-primary-focus: #4d4d4c; --colors-button-primary-active: #4d4d4c; --colors-button-secondary: #fff; --colors-button-secondary-hover: #e2e0dc; --colors-button-secondary-focus: #e2e0dc; --colors-button-secondary-active: #e2e0dc; --colors-tile-default: var(--colors-button-secondary); --colors-button-tertiary: #eae6e1; --colors-button-tertiary-hover: #cdcbc8; --colors-button-tertiary-focus: #cdcbc8; --colors-button-tertiary-active: #cdcbc8; --colors-link-primary: #232323; --colors-link-primary-hover: #707070; --colors-link-primary-focus: #707070; --colors-link-primary-active: #707070; --colors-link-secondary: #707070; --colors-link-secondary-hover: #383838; --colors-link-secondary-focus: #383838; --colors-link-secondary-active: #383838; --colors-border-focus: #232323; --background-color: var(--colors-background-default); --text-color: var(--colors-content-primary); --link-color: var(--colors-link-primary); --link-hover-color: var(--colors-link-primary-hover); } } /* -------------------------------------------------------------------------- */ /* Dark mode — semantic colors (Figma node 24886:413677) */ /* -------------------------------------------------------------------------- */ html[data-color-scheme='dark'] { color-scheme: dark; /* Content — primary text uses invert tokens on dark surfaces */ --colors-content-primary: #fff; --colors-content-secondary: #8e8e8e; --colors-content-invert-primary: #fff; --colors-content-invert-secondary: #8e8e8e; /* Background — default surface not in export; use dark neutral aligned to palette */ --colors-background-default: #090909; --colors-background-divider: transparent; --colors-background-invert-divider: #373737; /* Buttons (invert set) */ --colors-button-invert-primary: #fff; --colors-button-invert-primary-hover: #cecece; --colors-button-invert-primary-focus: #cecece; --colors-button-invert-primary-active: #cecece; --colors-button-invert-secondary: #090909; --colors-button-invert-secondary-hover: #373737; --colors-button-invert-secondary-focus: #373737; --colors-button-invert-secondary-active: #373737; --colors-button-invert-tertiary: #373737; --colors-button-invert-tertiary-hover: #6d6d6d; --colors-button-invert-tertiary-focus: #6d6d6d; --colors-button-invert-tertiary-active: #6d6d6d; /* Same names as light — map to invert palette for dark surfaces */ --colors-button-primary: var(--colors-button-invert-primary); --colors-button-primary-hover: var(--colors-button-invert-primary-hover); --colors-button-primary-focus: var(--colors-button-invert-primary-focus); --colors-button-primary-active: var(--colors-button-invert-primary-active); --colors-button-secondary: var(--colors-button-invert-secondary); --colors-button-secondary-hover: var(--colors-button-invert-secondary-hover); --colors-button-secondary-focus: var(--colors-button-invert-secondary-focus); --colors-button-secondary-active: var(--colors-button-invert-secondary-active); /* Tile surfaces on dark (after button secondary map) */ --colors-tile-default: var(--colors-button-secondary); --colors-button-tertiary: var(--colors-button-invert-tertiary); --colors-button-tertiary-hover: var(--colors-button-invert-tertiary-hover); --colors-button-tertiary-focus: var(--colors-button-invert-tertiary-focus); --colors-button-tertiary-active: var(--colors-button-invert-tertiary-active); /* Links (invert set) */ --colors-link-invert-primary: #fff; --colors-link-invert-primary-hover: #b4b4b4; --colors-link-invert-primary-focus: #b4b4b4; --colors-link-invert-primary-active: #b4b4b4; --colors-link-invert-secondary: #b4b4b4; --colors-link-invert-secondary-hover: #f5f5f5; --colors-link-invert-secondary-focus: #f5f5f5; --colors-link-invert-secondary-active: #f5f5f5; --colors-link-primary: var(--colors-link-invert-primary); --colors-link-primary-hover: var(--colors-link-invert-primary-hover); --colors-link-primary-focus: var(--colors-link-invert-primary-focus); --colors-link-primary-active: var(--colors-link-invert-primary-active); --colors-link-secondary: var(--colors-link-invert-secondary); --colors-link-secondary-hover: var(--colors-link-invert-secondary-hover); --colors-link-secondary-focus: var(--colors-link-invert-secondary-focus); --colors-link-secondary-active: var(--colors-link-invert-secondary-active); --colors-border-focus: transparent; --colors-border-invert-focus: #fff; --background-color: var(--colors-background-default); --text-color: var(--colors-content-primary); --link-color: var(--colors-link-primary); --link-hover-color: var(--colors-link-primary-hover); /* Legacy aliases — dark surfaces */ --light-color: var(--colors-tile-default); --dark-color: var(--colors-background-invert-divider); --brand-background-default: var(--colors-background-default); --brand-foreground-default: var(--colors-content-primary); --brand-background-primary: var(--colors-tile-default); --brand-foreground-primary: var(--colors-content-primary); --brand-background-secondary: var(--colors-button-primary); --brand-foreground-secondary: var(--colors-content-invert-primary); --brand-background-tertiary: var(--colors-button-primary); --brand-foreground-tertiary: var(--colors-content-invert-primary); --brand-background-quaternary: var(--colors-button-tertiary); --brand-foreground-quaternary: var(--colors-content-primary); --brand-main: var(--colors-link-primary); --brand-main-accent: var(--colors-link-secondary); --brand-default-black: var(--colors-content-primary); --brand-default-gray: var(--colors-content-secondary); --brand-default-gray-accent: var(--colors-background-invert-divider); --brand-dark-blue: var(--colors-button-primary); --brand-primary-gray-accent: 55 55 55; --brand-info: var(--colors-link-primary); --brand-foreground-info: var(--brand-info); --icon-primary: var(--colors-link-primary); --icon-secondary: var(--colors-link-secondary); --icon-tertiary: var(--colors-content-secondary); --icon-quaternary: var(--colors-background-invert-divider); --brand-default-btn-background: var(--colors-button-primary); --brand-default-btn-foreground: var(--colors-content-invert-primary); --brand-default-btn-border: var(--colors-button-primary); --brand-default-btn-background-hover: var(--colors-button-primary-hover); --brand-default-btn-foreground-hover: var(--colors-content-invert-primary); --brand-default-btn-border-hover: var(--colors-button-primary-hover); --brand-primary-btn-background: var(--colors-button-primary); --brand-primary-btn-foreground: var(--colors-content-invert-primary); --brand-primary-btn-border: var(--colors-button-primary); --brand-primary-btn-background-hover: var(--colors-button-primary-hover); --brand-primary-btn-foreground-hover: var(--colors-content-invert-primary); --brand-primary-btn-border-hover: var(--colors-button-primary-hover); --brand-secondary-btn-background: transparent; --brand-secondary-btn-foreground: var(--colors-content-primary); --brand-secondary-btn-border: var(--colors-button-primary); --brand-secondary-btn-background-hover: var(--colors-button-secondary-hover); --brand-secondary-btn-foreground-hover: var(--colors-content-primary); --brand-secondary-btn-border-hover: var(--colors-button-primary-hover); } /* Optional: respect OS preference when `data-color-scheme` is not set */ @media (prefers-color-scheme: dark) { :root:not([data-color-scheme='light']) { color-scheme: dark; --colors-content-primary: #fff; --colors-content-secondary: #8e8e8e; --colors-content-invert-primary: #fff; --colors-content-invert-secondary: #8e8e8e; --colors-background-default: #090909; --colors-background-divider: transparent; --colors-background-invert-divider: #373737; --colors-button-invert-primary: #fff; --colors-button-invert-primary-hover: #cecece; --colors-button-invert-primary-focus: #cecece; --colors-button-invert-primary-active: #cecece; --colors-button-invert-secondary: #090909; --colors-button-invert-secondary-hover: #373737; --colors-button-invert-secondary-focus: #373737; --colors-button-invert-secondary-active: #373737; --colors-button-invert-tertiary: #373737; --colors-button-invert-tertiary-hover: #6d6d6d; --colors-button-invert-tertiary-focus: #6d6d6d; --colors-button-invert-tertiary-active: #6d6d6d; --colors-button-primary: var(--colors-button-invert-primary); --colors-button-primary-hover: var(--colors-button-invert-primary-hover); --colors-button-primary-focus: var(--colors-button-invert-primary-focus); --colors-button-primary-active: var(--colors-button-invert-primary-active); --colors-button-secondary: var(--colors-button-invert-secondary); --colors-button-secondary-hover: var(--colors-button-invert-secondary-hover); --colors-button-secondary-focus: var(--colors-button-invert-secondary-focus); --colors-button-secondary-active: var(--colors-button-invert-secondary-active); --colors-button-tertiary: var(--colors-button-invert-tertiary); --colors-button-tertiary-hover: var(--colors-button-invert-tertiary-hover); --colors-button-tertiary-focus: var(--colors-button-invert-tertiary-focus); --colors-button-tertiary-active: var(--colors-button-invert-tertiary-active); --colors-tile-default: var(--colors-button-secondary); --colors-link-invert-primary: #fff; --colors-link-invert-primary-hover: #b4b4b4; --colors-link-invert-primary-focus: #b4b4b4; --colors-link-invert-primary-active: #b4b4b4; --colors-link-invert-secondary: #b4b4b4; --colors-link-invert-secondary-hover: #f5f5f5; --colors-link-invert-secondary-focus: #f5f5f5; --colors-link-invert-secondary-active: #f5f5f5; --colors-link-primary: var(--colors-link-invert-primary); --colors-link-primary-hover: var(--colors-link-invert-primary-hover); --colors-link-primary-focus: var(--colors-link-invert-primary-focus); --colors-link-primary-active: var(--colors-link-invert-primary-active); --colors-link-secondary: var(--colors-link-invert-secondary); --colors-link-secondary-hover: var(--colors-link-invert-secondary-hover); --colors-link-secondary-focus: var(--colors-link-invert-secondary-focus); --colors-link-secondary-active: var(--colors-link-invert-secondary-active); --colors-border-focus: transparent; --colors-border-invert-focus: #fff; --background-color: var(--colors-background-default); --text-color: var(--colors-content-primary); --link-color: var(--colors-link-primary); --link-hover-color: var(--colors-link-primary-hover); /* Legacy aliases — dark (match html[data-color-scheme='dark']) */ --light-color: var(--colors-tile-default); --dark-color: var(--colors-background-invert-divider); --brand-background-default: var(--colors-background-default); --brand-foreground-default: var(--colors-content-primary); --brand-background-primary: var(--colors-tile-default); --brand-foreground-primary: var(--colors-content-primary); --brand-background-secondary: var(--colors-button-primary); --brand-foreground-secondary: var(--colors-content-invert-primary); --brand-background-tertiary: var(--colors-button-primary); --brand-foreground-tertiary: var(--colors-content-invert-primary); --brand-background-quaternary: var(--colors-button-tertiary); --brand-foreground-quaternary: var(--colors-content-primary); --brand-main: var(--colors-link-primary); --brand-main-accent: var(--colors-link-secondary); --brand-default-black: var(--colors-content-primary); --brand-default-gray: var(--colors-content-secondary); --brand-default-gray-accent: var(--colors-background-invert-divider); --brand-dark-blue: var(--colors-button-primary); --brand-primary-gray-accent: 55 55 55; --brand-info: var(--colors-link-primary); --brand-foreground-info: var(--brand-info); --icon-primary: var(--colors-link-primary); --icon-secondary: var(--colors-link-secondary); --icon-tertiary: var(--colors-content-secondary); --icon-quaternary: var(--colors-background-invert-divider); --brand-default-btn-background: var(--colors-button-primary); --brand-default-btn-foreground: var(--colors-content-invert-primary); --brand-default-btn-border: var(--colors-button-primary); --brand-default-btn-background-hover: var(--colors-button-primary-hover); --brand-default-btn-foreground-hover: var(--colors-content-invert-primary); --brand-default-btn-border-hover: var(--colors-button-primary-hover); --brand-primary-btn-background: var(--colors-button-primary); --brand-primary-btn-foreground: var(--colors-content-invert-primary); --brand-primary-btn-border: var(--colors-button-primary); --brand-primary-btn-background-hover: var(--colors-button-primary-hover); --brand-primary-btn-foreground-hover: var(--colors-content-invert-primary); --brand-primary-btn-border-hover: var(--colors-button-primary-hover); --brand-secondary-btn-background: transparent; --brand-secondary-btn-foreground: var(--colors-content-primary); --brand-secondary-btn-border: var(--colors-button-primary); --brand-secondary-btn-background-hover: var(--colors-button-secondary-hover); --brand-secondary-btn-foreground-hover: var(--colors-content-primary); --brand-secondary-btn-border-hover: var(--colors-button-primary-hover); } } /* Buick — dark (Figma node 24886:413677, Buick theme) */ html[data-color-scheme='dark'] body.theme-buick { --colors-content-primary: #fff; --colors-content-secondary: #8e8e8e; --colors-content-invert-primary: #fff; --colors-content-invert-secondary: #8e8e8e; --colors-background-default: #000; --colors-background-divider: transparent; --colors-background-invert-divider: #383838; --colors-button-invert-primary: #fff; --colors-button-invert-primary-hover: #cdcbc8; --colors-button-invert-primary-focus: #cdcbc8; --colors-button-invert-primary-active: #cdcbc8; --colors-button-invert-secondary: #000; --colors-button-invert-secondary-hover: #383838; --colors-button-invert-secondary-focus: #383838; --colors-button-invert-secondary-active: #383838; --colors-button-invert-tertiary: #383838; --colors-button-invert-tertiary-hover: #707070; --colors-button-invert-tertiary-focus: #707070; --colors-button-invert-tertiary-active: #707070; --colors-button-primary: var(--colors-button-invert-primary); --colors-button-primary-hover: var(--colors-button-invert-primary-hover); --colors-button-primary-focus: var(--colors-button-invert-primary-focus); --colors-button-primary-active: var(--colors-button-invert-primary-active); --colors-button-secondary: var(--colors-button-invert-secondary); --colors-button-secondary-hover: var(--colors-button-invert-secondary-hover); --colors-button-secondary-focus: var(--colors-button-invert-secondary-focus); --colors-button-secondary-active: var(--colors-button-invert-secondary-active); --colors-tile-default: var(--colors-button-secondary); --colors-button-tertiary: var(--colors-button-invert-tertiary); --colors-button-tertiary-hover: var(--colors-button-invert-tertiary-hover); --colors-button-tertiary-focus: var(--colors-button-invert-tertiary-focus); --colors-button-tertiary-active: var(--colors-button-invert-tertiary-active); --colors-link-invert-primary: #fff; --colors-link-invert-primary-hover: #a2a19f; --colors-link-invert-primary-focus: #a2a19f; --colors-link-invert-primary-active: #a2a19f; --colors-link-invert-secondary: #a2a19f; --colors-link-invert-secondary-hover: #fff; --colors-link-invert-secondary-focus: #fff; --colors-link-invert-secondary-active: #fff; --colors-link-primary: var(--colors-link-invert-primary); --colors-link-primary-hover: var(--colors-link-invert-primary-hover); --colors-link-primary-focus: var(--colors-link-invert-primary-focus); --colors-link-primary-active: var(--colors-link-invert-primary-active); --colors-link-secondary: var(--colors-link-invert-secondary); --colors-link-secondary-hover: var(--colors-link-invert-secondary-hover); --colors-link-secondary-focus: var(--colors-link-invert-secondary-focus); --colors-link-secondary-active: var(--colors-link-invert-secondary-active); --colors-border-focus: transparent; --colors-border-invert-focus: #fff; --background-color: var(--colors-background-default); --text-color: var(--colors-content-primary); --link-color: var(--colors-link-primary); --link-hover-color: var(--colors-link-primary-hover); } @media (prefers-color-scheme: dark) { html:not([data-color-scheme='light']) body.theme-buick { --colors-content-primary: #fff; --colors-content-secondary: #8e8e8e; --colors-content-invert-primary: #fff; --colors-content-invert-secondary: #8e8e8e; --colors-background-default: #000; --colors-background-divider: transparent; --colors-background-invert-divider: #383838; --colors-button-invert-primary: #fff; --colors-button-invert-primary-hover: #cdcbc8; --colors-button-invert-primary-focus: #cdcbc8; --colors-button-invert-primary-active: #cdcbc8; --colors-button-invert-secondary: #000; --colors-button-invert-secondary-hover: #383838; --colors-button-invert-secondary-focus: #383838; --colors-button-invert-secondary-active: #383838; --colors-button-invert-tertiary: #383838; --colors-button-invert-tertiary-hover: #707070; --colors-button-invert-tertiary-focus: #707070; --colors-button-invert-tertiary-active: #707070; --colors-button-primary: var(--colors-button-invert-primary); --colors-button-primary-hover: var(--colors-button-invert-primary-hover); --colors-button-primary-focus: var(--colors-button-invert-primary-focus); --colors-button-primary-active: var(--colors-button-invert-primary-active); --colors-button-secondary: var(--colors-button-invert-secondary); --colors-button-secondary-hover: var(--colors-button-invert-secondary-hover); --colors-button-secondary-focus: var(--colors-button-invert-secondary-focus); --colors-button-secondary-active: var(--colors-button-invert-secondary-active); --colors-tile-default: var(--colors-button-secondary); --colors-button-tertiary: var(--colors-button-invert-tertiary); --colors-button-tertiary-hover: var(--colors-button-invert-tertiary-hover); --colors-button-tertiary-focus: var(--colors-button-invert-tertiary-focus); --colors-button-tertiary-active: var(--colors-button-invert-tertiary-active); --colors-link-invert-primary: #fff; --colors-link-invert-primary-hover: #a2a19f; --colors-link-invert-primary-focus: #a2a19f; --colors-link-invert-primary-active: #a2a19f; --colors-link-invert-secondary: #a2a19f; --colors-link-invert-secondary-hover: #fff; --colors-link-invert-secondary-focus: #fff; --colors-link-invert-secondary-active: #fff; --colors-link-primary: var(--colors-link-invert-primary); --colors-link-primary-hover: var(--colors-link-invert-primary-hover); --colors-link-primary-focus: var(--colors-link-invert-primary-focus); --colors-link-primary-active: var(--colors-link-invert-primary-active); --colors-link-secondary: var(--colors-link-invert-secondary); --colors-link-secondary-hover: var(--colors-link-invert-secondary-hover); --colors-link-secondary-focus: var(--colors-link-invert-secondary-focus); --colors-link-secondary-active: var(--colors-link-invert-secondary-active); --colors-border-focus: transparent; --colors-border-invert-focus: #fff; --background-color: var(--colors-background-default); --text-color: var(--colors-content-primary); --link-color: var(--colors-link-primary); --link-hover-color: var(--colors-link-primary-hover); } } /* -------------------------------------------------------------------------- */ /* Global layout + editorial type scale (consumed by styles/styles.css) */ /* -------------------------------------------------------------------------- */ body { /* Layout (not in Figma primitives) */ --header-max-width: 1440px; --header-nav-justify-content: space-between; --header-padding: var(--spacing-16) var(--spacing-32); --header-nav-drop-width: 100%; --header-nav-drop-left: 75px; --header-nav-drop-align-items: center; --nav-height: 100px; /* Legacy heading scale — fluid clamp; uses display/paragraph families above */ --heading-font-size-xxxl: clamp(2.25rem, 5vw, 3.75rem); --heading-font-size-xxl: clamp(1.75rem, 4vw, 2.5rem); --heading-font-size-xl: clamp(1.5rem, 3.5vw, 2.25rem); --heading-font-size-l: clamp(1.35rem, 3vw, 1.6375rem); --heading-font-size-m: clamp(1.25rem, 2.5vw, 1.5rem); --heading-font-size-s: clamp(1.15rem, 2vw, 1.3rem); --heading-font-size-xs: clamp(1.05rem, 2vw, 1.2rem); /* Body copy scale */ --body-font-size-xxxs: 0.5rem; --body-font-size-xxs: 0.75rem; --body-font-size-xs: 0.875rem; --body-font-size-s: var(--type-font-size-label-1); --body-font-size-m: 1.375rem; --body-font-size-l: 2rem; --body-font-size-xl: 3rem; --body-font-size-xxl: 4rem; --body-font-size-xxxl: 5rem; --body-font-size-xxxxl: 8rem; --body-news: var(--type-font-size-paragraph-1); } /* * Chevrolet + GM News (und) — same pattern as Buick above: * explicit html[data-color-scheme] + prefers-color-scheme OS fallback. */ /* Chevrolet — light */ html[data-color-scheme='light'] body.theme-chevrolet, html[data-color-scheme='light'] .theme-chevrolet { --colors-button-primary: #f4bc00; --colors-button-primary-hover: #dda203; --colors-button-primary-focus: #dda203; --colors-button-primary-active: #dda203; --colors-content-primary: #323334; --colors-content-secondary: #707070; --colors-content-invert-primary: #fff; --colors-link-primary: #323334; --colors-link-primary-hover: #505050; --colors-link-primary-focus: #505050; --colors-link-primary-active: #505050; --colors-background-default: #fff; --colors-tile-default: #f5f5f5; --colors-chevrolet-button-label: #323334; --background-color: var(--colors-background-default); --text-color: var(--colors-content-primary); --link-color: var(--colors-link-primary); --link-hover-color: var(--colors-link-primary-hover); } @media (prefers-color-scheme: light) { html:not([data-color-scheme]) body.theme-chevrolet, html:not([data-color-scheme]) .theme-chevrolet { --colors-button-primary: #f4bc00; --colors-button-primary-hover: #dda203; --colors-button-primary-focus: #dda203; --colors-button-primary-active: #dda203; --colors-content-primary: #323334; --colors-content-secondary: #707070; --colors-content-invert-primary: #fff; --colors-link-primary: #323334; --colors-link-primary-hover: #505050; --colors-link-primary-focus: #505050; --colors-link-primary-active: #505050; --colors-background-default: #fff; --colors-tile-default: #f5f5f5; --colors-chevrolet-button-label: #323334; --background-color: var(--colors-background-default); --text-color: var(--colors-content-primary); --link-color: var(--colors-link-primary); --link-hover-color: var(--colors-link-primary-hover); } } /* Chevrolet — dark */ html[data-color-scheme='dark'] body.theme-chevrolet, html[data-color-scheme='dark'] .theme-chevrolet { --colors-button-primary: #f4bc00; --colors-button-primary-hover: #dda203; --colors-button-primary-focus: #dda203; --colors-button-primary-active: #dda203; --colors-content-primary: #fff; --colors-content-secondary: #8e8e8e; --colors-content-invert-primary: #fff; --colors-link-primary: #fff; --colors-link-primary-hover: #f5d77a; --colors-link-primary-focus: #f5d77a; --colors-link-primary-active: #dda203; --colors-background-default: #090909; --colors-tile-default: #1a1a1a; --colors-chevrolet-button-label: #323334; --background-color: var(--colors-background-default); --text-color: var(--colors-content-primary); --link-color: var(--colors-link-primary); --link-hover-color: var(--colors-link-primary-hover); } @media (prefers-color-scheme: dark) { html:not([data-color-scheme='light']) body.theme-chevrolet, html:not([data-color-scheme='light']) .theme-chevrolet { --colors-button-primary: #f4bc00; --colors-button-primary-hover: #dda203; --colors-button-primary-focus: #dda203; --colors-button-primary-active: #dda203; --colors-content-primary: #fff; --colors-content-secondary: #8e8e8e; --colors-content-invert-primary: #fff; --colors-link-primary: #fff; --colors-link-primary-hover: #f5d77a; --colors-link-primary-focus: #f5d77a; --colors-link-primary-active: #dda203; --colors-background-default: #090909; --colors-tile-default: #1a1a1a; --colors-chevrolet-button-label: #323334; --background-color: var(--colors-background-default); --text-color: var(--colors-content-primary); --link-color: var(--colors-link-primary); --link-hover-color: var(--colors-link-primary-hover); } } /* GM News (und) — light */ html[data-color-scheme='light'] body.theme-gm-und, html[data-color-scheme='light'] .theme-gm-und { --colors-button-primary: #0072ce; --colors-button-primary-hover: #005eb8; --colors-button-primary-focus: #005eb8; --colors-button-primary-active: #005eb8; --colors-content-primary: #090909; --colors-content-secondary: #6d6d6d; --colors-content-invert-primary: #fff; --colors-link-primary: #090909; --colors-link-primary-hover: #6d6d6d; --colors-link-primary-focus: #6d6d6d; --colors-link-primary-active: #6d6d6d; --colors-background-default: #fff; --colors-tile-default: #f5f5f5; --background-color: var(--colors-background-default); --text-color: var(--colors-content-primary); --link-color: var(--colors-link-primary); --link-hover-color: var(--colors-link-primary-hover); } @media (prefers-color-scheme: light) { html:not([data-color-scheme]) body.theme-gm-und, html:not([data-color-scheme]) .theme-gm-und { --colors-button-primary: #0072ce; --colors-button-primary-hover: #005eb8; --colors-button-primary-focus: #005eb8; --colors-button-primary-active: #005eb8; --colors-content-primary: #090909; --colors-content-secondary: #6d6d6d; --colors-content-invert-primary: #fff; --colors-link-primary: #090909; --colors-link-primary-hover: #6d6d6d; --colors-link-primary-focus: #6d6d6d; --colors-link-primary-active: #6d6d6d; --colors-background-default: #fff; --colors-tile-default: #f5f5f5; --background-color: var(--colors-background-default); --text-color: var(--colors-content-primary); --link-color: var(--colors-link-primary); --link-hover-color: var(--colors-link-primary-hover); } } /* GM News (und) — dark */ html[data-color-scheme='dark'] body.theme-gm-und, html[data-color-scheme='dark'] .theme-gm-und { --colors-button-primary: #4da3ff; --colors-button-primary-hover: #3390f0; --colors-button-primary-focus: #3390f0; --colors-button-primary-active: #1a7ddb; --colors-content-primary: #fff; --colors-content-secondary: #8e8e8e; --colors-content-invert-primary: #fff; --colors-link-primary: #fff; --colors-link-primary-hover: #b4b4b4; --colors-link-primary-focus: #b4b4b4; --colors-link-primary-active: #b4b4b4; --colors-background-default: #090909; --colors-tile-default: #1a1a1a; --background-color: var(--colors-background-default); --text-color: var(--colors-content-primary); --link-color: var(--colors-link-primary); --link-hover-color: var(--colors-link-primary-hover); } @media (prefers-color-scheme: dark) { html:not([data-color-scheme='light']) body.theme-gm-und, html:not([data-color-scheme='light']) .theme-gm-und { --colors-button-primary: #4da3ff; --colors-button-primary-hover: #3390f0; --colors-button-primary-focus: #3390f0; --colors-button-primary-active: #1a7ddb; --colors-content-primary: #fff; --colors-content-secondary: #8e8e8e; --colors-content-invert-primary: #fff; --colors-link-primary: #fff; --colors-link-primary-hover: #b4b4b4; --colors-link-primary-focus: #b4b4b4; --colors-link-primary-active: #b4b4b4; --colors-background-default: #090909; --colors-tile-default: #1a1a1a; --background-color: var(--colors-background-default); --text-color: var(--colors-content-primary); --link-color: var(--colors-link-primary); --link-hover-color: var(--colors-link-primary-hover); } } /* Explicit light wins over OS dark */ html[data-color-scheme='light'] { color-scheme: light; } }