/*
 * tokens.css — Hypatia Brain Design System
 * Single source of truth for all visual tokens.
 * Import in every page: <link rel="stylesheet" href="/css/tokens.css">
 *
 * Generated from Phase 4 Mega-Upgrade audit of 30 HTML pages.
 */

:root {
  /* ── Core Palette ─────────────────────────────────────────────────── */
  --bg-deep:        #000b06;
  --bg-surface:     #001a0d;
  --bg-card:        #00120a;
  --bg-card-hover:  #001f12;
  --bg-input:       rgba(0, 255, 163, 0.04);
  --bg-modal:       rgba(0, 0, 0, 0.85);
  --bg-overlay:     rgba(0, 11, 6, 0.92);

  /* ── Accent Colors ────────────────────────────────────────────────── */
  --accent:         #00ffa3;
  --accent-dim:     rgba(0, 255, 163, 0.15);
  --accent-glow:    rgba(0, 255, 163, 0.3);
  --accent-text:    #00ffa3;
  --accent-hover:   #00cc82;

  /* ── Status Colors ────────────────────────────────────────────────── */
  --success:        #00ffa3;
  --warning:        #fad015;
  --danger:         #ff4d6d;
  --info:           #3ac9ff;
  --purple:         #a855f7;
  --orange:         #f97316;
  --pink:           #f472b6;

  /* ── Safety Tier Colors ───────────────────────────────────────────── */
  --tier-safe:      #00ffa3;
  --tier-elevated:  #fad015;
  --tier-restricted:#ff4d6d;

  /* ── Category Colors (from _CAT_COLORS in bridge) ─────────────────── */
  --cat-intelligence: #10b981;
  --cat-content:      #f59e0b;
  --cat-security:     #e91e63;
  --cat-memory:       #a78bfa;
  --cat-internet:     #3ac9ff;
  --cat-banking:      #fad015;
  --cat-store:        #2ecc71;
  --cat-peptides:     #e879f9;
  --cat-system:       #9ca3af;
  --cat-comms:        #60a5fa;
  --cat-people:       #f472b6;
  --cat-pipeline:     #7c3aed;
  --cat-red-hat:      #ff4d6d;
  --cat-blue-hat:     #3ac9ff;
  --cat-threat-intel: #b0ffe8;
  --cat-lab:          #00d4aa;
  --cat-osint:        #f97316;
  --cat-investigator: #e879f9;
  --cat-support:      #a78bfa;
  --cat-command:      #00c8ff;
  --cat-ui-ux:        #f43f5e;
  --cat-engineering:  #6366f1;
  --cat-testing:      #22c55e;
  --cat-devops:       #fb923c;

  /* ── Typography ───────────────────────────────────────────────────── */
  --font-mono:      'Share Tech Mono', 'Roboto Mono', 'Fira Code', monospace;
  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs:   10px;
  --font-size-sm:   12px;
  --font-size-base: 13px;
  --font-size-md:   14px;
  --font-size-lg:   16px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;
  --font-size-3xl:  32px;
  --line-height:    1.6;

  /* ── Spacing ──────────────────────────────────────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* ── Borders & Radius ─────────────────────────────────────────────── */
  --border-color:     rgba(0, 255, 163, 0.12);
  --border-hover:     rgba(0, 255, 163, 0.3);
  --border-active:    rgba(0, 255, 163, 0.5);
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(0, 255, 163, 0.15);
  --shadow-neon: 0 0 10px rgba(0, 255, 163, 0.3), 0 0 40px rgba(0, 255, 163, 0.1);

  /* ── Transitions ──────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ── Z-index Scale ────────────────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    500;
  --z-toast:    700;
  --z-tooltip:  900;

  /* ── Layout ───────────────────────────────────────────────────────── */
  --content-max-width: 1400px;
  --sidebar-width:     280px;
  --header-height:     56px;
  --touch-target:      44px;  /* minimum mobile tap target */

  /* ── Safe Areas (mobile) ──────────────────────────────────────────── */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* ── Base Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg-deep);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Scrollbar ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* ── Selection ──────────────────────────────────────────────────────── */
::selection { background: var(--accent-dim); color: var(--accent-text); }

/* ── Focus ──────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Utility Classes ────────────────────────────────────────────────── */
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }
.text-info    { color: var(--info); }
.text-muted   { color: rgba(200, 255, 240, 0.4); }
.text-dim     { color: rgba(200, 255, 240, 0.25); }

.bg-card    { background: var(--bg-card); }
.bg-surface { background: var(--bg-surface); }

/* ── Safety Badge Classes ───────────────────────────────────────────── */
.safety-safe       { color: var(--tier-safe); }
.safety-elevated   { color: var(--tier-elevated); }
.safety-restricted { color: var(--tier-restricted); }

.badge-safe       { background: rgba(0,255,163,.12); color: var(--tier-safe); padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--font-size-xs); }
.badge-elevated   { background: rgba(250,208,21,.12); color: var(--tier-elevated); padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--font-size-xs); }
.badge-restricted { background: rgba(255,77,109,.12); color: var(--tier-restricted); padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--font-size-xs); }