/* ============================================
   STUDIO X37 — COLOR TOKENS
   Post-apocalyptic penthouse. CRT phosphor on
   scorched panels. Bone ink on void black.
   ============================================ */

:root {
  /* ---- Base: surfaces (the dark room) ---- */
  --x37-void: #0A0907;        /* page background — burnt black */
  --x37-panel: #14110C;       /* card / module background */
  --x37-panel-2: #1E1912;     /* raised module, hover surface */
  --x37-panel-3: #2A231A;     /* highest elevation, active keys */

  /* ---- Base: ink (the brush) ---- */
  --x37-bone: #E8DFCE;        /* primary ink — dried-paint cream */
  --x37-bone-dim: #A89E8B;    /* secondary ink */
  --x37-bone-faint: #6E6657;  /* tertiary / disabled ink */

  /* ---- Base: phosphor accents ---- */
  --x37-acid: #63D98F;        /* occult-blueprint green — primary accent */
  --x37-acid-bright: #8FFFBE; /* CRT phosphor glow — highlights, cursors */
  --x37-acid-deep: #1E4A33;   /* green wash / fills */
  --x37-magenta: #FF2E7E;     /* tv-wall magenta — alarm, mad energy */
  --x37-magenta-deep: #571030;
  --x37-orange: #DF7A1F;      /* collage orange — warm signal */
  --x37-teal: #36B9A2;        /* oxidized copper accents */
  --x37-red: #D8331F;         /* hardware red — destructive, REC */

  /* ---- Semantic: surfaces ---- */
  --surface-page: var(--x37-void);
  --surface-card: var(--x37-panel);
  --surface-raised: var(--x37-panel-2);
  --surface-active: var(--x37-panel-3);
  --surface-inverse: var(--x37-bone);

  /* ---- Semantic: text ---- */
  --text-display: var(--x37-bone);
  --text-body: var(--x37-bone);
  --text-dim: var(--x37-bone-dim);
  --text-faint: var(--x37-bone-faint);
  --text-accent: var(--x37-acid);
  --text-alarm: var(--x37-magenta);
  --text-inverse: var(--x37-void);

  /* ---- Semantic: accents ---- */
  --accent-primary: var(--x37-acid);
  --accent-alarm: var(--x37-magenta);
  --accent-signal: var(--x37-orange);
  --accent-danger: var(--x37-red);

  /* ---- Semantic: lines & borders ---- */
  --border-line: rgba(232, 223, 206, 0.16);     /* hairlines, module seams */
  --border-strong: rgba(232, 223, 206, 0.38);   /* interactive outlines */
  --border-accent: var(--x37-acid);
  --focus-ring: var(--x37-acid-bright);

  /* ---- Semantic: state washes ---- */
  --wash-acid: rgba(99, 217, 143, 0.10);
  --wash-magenta: rgba(255, 46, 126, 0.10);
  --wash-bone: rgba(232, 223, 206, 0.06);
}