/* ============================================================
   PHRONION WORKS — DESIGN TOKENS
   "The Ghost in the Machine"
   Consolidated from the Phronion Works Design System
   (tokens/colors.css · typography.css · spacing.css · effects.css)
   ============================================================ */

:root {
  /* ---- Core brand colors (the canonical four) ---- */
  --void-black:    #0A0A0C;
  --ghost-gray:    #1C1C21;
  --phantom-white: #E0E0E0;
  --circuit-cyan:  #00F0FF;

  /* ---- Void scale ---- */
  --void-900: #060608;
  --void-800: #0A0A0C;
  --void-700: #121215;
  --void-600: #1C1C21;
  --void-500: #26262C;
  --void-400: #34343C;
  --void-300: #4A4A54;
  --void-200: #6B6B77;

  /* ---- Phantom (light text) scale ---- */
  --phantom-100: #F4F4F6;
  --phantom-200: #E0E0E0;
  --phantom-300: #B4B4BC;
  --phantom-400: #8A8A94;
  --phantom-500: #5E5E68;

  /* ---- Circuit Cyan scale ---- */
  --cyan-bright: #5BF8FF;
  --cyan-500:    #00F0FF;
  --cyan-600:    #00C2CE;
  --cyan-700:    #088E97;
  --cyan-dim:    #0A3A3E;

  /* ---- Semantic status ---- */
  --signal-ok:    #38E0A0;
  --signal-warn:  #FFC24B;
  --signal-alert: #FF4D5E;
  --signal-info:  #00F0FF;

  /* ---- Cyan glow alphas ---- */
  --cyan-a-08: rgba(0, 240, 255, 0.08);
  --cyan-a-16: rgba(0, 240, 255, 0.16);
  --cyan-a-28: rgba(0, 240, 255, 0.28);
  --cyan-a-50: rgba(0, 240, 255, 0.50);

  /* ---- Semantic aliases ---- */
  --bg-void:        var(--void-900);
  --surface-base:   var(--void-800);
  --surface-card:   var(--void-600);
  --surface-raised: var(--void-500);
  --surface-inset:  var(--void-700);
  --surface-cyan:   var(--cyan-dim);

  --text-primary:   var(--phantom-200);
  --text-bright:    var(--phantom-100);
  --text-secondary: var(--phantom-300);
  --text-muted:     var(--phantom-400);
  --text-disabled:  var(--phantom-500);
  --text-signal:    var(--cyan-500);
  --text-on-cyan:   var(--void-900);

  --border-faint:   var(--void-400);
  --border-default: var(--void-300);
  --border-signal:  var(--cyan-500);
  --border-signal-dim: var(--cyan-700);

  --accent:         var(--cyan-500);
  --accent-hover:   var(--cyan-bright);
  --accent-press:   var(--cyan-600);

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  --text-3xs: 11px;
  --text-2xs: 12px;
  --text-xs:  13px;
  --text-sm:  14px;
  --text-md:  16px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 88px;
  --text-7xl: 120px;

  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.18em;
  --tracking-widest:   0.32em;

  /* ---- Spacing (8px grid) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---- Radii ---- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --container-max: 1200px;

  /* ---- Z-index ---- */
  --z-cosmos:  0;
  --z-base:    1;
  --z-sticky:  100;

  /* ---- Shadows ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.5);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.55);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.6);
  --shadow-xl:  0 32px 80px rgba(0,0,0,0.7);

  /* ---- Cyan glows ---- */
  --glow-sm:  0 0 8px var(--cyan-a-28);
  --glow-md:  0 0 16px var(--cyan-a-28), 0 0 4px var(--cyan-a-50);
  --glow-lg:  0 0 32px var(--cyan-a-28), 0 0 12px var(--cyan-a-50);
  --glow-text: 0 0 12px var(--cyan-a-50);

  /* ---- Inset / well ---- */
  --inset-well: inset 0 1px 2px rgba(0,0,0,0.6);
  --inset-line: inset 0 0 0 1px var(--border-faint);

  /* ---- Motion — silent, holographic materialization ---- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   520ms;
}