/* =============================================
   BALAN PLUS — Design Tokens & CSS Variables
   ============================================= */

:root {
  /* Brand Colors — refreshed palette */
  --primary: #1C64F2;
  --primary-dark: #1347C8;
  --primary-light: #4F86F7;
  --primary-xlight: rgba(28,100,242,0.08);
  --accent: #F97316;
  --accent-dark: #C45D0A;
  --accent-light: rgba(249,115,22,0.10);
  --teal: #0D9488;
  --teal-light: rgba(13,148,136,0.10);

  /* Semantic */
  --success: #16A34A;
  --success-light: rgba(22,163,74,0.10);
  --warning: #D97706;
  --warning-light: rgba(217,119,6,0.10);
  --danger: #DC2626;
  --danger-light: rgba(220,38,38,0.10);
  --info: #2563EB;

  /* Neutral - Light Mode */
  --bg: #F5F7FF;
  --bg-card: #FFFFFF;
  --bg-secondary: #EDF0FA;
  --bg-overlay: rgba(255,255,255,0.92);
  --text: #0D1117;
  --text-secondary: #4B5468;
  --text-muted: #8B93A8;
  --border: #DDE2F0;
  --border-strong: #BCC4DC;
  --shadow-sm: 0 1px 3px rgba(13,17,23,0.07), 0 1px 2px rgba(13,17,23,0.04);
  --shadow: 0 4px 16px rgba(13,17,23,0.09), 0 2px 6px rgba(13,17,23,0.05);
  --shadow-lg: 0 12px 36px rgba(13,17,23,0.13), 0 4px 14px rgba(13,17,23,0.07);
  --shadow-xl: 0 24px 60px rgba(13,17,23,0.17);
  --shadow-primary: 0 8px 24px rgba(28,100,242,0.25);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* Spacing Scale */
  --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;--sp-20: 80px;--sp-24: 96px;

  /* Radius */
  --r-sm: 6px; --r: 10px; --r-md: 14px; --r-lg: 20px;
  --r-xl: 28px; --r-2xl: 36px; --r-full: 9999px;

  /* Transitions */
  --tr-fast: 150ms ease;
  --tr: 250ms ease;
  --tr-slow: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container: 1280px;
  --nav-h: 76px;

  /* Z-Index */
  --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400;
}

/* Dark Mode */
[data-theme="dark"] {
  --bg: #080C14;
  --bg-card: #111827;
  --bg-secondary: #1A2235;
  --bg-overlay: rgba(8,12,20,0.95);
  --text: #EEF2FF;
  --text-secondary: #94A3C4;
  --text-muted: #4E5A78;
  --border: #1E2A42;
  --border-strong: #2A3A58;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
  --shadow: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.55);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.65);
  --primary-light: #5A8EF8;
  --primary-xlight: rgba(28,100,242,0.14);
  --shadow-primary: 0 8px 24px rgba(28,100,242,0.35);
}