/*
  Atlanta Metro Airflow, design tokens.
  Single source of truth for color, type scale, spacing, radius, motion, shadow.
  Two-tier system (D-01): primitive tokens, then semantic tokens that components consume.
  Every text-on-background semantic pairing has a verified WCAG AA contrast comment above it (D-04).

  v2.2 rebrand: palette pivoted to match the official logo lockup.
  The logo's flame-M wordmark sets the primary palette:
    navy (#182A6C), flame orange (#FF7B3E), flame yellow (#FFDF6B),
    ice blue (#CFF2FF), and red accent (#FF4040).
  Token names are stable (still --clay etc.) so we don't churn 2400 lines
  of main.css; the VALUES point at the new flame palette. New tokens are
  appended (--navy, --flame, --flame-light, --ice, --accent-soft-red) for
  components that want to reference the brand colors by their proper name.
*/

@layer tokens {
  :root {
    color-scheme: light;

    /* ---------- COLOR PRIMITIVES ---------- */

    /* Logo-derived brand palette (v2.2 lockup).
       Hex anchors next to each oklch for reference; oklch is what ships. */
    --logo-navy:  oklch(28% 0.13 268);       /* #182A6C, wordmark, primary text */
    --logo-flame: oklch(72% 0.18 47);        /* #FF7B3E, flame-M, primary accent */
    --logo-yellow: oklch(89% 0.14 90);       /* #FFDF6B, flame core highlight */
    --logo-red:   oklch(63% 0.24 25);        /* #FF4040, snowman tongue, urgency */
    --logo-ice:   oklch(94% 0.04 220);       /* #CFF2FF, snowman body, surface */

    /* Backwards-compat brand tokens (names locked, values pivoted to flame palette) */
    --clay:  var(--logo-flame);              /* primary warm accent (was clay red, now flame orange) */
    --water: oklch(72% 0.06 230);            /* Soft Water, accent. Decorative only, never carries text. */
    --cream: oklch(96% 0.008 60);            /* Warm Cream, primary surface. */
    --ink:   var(--logo-navy);               /* Primary text, now logo navy. Reads premium against cream and ice-blue cloud-sky. */

    /* Convenience aliases, prefer these in new component CSS */
    --navy:  var(--logo-navy);
    --flame: var(--logo-flame);
    --flame-light: var(--logo-yellow);
    --ice:   var(--logo-ice);

    /* Derived neutrals (cool-tinted now since ink is navy) */
    --linen: oklch(91% 0.012 60);            /* Linen, tinted section surface. */
    --stone: oklch(82% 0.012 60);            /* Stone, divider / quiet surface. */
    --muted: oklch(42% 0.04 260);            /* Muted text (navy-tinted, was warm-brown), paired with cream. */

    /* Flame variants (replaces clay-button family). cream-on-flame fails AA at body
       weight; --clay-button is the darker flame that holds cream text safely. */
    --clay-button: oklch(52% 0.18 47);       /* Darker flame for buttons that hold cream text. ~hex #C2562A. */
    --clay-hover: color-mix(in oklch, var(--clay-button) 88%, var(--ink) 12%);
    --clay-tint:  color-mix(in oklch, var(--clay) 10%, var(--cream));

    /* v2.2: soft-red accent for service-area city hovers. Coral-light, not flame-orange,
       so the city hover state reads differently from primary buttons. */
    --accent-soft-red: oklch(74% 0.14 22);

    /* ---------- SEMANTIC COLOR TOKENS ---------- */
    /* Surfaces */
    --surface: var(--cream);
    --surface-warm: color-mix(in oklch, var(--cream) 92%, var(--flame) 8%);
    --surface-tinted: var(--linen);
    --surface-clay: var(--clay-button);
    --surface-ice: var(--ice);

    /* Text pairings (each with verified contrast comment) */

    /* navy-on-cream: ~9.5:1 (AAA at body), navy is oklch(28%) and cream is oklch(96%). */
    --text-primary: var(--ink);

    /* muted-on-cream: ~6.5:1 (AAA at body), cool-tinted muted. */
    --text-muted: var(--muted);

    /* cream-on-flame-button: ~4.7:1 (AA at body), --clay-button is oklch(52%). */
    --text-on-clay: var(--cream);

    /* flame-on-cream: ~3.2:1 (FAILS AA at body, AA at 24px+). Use ONLY for h2+ headings
       and large CTA pill labels. Do NOT use for body copy; for body emphasis use --ink. */
    --text-accent: var(--clay);

    /* soft-water-on-cream: 1.9:1 (FAILS AA). Decorative only, never text. */
    --accent-decorative: var(--water);

    /* Borders, do not carry text */
    --border-subtle: color-mix(in oklch, var(--ink) 12%, transparent);
    --border-strong: color-mix(in oklch, var(--ink) 24%, transparent);

    /* ---------- TYPE FAMILIES ---------- */
    /* v3.0: Bricolage Grotesque replaces Inter Tight as the display face.
       Characterful grotesque with optical sizing; reads confident and warm
       at headline scale, which suits a mascot-led trade brand far better
       than a neutral geometric. Inter Tight stays in the stack as fallback
       (no longer loaded). Inter remains the body face. */
    --font-display: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* v3.0: seasonal accent. season.js sets html[data-season] pre-paint;
       the badge dot and small seasonal accents key off this token. Cooling
       season sells cold air (ice), heating season sells warmth (flame),
       shoulder is the neutral sage of "maintenance weather". */
    --season-accent: var(--flame);

    /* ---------- TYPE SCALE (D-03) ---------- */
    /* Fluid display, h1, h2; fixed h3 and below. Body floor is 18px (1.125rem) per spec, never scales below. */
    --type-display: clamp(4.5rem, 8vw, 6rem);
    --type-h1: clamp(3rem, 5vw, 4rem);
    --type-h2: clamp(2rem, 4vw, 3rem);
    --type-h3: 1.5rem;          /* 24px */
    --type-h4: 1.25rem;         /* 20px */
    --type-body: 1.125rem;      /* 18px, body floor */
    --type-caption: 0.9375rem;  /* 15px */
    --type-micro: 0.8125rem;    /* 13px, ATLANTA tracked label only */

    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.55;
    --leading-loose: 1.7;

    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide: 0.08em;
    --tracking-widest: 0.24em;  /* ATLANTA label */

    /* ---------- SPACING SCALE ---------- */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: 2rem;      /* 32px */
    --space-7: 3rem;      /* 48px */
    --space-8: 4rem;      /* 64px */
    --space-9: 6rem;      /* 96px */
    --space-10: 8rem;     /* 128px */

    /* ---------- RADIUS ---------- */
    --radius-sm: 8px;
    --radius-card: 24px;        /* Service cards, brand tiles */
    --radius-section: 32px;     /* Section containers */
    --radius-section-lg: 48px;
    --radius-pill: 9999px;      /* All pill buttons and pill nav */

    /* ---------- SHADOWS (warm-tinted, never pure black) ---------- */
    --shadow-sm: 0 1px 2px color-mix(in oklch, var(--ink) 8%, transparent);
    --shadow-md: 0 4px 16px color-mix(in oklch, var(--ink) 12%, transparent);
    --shadow-lg: 0 12px 40px color-mix(in oklch, var(--ink) 16%, transparent);

    /* ---------- MOTION ---------- */
    --motion-fast: 120ms;
    --motion-base: 200ms;
    --motion-slow: 320ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- LAYOUT ---------- */
    --content-max: 1200px;
    --content-narrow: 720px;
    --tap-target-min: 44px;     /* WCAG AA minimum tap target */
    --nav-height: 84px;         /* Floating pill nav effective offset (pill height ~60px + top offset 12px + 12px buffer), used by scroll-padding-top and section scroll-margin-top. Refined in Phase 2 plan 01. */
  }

  /* v2.7: the mobile header is shorter (compact wordmark plate plus a
     tighter right-anchored pill, see the mobile header block at the
     bottom of main.css), so the anchor-scroll offset shrinks to match.
     Everything that consumes --nav-height (scroll-padding-top, section
     scroll-margin-top, hero padding-top) adjusts automatically. */
  @media (max-width: 1023px) {
    :root { --nav-height: 68px; }
  }

  /* v3.0: per-season accent values. Set pre-paint by season.js. */
  html[data-season="cooling"]  { --season-accent: oklch(70% 0.11 230); }
  html[data-season="heating"]  { --season-accent: var(--flame); }
  html[data-season="shoulder"] { --season-accent: oklch(62% 0.09 150); }
}