/* CarChief design tokens.
   Each value reads the matching WordPress preset first (generated from theme.json),
   then falls back to the literal, so this file works in the static mockup and in WP. */
:root {
  /* Brand (from the CarChief brand guide) */
  --cc-navy: var(--wp--preset--color--navy, #283784);
  --cc-navy-deep: var(--wp--preset--color--navy-deep, #1B2660);
  --cc-gold: var(--wp--preset--color--gold, #A98743);
  --cc-cream: var(--wp--preset--color--cream, #EEEBD3);
  --cc-chief-black: var(--wp--preset--color--chief-black, #0F1108);
  --cc-teal: var(--wp--preset--color--teal, #05A8AA);

  /* Semantic: light theme */
  --cc-paper: var(--wp--preset--color--paper, #F7F5EC);
  --cc-surface: var(--wp--preset--color--surface, #FFFFFF);
  --cc-surface-cream: var(--cc-cream);
  --cc-night: #0F1108;            /* always-dark band (lot map, footer) */
  --cc-night-raised: #1A1E14;
  --cc-night-line: #2C3226;
  --cc-night-text: #EEEBD3;
  --cc-night-muted: #A8AB9F;
  --cc-ink: #0F1108;
  --cc-ink-muted: #4B4E45;
  --cc-hairline: #DCD9C4;
  --cc-control-border: #8A8C80;
  --cc-navy-tint: #E4E7F4;
  --cc-gold-ink: #7A6130;
  --cc-teal-ink: #047A7C;
  --cc-primary: var(--cc-navy);
  --cc-primary-hover: var(--cc-navy-deep);
  --cc-on-primary: #FFFFFF;
  --cc-link: var(--cc-navy);
  --cc-focus: var(--cc-teal-ink);
  --cc-heading-accent: var(--cc-navy);

  --cc-ok: #1E7A45;   --cc-ok-tint: #E6F2EA;
  --cc-due: #E8A317;  --cc-due-ink: #8A5A00; --cc-due-tint: #FDF3DC;
  --cc-fault: #B3261E; --cc-fault-tint: #FBE9E7;
  /* status colors as drawn on the always-dark lot map */
  --cc-map-ok: #3DBA6E; --cc-map-due: #F2B630; --cc-map-fault: #F07167;

  --cc-shadow-card: 0 1px 2px rgba(15,17,8,.06), 0 8px 24px rgba(15,17,8,.07);
  --cc-shadow-pop: 0 18px 50px rgba(15,17,8,.28);

  /* Type */
  --cc-font-display: var(--wp--preset--font-family--display, "Neutro", "Archivo", "Arial Black", sans-serif);
  --cc-font-sans: var(--wp--preset--font-family--sans, "Public Sans", "Helvetica Neue", Arial, sans-serif);
  --cc-font-mono: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, Menlo, monospace);
  --cc-display-stretch: 118%;

  /* Space, radius, layout */
  --cc-space-1: 4px; --cc-space-2: 8px; --cc-space-3: 12px; --cc-space-4: 16px;
  --cc-space-5: 24px; --cc-space-6: 32px; --cc-space-7: 48px; --cc-space-8: 64px; --cc-space-9: 96px;
  --cc-radius-sm: 4px; --cc-radius-md: 8px; --cc-radius-lg: 16px; --cc-radius-pill: 999px;
  --cc-content-max: 1200px;
  --cc-text-max: 64ch;
  --cc-header-height: 72px;
  --cc-target-min: 44px;
  --cc-gutter: clamp(16px, 4vw, 32px);
  --cc-section-pad: clamp(64px, 9vw, 112px);

  color-scheme: light;
}

/* Night Lot (dark) theme: follows the OS setting unless the page forces light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cc-paper: #0F1108; --cc-surface: #161A10; --cc-surface-cream: #1E2318;
    --cc-night: #0A0B06; --cc-night-raised: #161A10;
    --cc-ink: #EEEBD3; --cc-ink-muted: #A8AB9F; --cc-hairline: #2C3226; --cc-control-border: #7A7F71;
    --cc-navy-tint: #1D2347; --cc-gold-ink: #C9A961; --cc-teal-ink: #05A8AA;
    --cc-primary: #05A8AA; --cc-primary-hover: #3CC3C5; --cc-on-primary: #0F1108;
    --cc-link: #8E9BE8; --cc-focus: #05A8AA; --cc-heading-accent: #8E9BE8;
    --cc-ok: #3DBA6E; --cc-ok-tint: #15301F; --cc-due: #F2B630; --cc-due-ink: #F2B630; --cc-due-tint: #33270B;
    --cc-fault: #F07167; --cc-fault-tint: #3A1714;
    --cc-shadow-card: 0 1px 2px rgba(0,0,0,.5); --cc-shadow-pop: 0 18px 50px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --cc-paper: #0F1108; --cc-surface: #161A10; --cc-surface-cream: #1E2318;
  --cc-night: #0A0B06; --cc-night-raised: #161A10;
  --cc-ink: #EEEBD3; --cc-ink-muted: #A8AB9F; --cc-hairline: #2C3226; --cc-control-border: #7A7F71;
  --cc-navy-tint: #1D2347; --cc-gold-ink: #C9A961; --cc-teal-ink: #05A8AA;
  --cc-primary: #05A8AA; --cc-primary-hover: #3CC3C5; --cc-on-primary: #0F1108;
  --cc-link: #8E9BE8; --cc-focus: #05A8AA; --cc-heading-accent: #8E9BE8;
  --cc-ok: #3DBA6E; --cc-ok-tint: #15301F; --cc-due: #F2B630; --cc-due-ink: #F2B630; --cc-due-tint: #33270B;
  --cc-fault: #F07167; --cc-fault-tint: #3A1714;
  --cc-shadow-card: 0 1px 2px rgba(0,0,0,.5); --cc-shadow-pop: 0 18px 50px rgba(0,0,0,.6);
  color-scheme: dark;
}