/* ============================================================
   WILDSTRIDE — TOKENS  ·  "Blue Hour"
   Two layers of colour:
     · RAW palette  — aliases onto the theme.json presets, so a
       style variation (or child theme) that swaps the palette
       re-skins every component automatically
     · SEMANTIC     — role tokens that flip per light/dark theme
   Components (skin.css + plugin blocks) only ever reference
   SEMANTIC tokens (+ raw accents).
   ============================================================ */

/* ---------- 1a. RAW PALETTE (from theme.json presets) ------ */
:root{
  --night:var(--wp--preset--color--night,#16263B);
  --ink:var(--wp--preset--color--ink,#0F1B29);
  --dusk:var(--wp--preset--color--dusk,#274863);
  --warm:var(--wp--preset--color--warm,#FDF4E7);
  --paper:var(--wp--preset--color--paper,#F4ECDE);
  --sun:var(--wp--preset--color--sun,#F6A93B);
  --coral:var(--wp--preset--color--coral,#E4572E);
  --coral-deep:var(--wp--preset--color--coral-deep,#C43D12);
  --coral-bright:var(--wp--preset--color--coral-bright,#F4805F);
  --steel:var(--wp--preset--color--steel,#8EA3B5);

  /* signature sky — sunset into blue-hour night */
  --sky:var(--wp--preset--gradient--sky,linear-gradient(157deg,#F6A93B 0%,#E4572E 22%,#A9502F 38%,#5E6461 54%,#3E5A72 74%,#16263B 100%));

  /* type */
  --display:var(--wp--preset--font-family--display,'Space Grotesk','Arial Narrow',sans-serif);
  --body:var(--wp--preset--font-family--body,'IBM Plex Sans',system-ui,sans-serif);
  --mono:var(--wp--preset--font-family--mono,'IBM Plex Mono',ui-monospace,monospace);

  /* fluid type scale */
  --t-hero:var(--wp--preset--font-size--hero,clamp(2.6rem,8.5vw,5.8rem));
  --t-h2:var(--wp--preset--font-size--h2,clamp(1.7rem,4.5vw,2.6rem));
  --t-h3:var(--wp--preset--font-size--h3,clamp(1.5rem,3.5vw,2.2rem));
  --t-lead:var(--wp--preset--font-size--lead,clamp(1rem,2.5vw,1.15rem));
  --t-body:var(--wp--preset--font-size--body,17px);
  --t-cap:var(--wp--preset--font-size--cap,0.74rem);

  /* spacing / structure */
  --s1:var(--wp--custom--space--s-1,8px); --s2:var(--wp--custom--space--s-2,16px);
  --s3:var(--wp--custom--space--s-3,24px); --s4:var(--wp--custom--space--s-4,40px);
  --s5:var(--wp--custom--space--s-5,64px); --s6:var(--wp--custom--space--s-6,96px);
  --pad:var(--wp--custom--pad,clamp(18px,4vw,64px));
  --gap:var(--wp--custom--gap,clamp(16px,2vw,26px));
  --maxw:var(--wp--custom--maxw,1320px);
  --radius:var(--wp--custom--radius,0);
  --tap:var(--wp--custom--tap,44px);
  --z-nav:20; --z-dock:30; --z-skyline:40; --z-toggle:45;
  --ctl-radius:var(--radius);
}

/* ---------- 1b. SEMANTIC TOKENS — LIGHT (default) --------- */
:root{
  --bg:var(--warm);              /* page background            */
  --surface:#FFFAF0;             /* cards / raised panels      */
  --surface-2:var(--paper);      /* deeper panel               */
  --text:var(--night);           /* primary text               */
  --text-soft:#2C3A49;           /* secondary body             */
  --text-muted:#6D6A63;          /* captions, metadata         */
  --hairline:rgba(22,38,59,.16);
  --chip-border:rgba(22,38,59,.52); /* ≥3:1 vs surface (AA non-text) */
  --track:rgba(22,38,59,.12);    /* empty meter / techbar      */
  --coral-text:var(--coral-deep); /* coral AS text — 4.5:1 on light bgs */

  /* dark accent bands sitting inside a light page */
  --band-bg:var(--night);
  --band-text:var(--warm);
  --band-text-soft:#E8DDCB;
  --band-muted:var(--steel);
  --band-hair:rgba(142,163,181,.22);

  --footer-bg:var(--ink);
  --focus:#B25000;               /* dark amber — ≥3:1 vs light bgs */
  --edge:1px solid var(--hairline);
}

/* ---------- 1c. SEMANTIC TOKENS — DARK -------------------- */
:root[data-theme="dark"]{
  --bg:var(--ink);
  --surface:#182B3E;
  --surface-2:#12222F;
  --text:var(--warm);
  --text-soft:#E2D9CA;
  --text-muted:#93A6B7;
  --hairline:rgba(142,163,181,.20);
  --chip-border:rgba(142,163,181,.62);
  --track:rgba(255,255,255,.10);
  --coral-text:var(--coral-bright);

  /* bands lift slightly above the page so they still read as distinct */
  --band-bg:#1C3348;
  --band-text:var(--warm);
  --band-text-soft:#E8DDCB;
  --band-muted:#93A6B7;
  --band-hair:rgba(142,163,181,.22);

  --footer-bg:#0A141F;
  --focus:var(--sun);            /* amber reads strongly on dark */
}
/* auto dark when the OS asks and the user hasn't chosen */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:var(--ink); --surface:#182B3E; --surface-2:#12222F;
    --text:var(--warm); --text-soft:#E2D9CA; --text-muted:#93A6B7;
    --hairline:rgba(142,163,181,.20); --chip-border:rgba(142,163,181,.62);
    --track:rgba(255,255,255,.10); --coral-text:var(--coral-bright);
    --band-bg:#1C3348; --band-text:var(--warm); --band-text-soft:#E8DDCB;
    --band-muted:#93A6B7; --band-hair:rgba(142,163,181,.22);
    --footer-bg:#0A141F; --focus:var(--sun);
  }
}