/* ============================================================
   CalcVerse Design System v1.0 — CSS Variables
   Source of truth: calcverse-design-system-v1
   NEVER hardcode hex values anywhere — always use these vars.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap&subset=latin');

:root {

  /* ── Purple primary ramp ── */
  --color-purple-50:  #F5F3FF;
  --color-purple-100: #EDE9FE;
  --color-purple-200: #DDD6FE;
  --color-purple-300: #C4B5FD;
  --color-purple-400: #A78BFA;
  --color-purple-500: #8B5CF6;
  --color-purple-600: #7C3AED;
  --color-purple-700: #6D28D9;  /* PRIMARY */
  --color-purple-800: #5B21B6;
  --color-purple-900: #4C1D95;
  --color-purple-950: #1E1B4B;

  /* ── Neutrals ── */
  --color-gray-50:  #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-700: #374151;
  --color-gray-900: #111827;
  --color-white:    #FFFFFF;

  /* ── Semantic (BMI bands, loan risk, result states) ── */
  --color-success-bg:   #D1FAE5;
  --color-success-text: #065F46;
  --color-warning-bg:   #FEF3C7;
  --color-warning-text: #92400E;
  --color-danger-bg:    #FEE2E2;
  --color-danger-text:  #991B1B;
  --color-info-bg:      #EFF6FF;
  --color-info-text:    #1E40AF;

  /* ── Typography ── */
  --font-ui:   'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;

  /* ── Spacing (8px base grid — use ONLY these values) ── */
  --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;

  /* ── Border radius ── */
  --radius-sm:   4px;      /* badges, tags */
  --radius-md:   6px;      /* inputs, buttons, tabs */
  --radius-lg:   8px;      /* cards, result panel */
  --radius-xl:   12px;     /* modals, large panels */
  --radius-pill: 9999px;   /* trust pills */

  /* ── Shadows ── */
  --shadow-none:  none;
  --shadow-focus: 0 0 0 3px rgba(109, 40, 217, 0.25);

  /* ── Transitions ── */
  --transition-fast: 100ms ease;
  --transition-base: 150ms ease;

  /* ── Layout ── */
  --content-width: 720px;
  --nav-height: 64px;
}