/* =============================================================================
   seolead — design tokens
   Single source of truth for colors, typography, spacing, motion.
   Both light and dark themes use the same CSS variable names.
   ============================================================================= */

:root {
  /* Surface */
  --bg:             255 255 255;
  --surface:        250 250 249;
  --surface-2:      245 245 244;
  --border:         231 229 228;
  --border-strong:  214 211 209;

  /* Text */
  --fg:             28 25 23;
  --fg-muted:       87 83 78;
  --fg-subtle:      168 162 158;

  /* Accent — emerald */
  --accent:         5 150 105;
  --accent-hover:   4 120 87;
  --accent-soft:    209 250 229;
  --accent-fg:      255 255 255;

  /* Semantic */
  --success:        5 150 105;
  --success-soft:   209 250 229;
  --warning:        217 119 6;
  --warning-soft:   254 243 199;
  --danger:         220 38 38;
  --danger-soft:    254 226 226;
  --info:           8 145 178;
  --info-soft:      207 250 254;

  /* Shadow */
  --shadow-sm:      0 1px 2px rgba(0,0,0,0.04);
  --shadow:         0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:      0 12px 32px rgba(0,0,0,0.12);

  /* Geometry */
  --radius-sm:      4px;
  --radius:         6px;
  --radius-lg:      10px;
  --radius-full:    9999px;

  /* Typography */
  --font-sans:      'Geist', 'Geist Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'SF Mono', 'Cascadia Code', Consolas, ui-monospace, monospace;

  /* Motion */
  --motion-fast:    120ms;
  --motion-base:    180ms;
  --motion-slow:    280ms;
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:        cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --sidebar-w:      240px;
  --sidebar-w-collapsed: 56px;
  --topbar-h:       52px;
  --table-row-h:    44px;
}

[data-theme='dark'] {
  --bg:             15 17 17;
  --surface:        22 25 25;
  --surface-2:      32 36 36;
  --border:         44 49 49;
  --border-strong:  64 71 71;

  --fg:             237 234 229;
  --fg-muted:       168 162 158;
  --fg-subtle:      120 113 108;

  --accent:         16 185 129;
  --accent-hover:   52 211 153;
  --accent-soft:    6 78 59;
  --accent-fg:      6 78 59;

  --success:        16 185 129;
  --success-soft:   6 78 59;
  --warning:        245 158 11;
  --warning-soft:   69 26 3;
  --danger:         248 113 113;
  --danger-soft:    69 10 10;
  --info:           34 211 238;
  --info-soft:      22 78 99;

  --shadow-sm:      0 1px 2px rgba(0,0,0,0.3);
  --shadow:         0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:      0 12px 32px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:             15 17 17;
    --surface:        22 25 25;
    --surface-2:      32 36 36;
    --border:         44 49 49;
    --border-strong:  64 71 71;
    --fg:             237 234 229;
    --fg-muted:       168 162 158;
    --fg-subtle:      120 113 108;
    --accent:         16 185 129;
    --accent-hover:   52 211 153;
    --accent-soft:    6 78 59;
    --accent-fg:      6 78 59;
    --success:        16 185 129;
    --success-soft:   6 78 59;
    --warning:        245 158 11;
    --warning-soft:   69 26 3;
    --danger:         248 113 113;
    --danger-soft:    69 10 10;
    --info:           34 211 238;
    --info-soft:      22 78 99;
  }
}