/* ════════════════════════════════════════════════════════════════════════════
   Synetic Portal — Design Tokens (#523)

   This is the foundation of the design system. Three layers:

   1. PRIMITIVE TOKENS  — raw values (color ramps, spacing scale, type scale).
                          Theme-agnostic. Never reference these from components;
                          use semantic tokens instead.

   2. SEMANTIC TOKENS   — meaning-based names (--bg-base, --text-primary,
                          --border-default). Map to primitives. THEME-AWARE:
                          dark and light themes produce different mappings.
                          Components should use these.

   3. LEGACY ALIASES    — old variable names (--bg, --surface, --primary, etc.)
                          are aliased to semantic tokens so existing CSS keeps
                          working. New code should use semantic tokens directly.

   Loaded BEFORE portal.css in index.html so the cascade order is:
     tokens.css (defines everything) → portal.css (consumes via var(...))

   See docs/UI-DESIGN.md for usage guidance.
   ════════════════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────────────────
   PRIMITIVE TOKENS
   ────────────────────────────────────────────────────────────────────────────
   Raw values. Theme-agnostic. Never theme-overridden — primitives are the
   shared paint, semantic tokens select different paints per theme.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Color: violet-neutral ramp ───────────────────────────────────────────
     Custom ramp anchored to the portal's existing dark surfaces. Slight
     violet tint differentiates from a pure-gray ramp without screaming
     "indigo." Stops 50/100/.../900 follow Tailwind conventions. */
  --neutral-50:  #faf9ff;
  --neutral-100: #f2f0ff;
  --neutral-200: #e5e3f2;
  --neutral-300: #c2c0d4;
  --neutral-400: #9c9aae;
  --neutral-500: #7a7888;
  --neutral-600: #545368;
  --neutral-700: #3a3947;
  --neutral-800: #1a1a2e;
  --neutral-850: #13131f;
  --neutral-900: #09090e;

  /* ── Color: brand (indigo) ────────────────────────────────────────────────
     Tailwind indigo. The portal already uses 500 + 600. */
  --brand-50:  #eef2ff;
  --brand-100: #e0e7ff;
  --brand-200: #c7d2fe;
  --brand-300: #a5b4fc;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-900: #312e81;

  /* ── Color: brand-2 (purple) ──────────────────────────────────────────────
     Tailwind purple. Used for gradient pairs with brand. */
  --brand2-50:  #faf5ff;
  --brand2-100: #f3e8ff;
  --brand2-200: #e9d5ff;
  --brand2-300: #d8b4fe;
  --brand2-400: #c084fc;
  --brand2-500: #a855f7;
  --brand2-600: #9333ea;
  --brand2-700: #7e22ce;
  --brand2-800: #6b21a8;
  --brand2-900: #581c87;

  /* ── Color: success (green) ───────────────────────────────────────────────
     Tailwind green. */
  --success-50:  #f0fdf4;
  --success-100: #dcfce7;
  --success-200: #bbf7d0;
  --success-300: #86efac;
  --success-400: #4ade80;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;
  --success-800: #166534;
  --success-900: #14532d;

  /* ── Color: warning (amber) ───────────────────────────────────────────────
     Tailwind amber. The portal needed an explicit warning ramp;
     #f59e0b was used inconsistently before. */
  --warning-50:  #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --warning-800: #92400e;
  --warning-900: #78350f;

  /* ── Color: danger (red) ──────────────────────────────────────────────────
     Tailwind red. */
  --danger-50:  #fef2f2;
  --danger-100: #fee2e2;
  --danger-200: #fecaca;
  --danger-300: #fca5a5;
  --danger-400: #f87171;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;
  --danger-800: #991b1b;
  --danger-900: #7f1d1d;

  /* ── Spacing scale ────────────────────────────────────────────────────────
     4px base unit. Numeric suffix = multiples of 4px. Non-multiples
     (10, 14, 18, etc.) deliberately omitted — the existing portal uses
     too many ad-hoc values; the system constrains. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Type scale ───────────────────────────────────────────────────────────
     9 sizes covering helper text through hero. Components should map to
     a semantic role (body, label, heading-md, etc.) — see semantic tokens
     below. Avoid using primitive sizes directly. */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-md:   13px;
  --text-base: 14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-4xl:  36px;

  /* ── Type weight ──────────────────────────────────────────────────────────
     Four weights. Inter and DM Sans support all four. */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Type families ────────────────────────────────────────────────────────
     Inter for UI / body. DM Sans for headings + display. Mono for code,
     IDs, keys. */
  --font-sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'DM Sans', 'Inter', system-ui, sans-serif;
  --font-mono:    'SF Mono', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;

  /* ── Line heights ─────────────────────────────────────────────────────────
     Three semantic line-height ratios. Use --leading-tight on headings,
     --leading-normal on body, --leading-relaxed on long-form copy. */
  --leading-tight:    1.25;
  --leading-snug:     1.4;
  --leading-normal:   1.5;
  --leading-relaxed:  1.7;

  /* ── Border radius ────────────────────────────────────────────────────────
     Five named radii + full-pill. Replaces the 10+ ad-hoc values found
     in the audit. Components should pick a named radius, not a number. */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   20px;
  --radius-full:  9999px;

  /* ── Border width ─────────────────────────────────────────────────────── */
  --border-width-default: 1px;
  --border-width-thick:   2px;
  --border-width-accent:  3px;  /* used on left-accented cards */

  /* ── Shadow ───────────────────────────────────────────────────────────────
     Three elevations. Tuned for a dark surface — light theme overrides
     these in the semantic layer below. */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 24px 48px rgba(0, 0, 0, 0.6);

  /* ── Z-index ──────────────────────────────────────────────────────────────
     Named layers. Components must use these names, not raw numbers, so
     the layering hierarchy stays explicit and the audit-found z-index
     conflicts (modals at 1000 vs 200) don't recur. */
  --z-base:     0;
  --z-elevated: 10;
  --z-sticky:   100;
  --z-overlay:  1000;
  --z-popover:  1100;
  --z-modal:    1200;
  --z-toast:    1300;

  /* ── Motion ───────────────────────────────────────────────────────────────
     Three durations. Components should reach for one of these rather
     than ad-hoc 0.2s / 0.25s / 0.3s sprinkled throughout. */
  --motion-fast:   120ms;
  --motion-base:   200ms;
  --motion-slow:   320ms;
  --easing-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Layout ───────────────────────────────────────────────────────────────
     Fixed structural dimensions. Not really "tokens" in the design-system
     sense, but they belong with the rest of the variables for discoverability. */
  --sidebar-w:        220px;
  --slide-over-w:     480px;  /* default right-side panel width (#523 sub-issue 8) */
  --content-max-w:   1200px;  /* main content max-width on dashboard surfaces */
}


/* ────────────────────────────────────────────────────────────────────────────
   SEMANTIC TOKENS — DARK THEME (default)
   ────────────────────────────────────────────────────────────────────────────
   Theme-aware names that map to primitives. Components should use these.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* Surfaces */
  --bg-base:        var(--neutral-900);   /* page background */
  --bg-surface:     var(--neutral-850);   /* card / panel */
  --bg-surface-2:   var(--neutral-800);   /* elevated / hover */
  --bg-overlay:     rgba(0, 0, 0, 0.6);   /* modal backdrop */

  /* Text */
  --text-primary:   var(--neutral-100);   /* headings, primary copy */
  --text-secondary: var(--neutral-300);   /* body */
  --text-muted:     var(--neutral-500);   /* helpers, timestamps */
  --text-inverse:   var(--neutral-900);   /* on bright backgrounds */

  /* Borders */
  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.12);
  --border-subtle:  rgba(255, 255, 255, 0.04);

  /* Brand */
  --brand:          var(--brand-500);
  --brand-hover:    var(--brand-400);
  --brand-active:   var(--brand-600);
  --brand-fg:       #ffffff;              /* text/icons on brand background */
  --brand-soft-bg:  rgba(99, 102, 241, 0.12);
  --brand-soft-fg:  var(--brand-300);

  /* Status — success */
  --success-bg:     rgba(34, 197, 94, 0.12);
  --success-fg:     var(--success-400);
  --success-solid:  var(--success-500);

  /* Status — warning */
  --warning-bg:     rgba(245, 158, 11, 0.12);
  --warning-fg:     var(--warning-400);
  --warning-solid:  var(--warning-500);

  /* Status — danger */
  --danger-bg:      rgba(239, 68, 68, 0.12);
  --danger-fg:      var(--danger-400);
  --danger-solid:   var(--danger-500);

  /* Hover / selection */
  --hover-bg:       rgba(255, 255, 255, 0.05);
  --selection-bg:   var(--brand-soft-bg);
  --focus-ring:     0 0 0 3px rgba(99, 102, 241, 0.45);

  /* Scrollbar */
  --scrollbar-thumb: rgba(255, 255, 255, 0.12);
}


/* ────────────────────────────────────────────────────────────────────────────
   SEMANTIC TOKENS — LIGHT THEME
   ──────────────────────────────────────────────────────────────────────────── */

[data-theme="light"] {
  --bg-base:        var(--neutral-50);
  --bg-surface:     #ffffff;
  --bg-surface-2:   var(--neutral-100);
  --bg-overlay:     rgba(0, 0, 0, 0.4);

  --text-primary:   var(--neutral-800);
  --text-secondary: var(--neutral-700);
  --text-muted:     var(--neutral-500);
  --text-inverse:   #ffffff;

  --border-default: rgba(0, 0, 0, 0.08);
  --border-strong:  rgba(0, 0, 0, 0.12);
  --border-subtle:  rgba(0, 0, 0, 0.04);

  --brand:          var(--brand-600);
  --brand-hover:    var(--brand-500);
  --brand-active:   var(--brand-700);
  --brand-fg:       #ffffff;
  --brand-soft-bg:  rgba(79, 70, 229, 0.10);
  --brand-soft-fg:  var(--brand-700);

  --success-bg:     rgba(22, 163, 74, 0.10);
  --success-fg:     var(--success-700);
  --success-solid:  var(--success-600);

  --warning-bg:     rgba(217, 119, 6, 0.10);
  --warning-fg:     var(--warning-700);
  --warning-solid:  var(--warning-600);

  --danger-bg:      rgba(220, 38, 38, 0.10);
  --danger-fg:      var(--danger-700);
  --danger-solid:   var(--danger-600);

  --hover-bg:       rgba(0, 0, 0, 0.04);
  --selection-bg:   var(--brand-soft-bg);
  --focus-ring:     0 0 0 3px rgba(79, 70, 229, 0.35);

  --scrollbar-thumb: rgba(0, 0, 0, 0.12);

  /* Shadows feel different in light mode — recolor to match. */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14);
  --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.18);
}


/* ────────────────────────────────────────────────────────────────────────────
   LEGACY ALIASES
   ────────────────────────────────────────────────────────────────────────────
   Existing variable names used throughout portal.css and inline styles map
   to the new semantic tokens. This keeps every existing component working
   while new code adopts the semantic names.

   Migration plan: each legacy alias eventually gets removed once all
   references are migrated. Track in #523 sub-issues. Until then, both work.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* Surfaces (was: --bg, --surface, --surface-2, --card-bg) */
  --bg:        var(--bg-base);
  --surface:   var(--bg-surface);
  --surface-2: var(--bg-surface-2);
  --card-bg:   var(--bg-surface);

  /* Text (was: --text, --text-2, --muted) */
  --text:   var(--text-primary);
  --text-2: var(--text-secondary);
  --muted:  var(--text-muted);

  /* Brand (was: --primary, --primary-2) */
  --primary:   var(--brand);
  --primary-2: var(--brand2-500);

  /* Status (was: --green, --red) */
  --green: var(--success-solid);
  --red:   var(--danger-solid);

  /* Border (was: --border, --overlay-border) */
  --border:         var(--border-default);
  --overlay-border: var(--border-strong);

  /* Other (was: --radius, --hover-bg) */
  --radius: var(--radius-lg);
  /* --hover-bg already named identically; defined in semantic layer */
}

[data-theme="light"] {
  --bg:        var(--bg-base);
  --surface:   var(--bg-surface);
  --surface-2: var(--bg-surface-2);
  --card-bg:   var(--bg-surface);

  --text:   var(--text-primary);
  --text-2: var(--text-secondary);
  --muted:  var(--text-muted);

  --primary:   var(--brand);
  --primary-2: var(--brand2-600);

  --green: var(--success-solid);
  --red:   var(--danger-solid);

  --border: var(--border-default);
}