/*
 * tokens.css — UI Kit Design Tokens
 *
 * Single source of truth for all CSS custom properties.
 * All other core files and themes reference these variables only —
 * no hardcoded hex values are permitted anywhere else.
 *
 * Base tokens: 8 variables that every theme overrides.
 * Semantic tokens: 6 state/utility variables shared across all themes.
 *
 * Load order: tokens.css → base.css → typography.css → components.css → …
 */

:root {
  /* ── Base tokens ──────────────────────────────────────────────────────── */
  /* These are the DEFAULT theme values.
     Republic, Empire, and Techno each override all of these.            */

  --bg:      #0e1015;   /* page background                                  */
  --panel:   #1e2530;   /* card / module surface                            */
  --border:  #2d3540;   /* borders, dividers, input strokes                 */
  --accent:  #4a7fa5;   /* primary interactive color (buttons, highlights)  */
  --accent3: #00ff9d;   /* secondary accent (links, badges)                 */
  --text:    #dde8f0;   /* primary body text                                */
  --muted:   #5c6a7a;   /* de-emphasised text, placeholders, icons          */
  --grid:    rgba(100, 140, 180, 0.03); /* subtle background grid texture   */

  /* ── Semantic tokens ──────────────────────────────────────────────────── */
  /* These do NOT change between themes — they represent states/meanings.   */

  --danger:          #e07a5f;             /* destructive action hover / warning */
  --error:           #ff4d4d;             /* validation error, critical alert    */
  --warning:         #f0a500;             /* caution, non-blocking alert         */
  --success:         #00ff9d;             /* positive state, completed action    */
  --overlay-bg:      rgba(10, 13, 18, 0.92); /* modal / drawer backdrop         */
  --overlay-bg-light: rgba(0, 0, 0, 0.7);   /* lighter backdrop variant         */
}