/* ==========================================================================
   Low Key Comics — Design Tokens
   Single source of truth for color, type, space, and layout.
   Light theme on :root; dark theme via [data-theme] + prefers-color-scheme.
   ========================================================================== */

:root {
  /* --- Brand palette (raw) --- */
  --ink-900: #111214;   /* near-black text / headings */
  --ink-700: #33363b;
  --ink-500: #5b6069;   /* secondary text */
  --ink-300: #9aa0aa;   /* muted / meta */
  --line-200: #e6e4de;  /* hairline borders */
  --paper-100: #fbfaf7; /* page background (warm paper) */
  --paper-0: #ffffff;   /* card surface */
  --wash-50: #f3f1ea;   /* subtle section wash */

  --accent: #f3060d;        /* Low Key red (from wordmark logo) — primary brand accent */
  --accent-ink: #cc1017;    /* deeper red — hover + AA-safe link/brand text on light */
  --accent-wash: #fff0ef;   /* accent tint bg */
  --pop: #fee90b;           /* Low Key yellow (from logo) — comic-pop fill/badge accent */
  --pop-ink: #cbb800;       /* darker yellow edge/border */
  --pop-wash: #fffbe0;      /* yellow tint bg */
  --pop-on: #111214;        /* text/ink to sit ON yellow (never use yellow as text on light) */
  --gold: #c8a54b;          /* collecting / value cue (muted, distinct from pop yellow) */
  --gold-wash: #f7f0dd;

  /* --- Semantic roles (consumed by components) --- */
  --bg: var(--paper-100);
  --bg-section: var(--wash-50);
  --surface: var(--paper-0);
  --text: var(--ink-900);
  --text-soft: var(--ink-500);
  --text-muted: var(--ink-300);
  --border: var(--line-200);
  --brand: var(--accent);
  --brand-hover: var(--accent-ink);
  --brand-wash: var(--accent-wash);
  --brand-pop: var(--pop);
  --focus: #1a73e8;

  /* --- Typography --- */
  --font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback",
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", "Inter Fallback",
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale (min 320px → max 1200px) */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1rem, 0.95rem + 0.24vw, 1.13rem);      /* body */
  --step-1:  clamp(1.2rem, 1.11rem + 0.44vw, 1.5rem);
  --step-2:  clamp(1.44rem, 1.29rem + 0.75vw, 2rem);
  --step-3:  clamp(1.73rem, 1.49rem + 1.19vw, 2.66rem);
  --step-4:  clamp(2.07rem, 1.71rem + 1.8vw, 3.55rem);
  --step-5:  clamp(2.49rem, 1.95rem + 2.68vw, 4.73rem);

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  /* --- Space scale --- */
  --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;

  /* --- Layout --- */
  --container: 1180px;
  --container-narrow: 720px;  /* article measure */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;

  /* --- Elevation --- */
  --shadow-sm: 0 1px 2px rgba(17, 18, 20, 0.06);
  --shadow: 0 6px 24px -12px rgba(17, 18, 20, 0.28);
  --shadow-lg: 0 20px 48px -20px rgba(17, 18, 20, 0.35);

  --header-h: 68px;
  --transition: 160ms ease;
}

/* Dark theme — applied when the user chooses it (data-theme) or by system pref. */
:root[data-theme="dark"] {
  --bg: #0f1012;
  --bg-section: #16181b;
  --surface: #1a1d21;
  --text: #f2f0ea;
  --text-soft: #b7bcc4;
  --text-muted: #7f858f;
  --border: #2a2e34;
  --brand: #ff453a;
  --brand-hover: #ff7b71;
  --brand-wash: #2a1614;
  --brand-pop: #ffe600;
  --pop: #ffe600;
  --pop-ink: #d9c400;
  --pop-wash: #2a2708;
  --pop-on: #111214;
  --gold: #dcbc63;
  --gold-wash: #241f12;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 20px 48px -20px rgba(0, 0, 0, 0.8);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1012;
    --bg-section: #16181b;
    --surface: #1a1d21;
    --text: #f2f0ea;
    --text-soft: #b7bcc4;
    --text-muted: #7f858f;
    --border: #2a2e34;
    --brand: #ff453a;
    --brand-hover: #ff7b71;
    --brand-wash: #2a1614;
    --brand-pop: #ffe600;
    --pop: #ffe600;
    --pop-ink: #d9c400;
    --pop-wash: #2a2708;
    --pop-on: #111214;
    --gold: #dcbc63;
    --gold-wash: #241f12;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 20px 48px -20px rgba(0, 0, 0, 0.8);
  }
}