/* VOYT AVTO design tokens (Hallmark custom theme). Two palettes: dk (brand, default) and lt (light theme).
   :root maps --color-* to one palette; .band--light maps to the opposite; [data-theme="light"] flips both. */
:root {
  /* palette: dark graphite + signal amber */
  --dk-paper: oklch(15% 0.012 250); --dk-paper-2: oklch(19% 0.014 250); --dk-paper-3: oklch(24% 0.014 250);
  --dk-ink: oklch(95% 0.008 250); --dk-ink-2: oklch(80% 0.010 250); --dk-muted: oklch(64% 0.012 250);
  --dk-rule: oklch(30% 0.012 250); --dk-rule-2: oklch(25% 0.012 250);
  --dk-accent: oklch(80% 0.17 75); --dk-accent-deep: oklch(72% 0.165 70); --dk-accent-ink: oklch(18% 0.03 70); --dk-accent-text: oklch(80% 0.17 75); --dk-accent-soft: oklch(80% 0.17 75 / 0.12);
  --dk-focus: oklch(84% 0.20 75); --dk-ok: oklch(76% 0.14 150); --dk-err: oklch(72% 0.17 25);
  --dk-scrim: oklch(10% 0.01 250 / 0.6); --dk-glass: oklch(15% 0.012 250 / 0.72); --dk-glass-2: oklch(16% 0.012 250 / 0.88);
  --dk-hairline: oklch(100% 0 0 / 0.08); --dk-hairline-2: oklch(100% 0 0 / 0.16); --dk-highlight: oklch(100% 0 0 / 0.05);
  --dk-shadow: oklch(5% 0.01 250 / 0.85); --dk-scheme: dark;
  /* palette: warm paper + deep amber */
  --lt-paper: oklch(96.5% 0.008 80); --lt-paper-2: oklch(93% 0.010 80); --lt-paper-3: oklch(89% 0.012 80);
  --lt-ink: oklch(18% 0.012 250); --lt-ink-2: oklch(36% 0.012 250); --lt-muted: oklch(48% 0.012 250);
  --lt-rule: oklch(84% 0.010 80); --lt-rule-2: oklch(89% 0.010 80);
  --lt-accent: oklch(80% 0.17 75); --lt-accent-deep: oklch(72% 0.165 70); --lt-accent-ink: oklch(18% 0.03 70); --lt-accent-text: oklch(56% 0.16 62); --lt-accent-soft: oklch(80% 0.17 75 / 0.22);
  --lt-focus: oklch(60% 0.20 70); --lt-ok: oklch(52% 0.15 150); --lt-err: oklch(52% 0.19 25);
  --lt-scrim: oklch(20% 0.01 250 / 0.45); --lt-glass: oklch(96.5% 0.008 80 / 0.72); --lt-glass-2: oklch(97% 0.008 80 / 0.9);
  --lt-hairline: oklch(0% 0 0 / 0.09); --lt-hairline-2: oklch(0% 0 0 / 0.18); --lt-highlight: oklch(100% 0 0 / 0.8);
  --lt-shadow: oklch(20% 0.01 250 / 0.22); --lt-scheme: light;

  /* always-dark set for photo bands and figcaptions */
  --photo-scrim: oklch(12% 0.012 250 / 0.78); --photo-overlay-a: oklch(12% 0.012 250 / .96); --photo-overlay-b: oklch(12% 0.012 250 / .55);

  --font-display: 'Sofia Sans Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --font-body: 'Golos Text', 'Segoe UI', system-ui, sans-serif;

  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1.0625rem; --text-md: 1.25rem; --text-lg: 1.5rem; --text-xl: 2rem;
  --text-2xl: clamp(2rem, 2.4vw + 1rem, 3.25rem); --text-display: clamp(2.75rem, 5.2vw + 1rem, 5.25rem); --text-mast: clamp(3rem, 9vw, 8rem);

  --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem;
  --gutter: clamp(1rem, 4vw, 2.5rem); --page-max: 80rem; --bar-h: 4.5rem; --mobile-bar-h: 4rem;
  --radius: 0.5rem; --radius-lg: 1.25rem; --rule: 1px solid var(--color-rule);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500;
}

/* base mapping: dark theme (default) */
:root, [data-theme="light"] .band--light, .band--photo {
  --color-paper: var(--dk-paper); --color-paper-2: var(--dk-paper-2); --color-paper-3: var(--dk-paper-3);
  --color-ink: var(--dk-ink); --color-ink-2: var(--dk-ink-2); --color-muted: var(--dk-muted);
  --color-rule: var(--dk-rule); --color-rule-2: var(--dk-rule-2);
  --color-accent: var(--dk-accent); --color-accent-deep: var(--dk-accent-deep); --color-accent-ink: var(--dk-accent-ink); --color-accent-text: var(--dk-accent-text); --color-accent-soft: var(--dk-accent-soft);
  --color-focus: var(--dk-focus); --color-ok: var(--dk-ok); --color-err: var(--dk-err);
  --color-scrim: var(--dk-scrim); --color-glass: var(--dk-glass); --color-glass-2: var(--dk-glass-2);
  --color-hairline: var(--dk-hairline); --color-hairline-2: var(--dk-hairline-2); --color-highlight: var(--dk-highlight); --color-shadow: var(--dk-shadow);
  --scheme: var(--dk-scheme);
}
/* inverse band in dark theme = light; whole page in light theme */
.band--light, [data-theme="light"] {
  --color-paper: var(--lt-paper); --color-paper-2: var(--lt-paper-2); --color-paper-3: var(--lt-paper-3);
  --color-ink: var(--lt-ink); --color-ink-2: var(--lt-ink-2); --color-muted: var(--lt-muted);
  --color-rule: var(--lt-rule); --color-rule-2: var(--lt-rule-2);
  --color-accent: var(--lt-accent); --color-accent-deep: var(--lt-accent-deep); --color-accent-ink: var(--lt-accent-ink); --color-accent-text: var(--lt-accent-text); --color-accent-soft: var(--lt-accent-soft);
  --color-focus: var(--lt-focus); --color-ok: var(--lt-ok); --color-err: var(--lt-err);
  --color-scrim: var(--lt-scrim); --color-glass: var(--lt-glass); --color-glass-2: var(--lt-glass-2);
  --color-hairline: var(--lt-hairline); --color-hairline-2: var(--lt-hairline-2); --color-highlight: var(--lt-highlight); --color-shadow: var(--lt-shadow);
  --scheme: var(--lt-scheme);
}
/* light theme: the inverse band goes dark */
[data-theme="light"] .band--light {
  --color-paper: var(--dk-paper); --color-paper-2: var(--dk-paper-2); --color-paper-3: var(--dk-paper-3);
  --color-ink: var(--dk-ink); --color-ink-2: var(--dk-ink-2); --color-muted: var(--dk-muted);
  --color-rule: var(--dk-rule); --color-rule-2: var(--dk-rule-2);
  --color-accent: var(--dk-accent); --color-accent-deep: var(--dk-accent-deep); --color-accent-ink: var(--dk-accent-ink); --color-accent-text: var(--dk-accent-text); --color-accent-soft: var(--dk-accent-soft);
  --color-focus: var(--dk-focus); --color-ok: var(--dk-ok); --color-err: var(--dk-err);
  --color-hairline: var(--dk-hairline); --color-hairline-2: var(--dk-hairline-2); --color-highlight: var(--dk-highlight); --color-shadow: var(--dk-shadow);
  --scheme: var(--dk-scheme);
}