/* ==========================================================================
   THE BALONEY MANIFESTO — Design Tokens
   Source of truth for color, spacing, radii, shadow, motion.
   Phase A per DESIGN_WORKORDER.md §3.4, §3.5, Appendix E.
   ========================================================================== */

:root {
  /* ---------- surfaces ---------- */
  --bg-base: #f5f0e8;
  --bg-elevated: #ebe5d8;
  --bg-paper: #f8f3eb;
  --bg-card: #f8f3eb;   /* raised card surface — stays light in dark mode */

  /* ---------- ink ---------- */
  --ink: #0d0800;
  --ink-on-dark: #f5f0e8;
  --ink-muted: #5a4a3a;
  --ink-on-paper: #0d0800;
  --ink-on-card: #0d0800;   /* text on --bg-card (same as ink-on-paper in day) */
  --muted-on-paper: #6a5a4a;

  /* ---------- brand ---------- */
  --brood-red: #c0392b;
  --hellfire-red: #ff2a00;
  --mustard: #d9ac10;
  --mustard-ink: #6b4f00;
  --meat-pink: #d68888;
  --casing-red: #a81e0f;

  /* ---------- accents ---------- */
  --olive-sage: #8faf5a;
  --pimento: #e53935;
  --aspic-blush: #f4c7b8;
  --butcher-twine: #8b6f3a;
  --vienna-brine: #d8d4c4;
  --ink-stamp: #9a1a10;

  /* ---------- oklch equivalents (for mixing) ---------- */
  --brood-red-oklch: oklch(0.55 0.18 29);
  --hellfire-red-oklch: oklch(0.66 0.25 35);
  --mustard-oklch: oklch(0.82 0.17 85);
  --meat-pink-oklch: oklch(0.78 0.08 20);
  --casing-red-oklch: oklch(0.45 0.18 27);

  /* ---------- semantic aliases ---------- */
  --color-primary: var(--brood-red);
  --color-accent: var(--mustard);
  --color-surface: var(--bg-base);
  --color-surface-elevated: var(--bg-elevated);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-muted);
  --color-border: color-mix(in oklch, var(--casing-red) 70%, transparent);
  --color-focus: var(--focus-ring);
  --focus-ring: #7f180f;
  --ink-on-accent: #ffffff;

  /* ---------- legacy aliases ---------- */
  --fg-primary: var(--color-text);
  --fg-muted: var(--muted-on-paper);
  --fg-on-dark: var(--ink-on-dark);
  --cream: #fff5d4;
  --mustard-pale: #fff0be;
  --font-serif: var(--font-prose);

  /* ---------- typography ---------- */
  --font-display: 'Ultra', 'Alfa Slab One', 'Bebas Neue', Impact, serif;
  --font-ui: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-prose: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-stamp: 'Bungee', 'Rubik Mono One', ui-monospace, monospace;

  /* modular scale 1.25 @ 16px base */
  --fs-micro: 0.64rem;
  --fs-small: 0.8rem;
  --fs-body: 1rem;
  --fs-body-lg: 1.25rem;
  --fs-h4: 1.562rem;
  --fs-h3: 1.953rem;
  --fs-h2: 2.441rem;
  --fs-h1: 3.052rem;
  --fs-display-2: 3.815rem;
  --fs-display-1: 4.768rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.55;
  --lh-prose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-stamp: 0.12em;

  /* ---------- spacing (4pt rhythm) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---------- radii ---------- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---------- layout ---------- */
  --content-max: 1280px;
  --prose-max: 68ch;

  /* ---------- elevation (we flaunt flatness, so shadows are minimal) ---------- */
  --shadow-stamp: 0 0 0 2px var(--ink-stamp);
  --shadow-card: 0 2px 0 0 var(--casing-red);
  --shadow-card-hover: 0 4px 0 0 var(--casing-red);

  /* ---------- motion ---------- */
  --motion-instant: 80ms;
  --motion-quick: 180ms;
  --motion-base: 260ms;
  --motion-slow: 420ms;
  --ease-butcher: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-snap: cubic-bezier(0.6, -0.1, 0.3, 1.2);

  /* ---------- borders (signature thick outline) ---------- */
  --outline-thin: 1px solid var(--casing-red);
  --outline: 2px solid var(--ink);
  --outline-thick: 4px solid var(--ink);

  /* ---------- z-index stack ---------- */
  --z-nav: 20;
  --z-modal: 40;
  --z-toast: 50;
  --z-easter-egg: 5;

  /* ==========================================================================
     CHARACTER TOKENS — per-part, theme-swappable
     Used by slice/*.svg pose variants. Binds SVG fills via CSS vars so
     characters stay visible across day / night / brood without per-mode art.
     ========================================================================== */
  --slice-casing: #a81e0f;        /* outer red casing ring */
  --slice-body: #e8a0a0;          /* pink bologna body */
  --slice-marble: #d68888;        /* marbling blobs */
  --slice-limb: #0d0800;          /* arm / leg strokes */
  --slice-hand: #e8a0a0;          /* hand fill (matches body) */
  --slice-shoe: #8b6f3a;          /* shoes — butcher-twine brown */
  --slice-shoe-stroke: #0d0800;
  --slice-outline: #0d0800;       /* body outline */
  --slice-eye-white: #f5f0e8;

  /* ==========================================================================
     WORDMARK TOKENS — day default. Night + brood override below.
     ========================================================================== */
  --wm-type: #1a0000;              /* main word fill */
  --wm-slice-ring: #a81e0f;        /* wordmark baloney-dot ring */
  --wm-slice-body: #e8a0a0;        /* wordmark baloney-dot body */
  --wm-slice-bite: #1a0000;        /* bite wedge + pupil */
  --wm-subtitle: #7f180f;          /* italic subtitle */

  /* ==========================================================================
     TOGGLE TOKENS — button-style shift + sfx toggles, contrast-validated.
     ========================================================================== */
  --toggle-border: var(--casing-red);
  --toggle-ink: var(--color-text);
  --toggle-active-bg: var(--casing-red);
  --toggle-active-ink: #fff7e8;

  /* ==========================================================================
     BROODWICH NETHERWORLD PALETTE — source-calibrated from ATHF dimension.
     Muted, dreamy, washed-out purple; not neon. Two-layer landscape depth.
     These are the source-of-truth hex values; they light up when
     [data-brood='on'] remaps the surface/ink/brand tokens.
     ========================================================================== */
  --brood-sky-top: #b89ac8;        /* upper sky — pinkish lavender */
  --brood-sky: #9e85b5;            /* mid sky — washed lavender */
  --brood-sky-deep: #6e557e;       /* near horizon — deeper muted purple */
  --brood-hill-pale: #78607e;      /* ground stripe A (lighter) */
  --brood-hill-dark: #4b3a5c;      /* ground stripe B (darker) */
  --brood-ridge: #3a2a48;          /* deepest ridge line */
  --brood-deep: #24182f;           /* deepest void */
  --brood-text: #f2e6e8;           /* warm off-white body text */
  --brood-text-muted: #c4a8c8;     /* secondary text */
  --brood-accent-warm: #d2a878;    /* muted ochre — single warm cue */
  --brood-flesh: #c83428;          /* signature Broodwich bread red — hi-contrast face/body fill */
  --brood-danger: #8b3c3a;         /* muted brick red — rare danger spot */
  --brood-bone: #e8d9b4;           /* ivory bone — skeletal motifs */
  --brood-stripe: #2a1d3a;         /* hatching line color */
}

/* ==========================================================================
   Night Shift — darker mode inverse of Day Shift.
   ========================================================================== */
[data-shift='night'] {
  --bg-base: #1a0000;
  --bg-elevated: #2a0a0a;
  --bg-paper: #2a1810;   /* flips dark — paper surfaces adapt to night */
  --bg-card: #f5f0e8;   /* stays light — raised cards on dark bg */
  --ink: #0d0800;
  --ink-on-dark: #f5f0e8;
  --ink-muted: #c9b8a8;
  --ink-on-paper: #f5f0e8;  /* flips light — text on dark paper */
  --muted-on-paper: #b8a898; /* muted text on dark paper */
  --ink-on-card: #0d0800;  /* stays dark — text on light cards */

  --mustard: #f5c518;
  --mustard-ink: #f5c518;
  --meat-pink: #e8a0a0;
  --ink-stamp: #b7241a;
  --focus-ring: #ffd24a;

  --color-text: var(--ink-on-dark);
  --color-text-muted: var(--ink-muted);
  --fg-primary: var(--color-text);
  --fg-muted: var(--muted-on-paper);
  --fg-on-dark: var(--ink-on-dark);
  --shadow-card: 0 2px 0 0 var(--casing-red);

  /* contrast fixes — character limbs/shoes and wordmark went invisible on dark */
  --slice-limb: #f5e9d2;                 /* was #0d0800 — invisible on near-black bg */
  --slice-shoe: #d7b06a;                 /* was #8b6f3a — AA on dark */
  --wm-type: #f5f0e8;                    /* was #1a0000 — black-on-dark */
  --wm-subtitle: #f5c518;
  --toggle-border: #ffd24a;              /* was casing-red — low contrast on dark */
  --toggle-ink: #fff7e8;
  --toggle-active-bg: #f5c518;
  --toggle-active-ink: #1a0000;
}

/* Auto mode follows OS preference when data-shift is unset or explicitly 'auto'. */
@media (prefers-color-scheme: dark) {
  :root:not([data-shift]),
  :root[data-shift='auto'] {
    --bg-base: #1a0000;
    --bg-elevated: #2a0a0a;
    --bg-paper: #2a1810;
    --bg-card: #f5f0e8;
    --ink: #0d0800;
    --ink-on-dark: #f5f0e8;
    --ink-muted: #c9b8a8;
    --ink-on-paper: #f5f0e8;
    --muted-on-paper: #b8a898;
    --ink-on-card: #0d0800;
    --mustard: #f5c518;
    --mustard-ink: #f5c518;
    --meat-pink: #e8a0a0;
    --ink-stamp: #b7241a;
    --focus-ring: #ffd24a;
    --color-text: var(--ink-on-dark);
    --color-text-muted: var(--ink-muted);
    --fg-primary: var(--color-text);
    --fg-muted: var(--muted-on-paper);
    --fg-on-dark: var(--ink-on-dark);

    --slice-limb: #f5e9d2;
    --slice-shoe: #d7b06a;
    --wm-type: #f5f0e8;
    --wm-subtitle: #f5c518;
    --toggle-border: #ffd24a;
    --toggle-ink: #fff7e8;
    --toggle-active-bg: #f5c518;
    --toggle-active-ink: #1a0000;
  }
}

/* ==========================================================================
   BROODWICH NETHERWORLD — a parallel visual plane, not a dark-theme variant.
   A dreamy, washed-out purple dimension homaging the ATHF Broodwich. Muted
   palette, zigzag horizon, two-layer depth, stripe-as-texture, one warm cue
   per frame. Overrides shift entirely when active.
   ========================================================================== */
:root[data-brood='on'] {
  /* surfaces — drop into the netherworld */
  --bg-base: var(--brood-hill-dark);
  --bg-elevated: var(--brood-sky-deep);
  --bg-paper: var(--brood-ridge);
  --bg-card: var(--brood-hill-pale);

  --ink: var(--brood-text);
  --ink-on-dark: var(--brood-text);
  --ink-muted: var(--brood-text-muted);
  --ink-on-paper: var(--brood-text);
  --muted-on-paper: var(--brood-text-muted);
  --ink-on-card: var(--brood-text);

  /* brand — remap the red/mustard vocabulary to muted violet + sole warm */
  --brood-red: var(--brood-accent-warm);
  --casing-red: var(--brood-ridge);
  --mustard: var(--brood-accent-warm);
  --mustard-ink: var(--brood-accent-warm);
  --ink-stamp: var(--brood-accent-warm);
  --meat-pink: var(--brood-hill-pale);

  --color-text: var(--brood-text);
  --color-text-muted: var(--brood-text-muted);
  --color-border: var(--brood-ridge);
  --fg-primary: var(--brood-text);
  --fg-muted: var(--brood-text-muted);
  --fg-on-dark: var(--brood-text);
  --focus-ring: var(--brood-accent-warm);

  /* characters cross over — same silhouette, palette-swapped.
     Outline lifts to stay legible against the dusky bg. */
  --slice-casing: #3a2a48;
  --slice-body: #78607e;
  --slice-marble: #8e7598;
  --slice-limb: var(--brood-text);
  --slice-hand: #78607e;
  --slice-shoe: var(--brood-accent-warm);
  --slice-shoe-stroke: var(--brood-ridge);
  --slice-outline: var(--brood-ridge);
  --slice-eye-white: var(--brood-text);

  /* wordmark in brood */
  --wm-type: var(--brood-text);
  --wm-slice-ring: var(--brood-ridge);
  --wm-slice-body: #8e7598;
  --wm-slice-bite: var(--brood-deep);
  --wm-subtitle: var(--brood-accent-warm);

  /* toggles in brood */
  --toggle-border: var(--brood-accent-warm);
  --toggle-ink: var(--brood-text);
  --toggle-active-bg: var(--brood-ridge);
  --toggle-active-ink: var(--brood-accent-warm);
}

@media (prefers-contrast: more) {
  :root {
    --focus-ring: #ff1a00;
    --color-border: var(--ink);
  }
}

@media (forced-colors: active) {
  :root {
    --focus-ring: CanvasText;
  }
}

/* ==========================================================================
   Reduced motion — collapse all non-essential motion.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: 0ms;
    --motion-quick: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}