/* ============================================================
   PSYONARA — Color tokens
   "Industrial Ritual" — Void black + Industrial Orange safety accent.
   Dark-mode only. Material-style role tokens (matches the codebase
   globals.css 1:1) plus brand + semantic aliases.
   ============================================================ */

:root {
  /* ── Brand anchors ───────────────────────────────────────── */
  --psy-void: #000000;            /* absolute black — grain base, hazard stripe */
  --psy-orange: #ff6b00;          /* INDUSTRIAL ORANGE — the brand. CTAs, accents */
  --psy-orange-tint: #ffb693;     /* soft peach tint — text on void, highlights */
  --psy-orange-deep: #561f00;     /* burnt — text ON orange fills */
  --psy-ink: #131313;             /* the "Void" UI background */
  --psy-bone: #e2e2e2;            /* primary readable text */

  /* ── Surfaces (tonal elevation ladder) ───────────────────── */
  --color-surface: #131313;
  --color-surface-dim: #131313;
  --color-surface-bright: #393939;
  --color-surface-container-lowest: #0e0e0e;
  --color-surface-container-low: #1b1b1b;
  --color-surface-container: #1f1f1f;
  --color-surface-container-high: #2a2a2a;
  --color-surface-container-highest: #353535;
  --color-surface-variant: #353535;
  --color-background: #131313;

  /* ── Content (on-*) ──────────────────────────────────────── */
  --color-on-surface: #e2e2e2;
  --color-on-surface-variant: #e2bfb0;
  --color-on-background: #e2e2e2;
  --color-inverse-surface: #e2e2e2;
  --color-inverse-on-surface: #303030;

  /* ── Outlines / borders ──────────────────────────────────── */
  --color-outline: #a98a7d;
  --color-outline-variant: #5a4136;

  /* ── Primary (Industrial Orange family) ──────────────────── */
  --color-primary: #ffb693;             /* peach tint — primary text/icon accent */
  --color-on-primary: #561f00;
  --color-primary-container: #ff6b00;   /* the safety orange — solid fills */
  --color-on-primary-container: #572000;
  --color-inverse-primary: #a04100;
  --color-surface-tint: #ffb693;
  --color-primary-fixed: #ffdbcc;
  --color-primary-fixed-dim: #ffb693;
  --color-on-primary-fixed: #351000;
  --color-on-primary-fixed-variant: #7a3000;

  /* ── Secondary (warm carbon) ─────────────────────────────── */
  --color-secondary: #c8c6c5;
  --color-on-secondary: #313030;
  --color-secondary-container: #474746;
  --color-on-secondary-container: #b7b5b4;
  --color-secondary-fixed: #e5e2e1;
  --color-secondary-fixed-dim: #c8c6c5;
  --color-on-secondary-fixed: #1c1b1b;
  --color-on-secondary-fixed-variant: #474746;

  /* ── Tertiary (neutral carbon) ───────────────────────────── */
  --color-tertiary: #c8c6c6;
  --color-on-tertiary: #303030;
  --color-tertiary-container: #9a9999;
  --color-on-tertiary-container: #313131;
  --color-tertiary-fixed: #e4e2e1;
  --color-tertiary-fixed-dim: #c8c6c6;
  --color-on-tertiary-fixed: #1b1c1c;
  --color-on-tertiary-fixed-variant: #474747;

  /* ── Error / hazard ──────────────────────────────────────── */
  --color-error: #ffb4ab;
  --color-on-error: #690005;
  --color-error-container: #93000a;
  --color-on-error-container: #ffdad6;

  /* ── Semantic aliases (use these in components) ──────────── */
  --text-primary: var(--color-on-surface);          /* body text */
  --text-muted: var(--color-on-surface-variant);    /* metadata, captions */
  --text-accent: var(--color-primary);              /* peach accent text */
  --text-on-orange: #000000;                        /* black text on orange CTA */

  --surface-page: var(--color-background);          /* the void */
  --surface-card: var(--color-surface-container);   /* #1f1f1f card fill */
  --surface-sunken: var(--color-surface-container-lowest);
  --surface-raised: var(--color-surface-container-high);

  --border-hairline: var(--color-surface-container-high);  /* default 1px box border */
  --border-structural: var(--color-surface-container-highest);
  --border-active: var(--color-primary-container);         /* orange focus/active */

  --accent: var(--color-primary-container);         /* THE orange */
  --accent-text: var(--color-primary);              /* peach text accent */
}