/* ═══════════════════════════════════════════════════════════════════════
   RI-FOCUS DESIGN TOKENS  v2.0
   Single source of truth for all CSS custom properties.
   Copied from /Users/op2ma/Projects/Op2ma/design-system/06-assets/css/design-tokens.css
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ────────────────────────────────────────────────────── */
  --orange:       #F5811F;
  --orange-light: #FEF3E8;
  --orange-dark:  #D96A0E;
  --blue:         #1A6EBD;
  --blue-light:   #EBF5FF;
  --blue-dark:    #145896;

  /* ── Semantic status ──────────────────────────────────────────── */
  --green:        #059669;
  --green-light:  #ECFDF5;
  --red:          #DC2626;
  --red-light:    #FEF2F2;
  --yellow:       #D97706;
  --yellow-light: #FEF3C7;

  /* ── Surface (light mode) ─────────────────────────────────────── */
  --bg-primary:   #F1F5F9;
  --bg-secondary: #FFFFFF;
  --border:       #E2E8F0;

  /* ── Text (light mode) ────────────────────────────────────────── */
  --text-primary:   #0F172A;
  --text-secondary: #374151;
  --text-muted:     #64748B;

  /* ── Elevation ────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:    0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);

  /* ── Geometry ─────────────────────────────────────────────────── */
  --radius:    10px;
  --radius-sm: 6px;
  --radius-xs: 4px;

  /* ── Layout ───────────────────────────────────────────────────── */
  --topbar-h:  84px;
  --sidebar-w: 240px;

  /* ── Transitions ──────────────────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
}

/* ── Dark mode overrides ────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-primary:   #0F172A;
  --bg-secondary: #1E293B;
  --border:       #334155;
  --text-primary:   #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted:     #94A3B8;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow:    0 4px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
  --orange-light: rgba(245,129,31,0.12);
  --blue-light:   rgba(26,110,189,0.12);
  --green-light:  rgba(5,150,105,0.12);
  --red-light:    rgba(220,38,38,0.12);
  --yellow-light: rgba(217,119,6,0.12);
}