/* ============================================================
   SLATE - Color tokens
   Black-first, acid-yellow signal. Editorial / poster grade.
   ============================================================ */
:root {
  /* -- Brand core ---------------------------------- */
  --acid: #ffe800;          /* the signal - warm bright brand yellow (from logo / moodboard) */
  --acid-bright: #fff04d;   /* hover lift on dark */
  --acid-deep: #e6cf00;     /* press / acid-on-light text */
  --acid-ink: #0b0b0b;      /* text that sits ON acid */

  /* -- Ink (near-black) --------------------------- */
  --ink: #0b0b0b;           /* primary background */
  --ink-true: #000000;      /* full-bleed black, photo mattes */
  --ink-raised: #141414;    /* elevated surface on ink */
  --ink-card: #161616;      /* cards / panels */
  --ink-hover: #1d1d1d;     /* hover fill on dark */

  /* -- Paper (warm off-white) --------------------- */
  --paper: #f5f3ec;         /* inverted sections, light surfaces */
  --paper-dim: #e9e6db;     /* secondary light surface */
  --paper-line: #ddd9cb;    /* divider on paper */

  /* -- Neutral ramp (cool grey, tuned for dark UI) -- */
  --n-0:   #ffffff;
  --n-50:  #f4f4f2;
  --n-100: #e4e4e1;
  --n-200: #c9c9c4;
  --n-300: #a8a8a1;
  --n-400: #82827b;
  --n-500: #62625c;
  --n-600: #474742;
  --n-700: #2f2f2b;
  --n-800: #1f1f1c;
  --n-900: #141412;
  --n-950: #0b0b0a;

  /* -- Status (used sparingly; brand stays mono+acid) -- */
  --positive: #9ef01a;      /* confirm - leans into the acid family */
  --warning:  #ffb020;
  --critical: #ff4d3d;
  --info:     #4da3ff;

  /* ========================================================
     SEMANTIC ALIASES - default theme = INK (dark)
     Wrap a region in .on-paper to flip to the light theme.
     ======================================================== */
  --bg: var(--ink);
  --bg-elevated: var(--ink-raised);
  --surface: var(--ink-card);
  --surface-hover: var(--ink-hover);

  --text: var(--paper);
  --text-secondary: var(--n-300);
  --text-muted: var(--n-400);
  --text-on-accent: var(--acid-ink);

  --highlight: var(--acid);
  --accent: var(--acid);
  --accent-hover: var(--acid-bright);
  --accent-press: var(--acid-deep);

  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.26);
  --border-acid: var(--acid);

  --focus-ring: var(--acid);
  --overlay: rgba(0, 0, 0, 0.72);
}

/* -- LIGHT THEME SCOPE - paper background, ink type -- */
.on-paper {
  --bg: var(--paper);
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-hover: var(--paper-dim);

  --text: var(--ink);
  --text-secondary: var(--n-600);
  --text-muted: var(--n-500);
  --text-on-accent: var(--acid-ink);

  --border: rgba(11, 11, 11, 0.14);
  --border-strong: rgba(11, 11, 11, 0.32);
}

/* -- ACID THEME SCOPE - acid field, ink type (poster blocks) -- */
.on-acid {
  --bg: var(--acid);
  --bg-elevated: var(--acid);
  --surface: var(--acid-deep);
  --surface-hover: var(--acid-deep);

  --text: var(--ink);
  --text-secondary: rgba(11, 11, 11, 0.7);
  --text-muted: rgba(11, 11, 11, 0.5);

  --border: rgba(11, 11, 11, 0.2);
  --border-strong: rgba(11, 11, 11, 0.45);
  --highlight: var(--ink);
}