/*
 * INTELLURIC — DESIGN TOKENS
 * Obsidian Plasma visual system
 *
 * This file is the single upstream control point for all site color.
 * To retheme the entire site, edit the values in :root only.
 * Components reference tokens exclusively — never raw color values.
 *
 * Token naming:
 *   --void        deepest background
 *   --glass       surface / card background
 *   --border-*    border colors by spectral family
 *   --fill-*      translucent fills by spectral family
 *   --p-*         plasma (purple) spectral family
 *   --a-*         amber spectral family
 *   --w-*         white / neutral family
 *   --text-*      text hierarchy
 *   --font-*      typography
 *   --radius-*    geometry
 *   --space-*     spacing scale
 *   --ease-*      motion curves
 */

:root {

  /* ── SPECTRAL PALETTE ────────────────────────────────────────────────────── */

  /* Plasma (primary) */
  --p-core:   #f6deff;   /* brightest plasma — text, high-signal labels */
  --p-mid:    #c060ff;   /* mid plasma — active state, glows, borders */
  --p-glow:   #6a12ff;   /* deep plasma — gradients, shadows */
  --p-dim:    #8a40c0;   /* dimmed plasma — inactive elements */

  /* Amber (secondary / warm signal) */
  --a-core:   #fff4b8;   /* brightest amber — alt text, accents */
  --a-mid:    #ffaa22;   /* mid amber — tier tags, status signals */
  --a-glow:   #ff4400;   /* deep amber/red — alert, risk, consequence */

  /* White / neutral */
  --w-core:   #ffffff;
  --w-mid:    #d8e8ff;
  --w-glow:   #a0b8ff;

  /* ── BACKGROUNDS ─────────────────────────────────────────────────────────── */

  --void:     #010002;   /* full-bleed page background */
  --void-true: #000000;  /* obsidian surface — true black, darker than void */
  --glass:    #07050a;   /* card / panel background */
  --glass-2:  #0d0a12;   /* slightly lifted surface */
  --glass-3:  #130f1a;   /* modal / result panel */

  /* ── BORDERS ─────────────────────────────────────────────────────────────── */

  --border-p: rgba(190,  80, 255, .38);
  --border-a: rgba(255, 150,  40, .42);
  --border-w: rgba(200, 220, 255, .20);
  --border-dim: rgba(180, 160, 220, .12);

  /* ── FILLS ───────────────────────────────────────────────────────────────── */

  --fill-p:   rgba(100,  20, 255, .10);
  --fill-a:   rgba(255, 100,  20, .08);
  --fill-w:   rgba(200, 220, 255, .05);
  --fill-hover: rgba(190, 80, 255, .06);

  /* ── TEXT HIERARCHY ──────────────────────────────────────────────────────── */

  --text-primary:   var(--p-core);       /* main body text */
  --text-secondary: var(--w-mid);        /* secondary / explanatory copy */
  --text-dim:       rgba(246, 222, 255, .62); /* metadata, labels, dim state */
  --text-accent:    var(--p-mid);        /* links, active, highlight */
  --text-amber:     var(--a-mid);        /* tier names, status, warm signal */
  --text-bright:    var(--w-core);       /* max contrast — YOU NEED headlines */

  /* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── */

  --font-mono:  "IBM Plex Mono", "Courier New", monospace;
  --font-size-xs:   0.72rem;   /* 11.5px */
  --font-size-sm:   0.82rem;   /* 13px */
  --font-size-base: 0.94rem;   /* 15px */
  --font-size-md:   1.05rem;   /* 17px */
  --font-size-lg:   1.25rem;   /* 20px */
  --font-size-xl:   1.6rem;    /* 25.6px */
  --font-size-2xl:  2.1rem;    /* 33.6px */
  --font-size-3xl:  2.8rem;    /* 44.8px */

  --line-height-tight:  1.25;
  --line-height-normal: 1.55;
  --line-height-loose:  1.8;

  --letter-spacing-wide: 0.08em;
  --letter-spacing-wider: 0.14em;

  /* ── GEOMETRY ────────────────────────────────────────────────────────────── */

  --radius-sm:  4px;
  --radius-md:  7px;
  --radius-lg:  12px;

  /* ── SPACING ─────────────────────────────────────────────────────────────── */

  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */

  --max-content: 920px;
  --max-wide:   1160px;

  /* ── MOTION ──────────────────────────────────────────────────────────────── */

  --ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in:    cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --ease-soft:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast:   120ms;
  --duration-base:   220ms;
  --duration-slow:   380ms;

  /* ── GLOW / SHADOW ───────────────────────────────────────────────────────── */

  --glow-p-sm:  0 0  8px rgba(192,  96, 255, .30);
  --glow-p-md:  0 0 24px rgba(106,  18, 255, .40);
  --glow-a-sm:  0 0  8px rgba(255, 170,  34, .28);
  --shadow-card: 0 2px 24px rgba(0,0,0,.7);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.04);
}