/* ============================================================
   kogasystem · design tokens
   "Operations Room × Editorial Magazine"
   ============================================================ */

:root {
  /* ─── surfaces ─── pure void with warm undertone */
  --bg-void:      #000000;            /* page, deepest black */
  --bg-canvas:    #050403;            /* main canvas */
  --bg-surface:   #0c0a07;            /* card / panel */
  --bg-elevated:  #14110a;            /* hero / focused */
  --bg-amber-glow: rgba(245, 185, 66, 0.04);
  --bg-line:      rgba(245, 240, 225, 0.04);  /* divider tint */

  /* ─── ink ─── warm off-white, brightened for readability ─── */
  --ink-bright:   #ffffff;
  --ink-primary:  #f5efd9;
  --ink-secondary:#dccfa8;
  --ink-tertiary: #b3a684;
  --ink-quiet:    #847a62;
  --ink-faded:    #4a4438;

  /* ─── signal ─── singular amber, used like a beacon ─── */
  --signal:       #f5b942;
  --signal-bright:#ffd166;
  --signal-deep:  #c2871f;
  --signal-shadow:rgba(245, 185, 66, 0.35);
  --signal-line:  rgba(245, 185, 66, 0.5);

  /* ─── alerts ─── used sparingly ─── */
  --alert-red:    #e54b4b;
  --alert-pulse:  rgba(229, 75, 75, 0.4);
  --go-green:     #6cc24a;

  /* ─── status (kanban / state) ─── */
  --status-todo:    #8a7f6b;
  --status-doing:   #f5b942;
  --status-waiting: #c4b89a;
  --status-done:    #6cc24a;
  --status-overdue: #e54b4b;

  /* ─── borders ─── ultra-thin warm white ─── */
  --rule:         rgba(245, 239, 217, 0.10);
  --rule-strong:  rgba(245, 239, 217, 0.22);
  --rule-signal:  rgba(245, 185, 66, 0.45);

  /* ─── typography ─── editorial serif + terminal mono ─── */
  --font-display: 'Instrument Serif', 'Fraunces', 'EB Garamond', Georgia, 'Hiragino Mincho Pro', 'Yu Mincho', serif;
  --font-mono:    'JetBrains Mono', 'Berkeley Mono', ui-monospace, SFMono-Regular, 'Hiragino Sans', sans-serif;
  --font-headline:'Fraunces', 'Instrument Serif', Georgia, serif;

  /* ─── spacing scale ─── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ─── radii ─── mostly hard edges ─── */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 9999px;

  /* ─── shadows / glows ─── */
  --glow-signal: 0 0 32px rgba(245, 185, 66, 0.18), 0 0 1px rgba(245, 185, 66, 0.5);
  --glow-soft:   0 0 60px rgba(245, 185, 66, 0.08);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 0 0 1px var(--rule), 0 30px 60px -30px rgba(0,0,0,0.9);
  --shadow-deep: 0 60px 120px -40px rgba(0, 0, 0, 0.95);

  /* ─── motion ─── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 600ms;
}