/* ============================================================
   FinsiderAI Design Tokens
   Source of truth for all design values.
   Claude Design reads this directly when the repo is connected.
   Never write hardcoded values in other CSS — always use var().

   Aesthetic: Modern fintech. Inspired by Linear, Wise, Ramp.
   Navy primary + indigo accent + cool neutrals + Manrope.
   ============================================================ */

:root {

  /* ============================================================
     COLOR — PRIMARY (Navy)
     Deep, trust-anchor blue. Used for headings, primary buttons,
     body text on light surfaces.
     ============================================================ */
  --c-navy-900: #08123A;   /* Body text on light surfaces */
  --c-navy-800: #0F1B4C;   /* Brand primary, headings */
  --c-navy-700: #1A2766;   /* Hover state for solid navy */

  /* ============================================================
     COLOR — ACCENT (Indigo)
     The interactive, electric blue.
     Primary CTA, links, focus rings.
     ============================================================ */
  --c-indigo-500: #3D5AFE;   /* Primary CTA, links, focus */
  --c-indigo-400: #5E76FF;   /* CTA hover, focus rings */
  --c-indigo-300: #94A6FF;   /* Tertiary indigo */
  --c-indigo-200: #C8D2FF;   /* Subtle highlights */
  --c-indigo-100: #ECEFFF;   /* Selected pill, tint surface */

  /* ============================================================
     COLOR — SECONDARY (Violet)
     For "compound" callouts, secondary actions, special accents.
     ============================================================ */
  --c-violet-500: #6E5BE8;
  --c-violet-100: #ECE8FB;

  /* ============================================================
     COLOR — CYAN
     Used for FAQ category 06 banner.
     ============================================================ */
  --c-cyan-500: #0E7490;
  --c-cyan-100: #ECFEFF;

  /* ============================================================
     COLOR — CODE EDITOR WINDOW BUTTONS (macOS traffic lights)
     Used in equation code-window headers only. Decorative.
     ============================================================ */
  --c-mac-red:    #FF5F57;
  --c-mac-yellow: #FEBC2E;
  --c-mac-green:  #28C840;

  /* ============================================================
     COLOR — GAIN ALPHA FILL
     Semi-transparent green used as SVG chart fill gradient stop.
     ============================================================ */
  --c-gain-soft: rgba(16, 185, 129, 0.13);

  /* ============================================================
     COLOR — NEUTRALS (Cool surfaces + structure)
     Cool tinted background — NOT pure white.
     ============================================================ */
  --c-bg:             #F4F6FB;   /* Page background, cool tinted */
  --c-surface:        #FFFFFF;   /* Cards, primary surfaces */
  --c-surface-2:      #FAFBFE;   /* Alt rows, soft fills */
  --c-surface-3:      #F0F3FA;   /* Subtle backgrounds, toggles */
  --c-border:         #E5E9F2;   /* Hairlines, dividers */
  --c-border-strong:  #C7CFE0;   /* Input borders, stronger dividers */

  /* ============================================================
     COLOR — TEXT
     ============================================================ */
  --c-text:        #0A1230;   /* Primary body text */
  --c-text-sub:    #4A5577;   /* Secondary text */
  --c-text-muted:  #8892AD;   /* Captions, helper text, disabled */
  --c-text-ink:    #0e0e0e;   /* Near-black neutral text (tax note body); distinct from navy-tinted --c-text */

  /* ============================================================
     COLOR — SEMANTIC (Financial meaning)
     Gains, losses, warnings. Never decorative.
     ============================================================ */
  --c-gain:        #10B981;   /* Growth green — positive returns */
  --c-gain-light:  #34D399;   /* Gain lighter shade */
  --c-gain-tint:   #D1FAE5;   /* Gain backgrounds */
  --c-gain-dark:   #07895E;   /* Dark green text on gain-tint (FAQ "gain" banner) */

  --c-warn:        #D97706;   /* Cautions, lockins */
  --c-warn-tint:   #FEF3C7;
  --c-warn-dark:   #7C3A04;   /* Dark warning text on warn-tint (rate-limit / CSRF callouts) */

  --c-danger:      #DC2626;   /* Errors, losses */
  --c-danger-tint: #FEE2E2;   /* Light red note background (tax note, error highlights) */

  /* ============================================================
     TYPOGRAPHY — FAMILIES
     Single geometric sans for unity. Manrope for everything UI.
     JetBrains Mono for numbers (tabular alignment is non-negotiable).
     ============================================================ */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace;

  /* ============================================================
     TYPOGRAPHY — SIZE SCALE
     Mobile scales down via media queries in base.css.
     ============================================================ */
  --fs-h1:        2.5rem;     /* 40px */
  --fs-h2:        2rem;       /* 32px */
  --fs-h3:        1.5rem;     /* 24px */
  --fs-h4:        1.25rem;    /* 20px */
  --fs-h5:        1.125rem;   /* 18px */
  --fs-body-lg:   1.125rem;   /* 18px */
  --fs-body:      1rem;       /* 16px */
  --fs-body-sm:   0.875rem;   /* 14px */
  --fs-caption:   0.75rem;    /* 12px */

  /* ============================================================
     TYPOGRAPHY — LINE HEIGHT
     ============================================================ */
  --lh-tight:   1.05;
  --lh-snug:    1.15;
  --lh-relaxed: 1.6;

  /* ============================================================
     TYPOGRAPHY — LETTER SPACING
     ============================================================ */
  --ls-tighter: -0.025em;
  --ls-tight:   -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.04em;

  /* ============================================================
     TYPOGRAPHY — WEIGHTS
     Manrope variable weights — only use these tokens.
     ============================================================ */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold: 800;

  /* ============================================================
     SPACING — 4px base unit
     ============================================================ */
  --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;
  --sp-32: 128px;

  /* ============================================================
     BORDER RADIUS
     HARD RULE: --r-full is for avatars only. Never buttons.
     ============================================================ */
  --r-sm:   6px;     /* Small tags, badges */
  --r-md:   10px;    /* Buttons, inputs — never pill */
  --r-lg:   14px;    /* Cards, panels */
  --r-xl:   20px;    /* Hero containers */
  --r-2xl:  28px;    /* Large panels */
  --r-full: 999px;   /* Avatars only */

  /* ============================================================
     SHADOWS
     Soft, navy-tinted. Modern fintech glow on key elements.
     ============================================================ */
  --sh-card:     0 1px 3px rgba(8, 18, 58, 0.06);
  --sh-elevated: 0 4px 16px rgba(8, 18, 58, 0.08);
  --sh-glow:     0 8px 32px rgba(61, 90, 254, 0.18);
  --sh-focus:    0 0 0 3px rgba(61, 90, 254, 0.25);

  /* ============================================================
     GRADIENTS
     Signature gradient — used VERY sparingly (hero, key cards).
     ============================================================ */
  --grad-brand: linear-gradient(135deg, #3D5AFE 0%, #6E5BE8 100%);
  --grad-soft:  linear-gradient(135deg, rgba(61, 90, 254, 0.08) 0%, rgba(110, 91, 232, 0.08) 100%);

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max:      1200px;
  --reading-max:        680px;
  --section-py-desktop: 80px;
  --section-py-mobile:  56px;
  --header-height:      80px;   /* sticky .site-header__inner height; 64px ≤600px (see layout.css) */

  /* ============================================================
     Z-INDEX
     ============================================================ */
  --z-sticky:   200;
  --z-toast:    500;

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --t-fast: 150ms ease;
  --t-base: 200ms ease;

}