/* ════════════════════════════════════════════════════════════════
   Design tokens — colors, radii, shadows
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Brand */
  --brand-dark:     #0f1f3d;
  --brand-mid:      #1a3a6b;
  --brand-blue:     #1a6ef5;
  --brand-hover:    #1558cc;

  /* Sidebar */
  --sb-bg:          #0f1f3d;
  --sb-border:      rgba(255,255,255,0.07);
  --sb-text:        rgba(255,255,255,0.65);
  --sb-text-active: #ffffff;
  --sb-item-active: rgba(26,110,245,0.25);
  --sb-item-hover:  rgba(255,255,255,0.06);
  --sb-section:     rgba(255,255,255,0.25);

  /* Surface */
  --bg-page:        #f0f4f9;
  --bg-card:        #ffffff;
  --bg-hover:       #f8fafc;
  --bg-region:      #eff6ff;

  /* Text */
  --text-primary:   #111827;
  --text-secondary: #6b7280;
  --text-muted:     #9ca3af;

  /* Border */
  --border:         rgba(0,0,0,0.08);
  --border-strong:  rgba(0,0,0,0.15);

  /* Status */
  --green:          #059669;
  --red:            #dc2626;
  --amber:          #d97706;
  --blue:           #1d4ed8;

  /* Corner radius */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  10px;
  --r-xl:  12px;

  /* Shadows */
  --shadow-sm:   0 1px 2px rgba(15,23,42,.04);
  --shadow-md:   0 4px 12px -2px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.04);
  --shadow-lg:   0 12px 28px -8px rgba(15,23,42,.18), 0 4px 10px -3px rgba(15,23,42,.08);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:        #0f1117;
    --bg-card:        #1a1f2e;
    --bg-hover:       #1f2537;
    --bg-region:      #1e2a4a;
    --text-primary:   #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted:     #64748b;
    --border:         rgba(255,255,255,0.08);
    --border-strong:  rgba(255,255,255,0.14);
  }
}