/* ============================================================
   AUTODEB — Design System Variables
   Fintech Premium | API-First Infrastructure
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --color-primary:       #7C3AED;
  --color-primary-light: #9F67FF;
  --color-primary-dark:  #5B21B6;
  --color-secondary:     #06B6D4;
  --color-secondary-light: #22D3EE;
  --color-accent:        #10B981;
  --color-accent-light:  #34D399;
  --color-danger:        #EF4444;
  --color-warning:       #F59E0B;
  --color-info:          #3B82F6;

  /* ── Gradients ── */
  --gradient-primary:    linear-gradient(135deg, #7C3AED 0%, #06B6D4 100%);
  --gradient-hero:       linear-gradient(135deg, #060B18 0%, #1A0A3E 50%, #060B18 100%);
  --gradient-card:       linear-gradient(135deg, rgba(124,58,237,0.08) 0%, rgba(6,182,212,0.08) 100%);
  --gradient-glow:       radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.4) 0%, transparent 60%);
  --gradient-mesh:       radial-gradient(at 40% 20%, rgba(124,58,237,0.15) 0px, transparent 50%),
                         radial-gradient(at 80% 0%, rgba(6,182,212,0.1) 0px, transparent 50%),
                         radial-gradient(at 0% 50%, rgba(16,185,129,0.08) 0px, transparent 50%);
  --gradient-btn:        linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
  --gradient-btn-hover:  linear-gradient(135deg, #9F67FF 0%, #7C3AED 100%);

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

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* ── Spacing Scale ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ── Border Radius ── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-3xl:  2rem;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --ease-fast:   150ms cubic-bezier(0.4,0,0.2,1);
  --ease-base:   250ms cubic-bezier(0.4,0,0.2,1);
  --ease-slow:   400ms cubic-bezier(0.4,0,0.2,1);
  --ease-spring: 500ms cubic-bezier(0.34,1.56,0.64,1);

  /* ── Z-index ── */
  --z-base:     1;
  --z-above:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-float:    500;
  --z-toast:    600;

  /* ── Layout ── */
  --container-max:    1280px;
  --container-narrow: 960px;
  --container-wide:   1440px;
  --header-height:    72px;
  --sidebar-width:    280px;
}

/* ============================================================
   DARK MODE (Default)
   ============================================================ */
[data-theme="dark"], :root {
  --bg-primary:       #060B18;
  --bg-secondary:     #0D1526;
  --bg-card:          #1A2540;
  --bg-card-hover:    #1F2E50;
  --bg-input:         #111D35;
  --bg-code:          #0A1020;
  --bg-overlay:       rgba(6,11,24,0.85);

  --border:           #2A3A5C;
  --border-subtle:    #1A2540;
  --border-focus:     #7C3AED;

  --text-primary:     #E2E8F0;
  --text-secondary:   #94A3B8;
  --text-tertiary:    #64748B;
  --text-disabled:    #475569;
  --text-inverse:     #0F172A;
  --text-on-primary:  #FFFFFF;

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.6);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.5);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg:  0 10px 40px rgba(0,0,0,0.5);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.6);
  --shadow-glow:      0 0 30px rgba(124,58,237,0.35);
  --shadow-glow-cyan: 0 0 30px rgba(6,182,212,0.3);
  --shadow-glow-green:0 0 20px rgba(16,185,129,0.25);

  --nav-bg:           rgba(6,11,24,0.96);
  --scrollbar-track:  #0D1526;
  --scrollbar-thumb:  #2A3A5C;

  color-scheme: dark;
}

/* ============================================================
   LIGHT MODE
   ============================================================ */
[data-theme="light"] {
  --bg-primary:       #F0F4FF;
  --bg-secondary:     #FFFFFF;
  --bg-card:          #FFFFFF;
  --bg-card-hover:    #F8FAFF;
  --bg-input:         #F8FAFC;
  --bg-code:          #1E293B;
  --bg-overlay:       rgba(240,244,255,0.9);

  --border:           #E2E8F0;
  --border-subtle:    #F1F5F9;
  --border-focus:     #7C3AED;

  --text-primary:     #0F172A;
  --text-secondary:   #475569;
  --text-tertiary:    #94A3B8;
  --text-disabled:    #CBD5E1;
  --text-inverse:     #E2E8F0;
  --text-on-primary:  #FFFFFF;

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:  0 10px 40px rgba(0,0,0,0.12);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.15);
  --shadow-glow:      0 0 30px rgba(124,58,237,0.18);
  --shadow-glow-cyan: 0 0 30px rgba(6,182,212,0.15);
  --shadow-glow-green:0 0 20px rgba(16,185,129,0.12);

  --nav-bg:           rgba(255,255,255,0.96);
  --scrollbar-track:  #F1F5F9;
  --scrollbar-thumb:  #CBD5E1;

  color-scheme: light;
}