@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Backgrounds */
  --bg-base:      #0c0c0e;
  --bg-raised:    #111114;
  --bg-overlay:   #18181d;
  --bg-subtle:    #1e1e24;

  /* Borders */
  --border:       #26262e;
  --border-muted: #1e1e26;

  /* Text */
  --text-hi:      #f0f0f5;
  --text-mid:     #8888a0;
  --text-lo:      #4a4a60;

  /* Accent — a single, controlled blue */
  --blue:         #5b7fff;
  --blue-dim:     rgba(91, 127, 255, 0.12);
  --blue-border:  rgba(91, 127, 255, 0.28);

  /* Status */
  --green:        #3ecf8e;
  --yellow:       #f5a623;
  --red:          #e5534b;
  --green-dim:    rgba(62, 207, 142, 0.1);
  --yellow-dim:   rgba(245, 166, 35, 0.1);
  --red-dim:      rgba(229, 83, 75, 0.1);

  /* Typography */
  --font:         'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Radius */
  --r-sm: 4px;
  --r:    6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-full: 9999px;

  /* Transitions */
  --t-fast: 100ms ease;
  --t:      160ms ease;
  --t-slow: 240ms ease;

  /* Layout */
  --sidebar-w:  256px;
  --header-h:   56px;
  --content-w:  880px;
}

/* ── Light Mode ── */
[data-theme="light"] {
  --bg-base:      #fafafa;
  --bg-raised:    #ffffff;
  --bg-overlay:   #f4f4f7;
  --bg-subtle:    #ededf2;
  --border:       #e2e2ea;
  --border-muted: #ebebf0;
  --text-hi:      #0f0f14;
  --text-mid:     #5c5c78;
  --text-lo:      #9898b0;
  --blue:         #3d5fe0;
  --blue-dim:     rgba(61, 95, 224, 0.08);
  --blue-border:  rgba(61, 95, 224, 0.22);
  --green:        #0d9262;
  --yellow:       #b45309;
  --red:          #c0392b;
}