/* tokens.css — single source of truth for color, spacing, radii, shadows.
   Switching themes flips the variable values; all components read from these. */

:root {
  /* brand */
  --brand:       #7c5cff;
  --brand-2:     #00d4ff;
  --brand-grad:  linear-gradient(135deg, #7c5cff 0%, #00d4ff 100%);

  /* surfaces (light) */
  --bg:          #f6f7fb;
  --bg-elev:     #ffffff;
  --bg-elev-2:   #ffffff;
  --bg-hover:    #eef0f6;
  --bg-active:   #e4e7ef;
  --border:      #e2e5ed;
  --border-2:    #d2d6e0;

  /* text */
  --fg:          #0e1530;
  --fg-muted:    #5a6378;
  --fg-faint:    #8b93a6;
  --fg-inverse:  #ffffff;

  /* semantic */
  --ok:          #16a34a;
  --warn:        #d97706;
  --err:         #e11d48;
  --info:        #2563eb;
  --ok-bg:       #dcfce7;
  --warn-bg:     #fef3c7;
  --err-bg:      #ffe4e6;
  --info-bg:     #dbeafe;

  /* radii */
  --r-sm: 6px;
  --r:    10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* shadows */
  --shadow-1: 0 1px 2px rgb(15 23 42 / .04), 0 1px 1px rgb(15 23 42 / .03);
  --shadow-2: 0 4px 12px rgb(15 23 42 / .08), 0 1px 3px rgb(15 23 42 / .04);
  --shadow-3: 0 16px 40px rgb(15 23 42 / .14), 0 4px 12px rgb(15 23 42 / .08);
  --ring:     0 0 0 3px rgb(124 92 255 / .22);

  /* type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "SF Pro Text",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono",
               Menlo, Consolas, monospace;

  /* layout */
  --nav-w:     260px;
  --header-h:  56px;
  --pane-pad:  24px;
  --gap:       16px;
}

html.dark {
  --bg:          #0a0d1c;
  --bg-elev:     #11162a;
  --bg-elev-2:   #161d36;
  --bg-hover:    #1a2240;
  --bg-active:   #232c4e;
  --border:      #232b46;
  --border-2:    #2e3759;

  --fg:          #e6e9f5;
  --fg-muted:    #98a0b8;
  --fg-faint:    #6b7390;
  --fg-inverse:  #0a0d1c;

  --ok-bg:       #052e1a;
  --warn-bg:     #3a2a08;
  --err-bg:      #3a0d18;
  --info-bg:     #0a1a3d;

  --shadow-1: 0 1px 2px rgb(0 0 0 / .35);
  --shadow-2: 0 4px 12px rgb(0 0 0 / .45);
  --shadow-3: 0 16px 40px rgb(0 0 0 / .60);
}

@media (prefers-reduced-motion: no-preference) {
  :root { --t-fast: 120ms; --t: 180ms; --t-slow: 240ms; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t: 0ms; --t-slow: 0ms; }
}