:root {
  /* ── Brand palette ─────────────────────────────────── */
  --color-brand-50:   #EBF3FF;
  --color-brand-100:  #BFDBFE;
  --color-brand-600:  #1A73E8;
  --color-brand-700:  #1557B0;
  --color-brand-900:  #0D47A1;

  /* ── Semantic / status ─────────────────────────────── */
  --color-success:        #34A853;
  --color-success-light:  #D1FAE5;
  --color-warning:        #F59E0B;
  --color-warning-light:  #FEF3C7;
  --color-danger:         #E53935;
  --color-danger-light:   #FEE2E2;
  --color-info:           #1A73E8;
  --color-info-light:     #EBF3FF;

  /* ── Surface (light mode) ──────────────────────────── */
  --color-surface:         #FFFFFF;
  --color-surface-muted:   #F9FAFB;
  --color-surface-sunken:  #ECEEF2;
  --color-border:          #E5E7EB;
  --color-border-strong:   #D1D5DB;

  /* ── Text (light mode) ─────────────────────────────── */
  --color-text-primary:  #111827;
  --color-text-secondary:#374151;
  --color-text-muted:    #6B7280;
  --color-text-hint:     #9CA3AF;
  --color-text-inverse:  #FFFFFF;

  /* ── Surface (dark — admin dashboard) ─────────────── */
  --color-surface-dark:        #020617;   /* slate-950 */
  --color-surface-dark-raised: #0F172A;   /* slate-900 */
  --color-surface-dark-card:   #1E293B;   /* slate-800 */
  --color-border-dark:         rgba(255, 255, 255, 0.10);
  --color-text-dark-primary:   #F1F5F9;   /* slate-100 */
  --color-text-dark-muted:     #94A3B8;   /* slate-400 */

  /* ── Typography ────────────────────────────────────── */
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* ── Radius ────────────────────────────────────────── */
  --radius-sm:    7px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Spacing / layout ──────────────────────────────── */
  --sidebar-width:    280px;
  --topbar-height:     56px;
  --page-max-width:  1280px;
  --page-padding-x:    24px;

  /* ── Shadows ───────────────────────────────────────── */
  --shadow-card: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-overlay: 0 20px 60px rgba(0,0,0,.25);

  /* ── Transitions ───────────────────────────────────── */
  --transition-base: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reduced-motion: disable spinner animation ──────── */
@media (prefers-reduced-motion: reduce) {
  .animate-spin {
    animation: none;
  }
}