/* ═══════════════════════════════════════════════════════════════
   DLC SaaS Pro V5 — Design Tokens
   All colors, spacing, radii, shadows as CSS custom properties.
   Dark theme = default. Light theme via data-theme="light".
   Tenant branding vars override --brand-* properties.
   ═══════════════════════════════════════════════════════════════ */

/* ── Self-Hosted Font ─────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* ── Dark Theme (Default) ─────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:        #09090b;
  --bg-2:      #111113;
  --bg-3:      #18181b;
  --bg-4:      #1c1c20;
  --surface:   #27272a;

  /* Borders */
  --border:    #27272a;
  --border-2:  #3f3f46;

  /* Text */
  --text:      #fafafa;
  --text-2:    #a1a1aa;
  --text-3:    #71717a;
  --text-4:    #52525b;

  /* Brand Colors (overridden by tenant) */
  --brand-primary:   #3b82f6;
  --brand-secondary: #2563eb;

  /* Accent Colors */
  --green:     #22c55e;
  --green-bg:  rgba(34,197,94,0.08);
  --blue:      #3b82f6;
  --blue-bg:   rgba(59,130,246,0.08);
  --purple:    #a855f7;
  --purple-bg: rgba(168,85,247,0.08);
  --orange:    #f97316;
  --orange-bg: rgba(249,115,22,0.08);
  --red:       #ef4444;
  --red-bg:    rgba(239,68,68,0.08);
  --yellow:    #eab308;
  --yellow-bg: rgba(234,179,8,0.08);
  --cyan:      #06b6d4;
  --cyan-bg:   rgba(6,182,212,0.08);
  --pink:      #ec4899;
  --teal:      #14b8a6;

  /* 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;

  /* Border Radius */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --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.3);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.3);

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Sidebar */
  --sidebar-w: 260px;
  --sidebar-collapsed-w: 64px;

  /* Transitions */
  --transition: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ── Light Theme ──────────────────────────────────────────────── */
html[data-theme="light"] {
  --bg:        #ffffff;
  --bg-2:      #f9fafb;
  --bg-3:      #f4f4f5;
  --bg-4:      #e4e4e7;
  --surface:   #d4d4d8;

  --border:    #e4e4e7;
  --border-2:  #d4d4d8;

  --text:      #09090b;
  --text-2:    #3f3f46;
  --text-3:    #71717a;
  --text-4:    #a1a1aa;

  --green-bg:  rgba(34,197,94,0.06);
  --blue-bg:   rgba(59,130,246,0.06);
  --purple-bg: rgba(168,85,247,0.06);
  --orange-bg: rgba(249,115,22,0.06);
  --red-bg:    rgba(239,68,68,0.06);
  --yellow-bg: rgba(234,179,8,0.06);
  --cyan-bg:   rgba(6,182,212,0.06);

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow:     0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);
}