/* ============================================================
   FUSION CODES • DESIGN TOKENS
   v1.0 — fintech-grade, accessible, light + dark ready
   ============================================================ */

:root {
  /* ---------- BRAND COLORS ---------- */
  --fc-navy-950:#050B1A;
  --fc-navy-900:#0A1F44;
  --fc-navy-800:#102A56;
  --fc-navy-700:#1E3A8A;
  --fc-blue-600:#2563EB;   /* primary CTA */
  --fc-blue-500:#3B82F6;
  --fc-blue-400:#60A5FA;
  --fc-blue-300:#93C5FD;
  --fc-blue-100:#DBEAFE;
  --fc-blue-50: #EFF6FF;

  --fc-accent-500:#10B981;  /* success / money-positive */
  --fc-accent-400:#34D399;
  --fc-warn-500: #F59E0B;
  --fc-danger-500:#EF4444;

  /* ---------- NEUTRAL SCALE ---------- */
  --fc-slate-50: #F8FAFC;
  --fc-slate-100:#F1F5F9;
  --fc-slate-200:#E2E8F0;
  --fc-slate-300:#CBD5E1;
  --fc-slate-400:#94A3B8;
  --fc-slate-500:#64748B;
  --fc-slate-600:#475569;
  --fc-slate-700:#334155;
  --fc-slate-800:#1E293B;
  --fc-slate-900:#364052;

  /* ---------- SEMANTIC ALIASES (use these in components) ---------- */
  --bg:             var(--fc-slate-50);
  --bg-elevated:    #FFFFFF;
  --bg-inverse:     var(--fc-navy-900);
  --surface:        #FFFFFF;
  --surface-muted:  var(--fc-slate-100);
  --border:         var(--fc-slate-200);
  --border-strong:  var(--fc-slate-300);

  --text:           var(--fc-slate-900);
  --text-muted:     var(--fc-slate-600);
  --text-subtle:    var(--fc-slate-500);
  --text-inverse:   #FFFFFF;

  --brand:          var(--fc-blue-600);
  --brand-hover:    var(--fc-navy-700);
  --brand-soft:     var(--fc-blue-50);
  --accent:         var(--fc-accent-500);
  --focus-ring:     0 0 0 3px rgba(59,130,246,.35);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: "General Sans","Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --font-body:    "Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:    "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Fluid type scale — clamp(min, fluid, max) */
  --fs-12: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-14: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --fs-16: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-18: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-20: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --fs-24: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-32: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-40: clamp(1.875rem, 1.55rem + 1.6vw, 2.5rem);
  --fs-56: clamp(2.25rem, 1.7rem + 2.7vw, 3.5rem);
  --fs-72: clamp(2.75rem, 1.9rem + 4vw, 4.5rem);

  --lh-tight:1.1;
  --lh-snug:1.25;
  --lh-normal:1.55;
  --lh-relaxed:1.7;

  --tracking-tight:-0.02em;
  --tracking-normal:0;
  --tracking-wide:0.08em;

  /* ---------- SPACING (4 px base) ---------- */
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;

  --section-y: clamp(64px, 8vw, 128px);
  --container-max: 1200px;
  --container-pad: clamp(16px, 4vw, 32px);

  /* ---------- RADIUS ---------- */
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-pill:9999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs:0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:0 2px 6px -2px rgba(15,23,42,.08);
  --shadow-md:0 6px 16px -8px rgba(15,23,42,.15);
  --shadow-lg:0 14px 30px -18px rgba(15,23,42,.25);
  --shadow-xl:0 24px 50px -24px rgba(15,23,42,.3);
  --shadow-brand:0 10px 24px -10px rgba(37,99,235,.45);
  --shadow-focus:0 0 0 3px rgba(59,130,246,.35);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-slow:400ms;

  /* ---------- Z-LAYERS ---------- */
  --z-nav:50;
  --z-modal:100;
  --z-toast:200;
}

/* ---------- DARK THEME (optional, toggled via data-theme="dark") ---------- */
[data-theme="dark"]{
  --bg:           var(--fc-navy-950);
  --bg-elevated:  var(--fc-navy-900);
  --surface:      #0F1B36;
  --surface-muted:#102A56;
  --border:       #1E2D52;
  --border-strong:#2A3E72;

  --text:         #F8FAFC;
  --text-muted:   #B4C0D6;
  --text-subtle:  #8492AE;

  --brand:        var(--fc-blue-500);
  --brand-hover:  var(--fc-blue-400);
  --brand-soft:   rgba(59,130,246,.12);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}