/* ============================================================
   VIREON CAPITAL — Design Tokens
   Single source of truth for color, type, spacing, motion.
   Light mode is default; [data-theme="dark"] overrides colors.
   ============================================================ */

:root {
  /* ---- Brand palette ---- */
  --navy-900: #0A1628;
  --navy-800: #0E1D34;
  --navy-700: #142542;
  --royal-600: #1E4FD8;
  --royal-500: #3563E9;
  --royal-400: #5B82F0;
  --emerald-600: #0C9760;
  --emerald-500: #0FA968;
  --emerald-400: #2FC383;

  /* ---- Semantic risk indicators ---- */
  --risk-low: #0FA968;
  --risk-medium: #E0A215;
  --risk-high: #D8543C;

  /* ---- Neutral ramp ---- */
  --white: #FFFFFF;
  --soft-white: #F7F9FC;
  --gray-50: #EEF2F8;
  --gray-100: #E2E8F2;
  --gray-200: #CBD5E4;
  --gray-300: #A7B4C8;
  --gray-400: #7C8AA3;
  --gray-500: #5A6884;
  --gray-600: #3F4C66;
  --charcoal: #12161F;
  --charcoal-card: #1A2030;
  --charcoal-elev: #222A3C;

  /* ---- Light theme surface + text tokens ---- */
  --bg: var(--soft-white);
  --bg-alt: var(--white);
  --surface: var(--white);
  --surface-2: var(--gray-50);
  --surface-inset: var(--gray-50);
  --text: #1B2333;
  --text-soft: #45526B;
  --text-muted: #6B7890;
  --border: rgba(20, 37, 66, 0.10);
  --border-strong: rgba(20, 37, 66, 0.16);

  --brand: var(--navy-900);
  --brand-2: var(--royal-600);
  --accent: var(--emerald-500);
  --accent-ink: #073D28;
  --link: var(--royal-600);

  --hero-grad: radial-gradient(120% 120% at 78% 12%, rgba(30,79,216,0.18) 0%, rgba(10,22,40,0) 55%),
               linear-gradient(158deg, #0A1628 0%, #10254A 60%, #0C1A34 100%);
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-blur: 16px;

  --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.06), 0 2px 8px rgba(10, 22, 40, 0.05);
  --shadow-md: 0 6px 18px rgba(10, 22, 40, 0.08), 0 2px 6px rgba(10, 22, 40, 0.05);
  --shadow-lg: 0 24px 48px -16px rgba(10, 22, 40, 0.22), 0 8px 20px -12px rgba(10, 22, 40, 0.12);
  --shadow-emerald: 0 12px 28px -10px rgba(15, 169, 104, 0.45);

  /* ---- Type ---- */
  --font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step-hero: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --step-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --step-h2: clamp(1.6rem, 1.25rem + 1.7vw, 2.6rem);
  --step-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem);
  --step-lede: clamp(1.05rem, 1rem + 0.35vw, 1.3rem);
  --step-body: 1.0625rem;
  --step-sm: 0.9375rem;
  --step-xs: 0.8125rem;

  --lh-tight: 1.1;
  --lh-snug: 1.28;
  --lh-body: 1.65;

  /* ---- Spacing scale (8px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
  --container: 1200px;
  --container-wide: 1320px;
  --container-narrow: 760px;

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur-mid: 420ms;
  --dur-slow: 620ms;

  --nav-h: 76px;
  --z-nav: 100;
  --z-float: 90;
  --z-modal: 200;
}

[data-theme="dark"] {
  --bg: var(--charcoal);
  --bg-alt: #0E121B;
  --surface: var(--charcoal-card);
  --surface-2: var(--charcoal-elev);
  --surface-inset: #151B29;
  --text: #EAF0FA;
  --text-soft: #B4C0D6;
  --text-muted: #8593AD;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --brand: #EAF0FA;
  --brand-2: var(--royal-400);
  --accent: var(--emerald-400);
  --accent-ink: #04160E;
  --link: var(--royal-400);

  --hero-grad: radial-gradient(120% 120% at 80% 8%, rgba(30,79,216,0.28) 0%, rgba(10,22,40,0) 58%),
               linear-gradient(160deg, #0B1220 0%, #10233F 55%, #0A1424 100%);
  --glass-bg: rgba(26, 32, 48, 0.66);
  --glass-border: rgba(255, 255, 255, 0.10);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 28px 54px -18px rgba(0, 0, 0, 0.7), 0 10px 24px -14px rgba(0, 0, 0, 0.5);
  --shadow-emerald: 0 12px 30px -10px rgba(15, 169, 104, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-mid: 1ms;
    --dur-slow: 1ms;
  }
}