/* =============================================
   FINIT — Design System Tokens
   ============================================= */

:root {
  /* ── Brand Colors ──────────────────────────── */
  --brand-navy:       #071e36;
  --brand-teal:       #0b6b63;
  --brand-teal-light: #1a8e82;
  --brand-accent:     #0fb9a8;
  --brand-accent-glow: #1dd5c5;

  /* ── Neutrals ──────────────────────────────── */
  --white:       #ffffff;
  --off-white:   #f6f9f9;
  --soft-bg:     #f4f7f9;
  --border:      rgba(7, 30, 54, 0.08);
  --border-mid:  rgba(7, 30, 54, 0.12);

  /* ── Text ──────────────────────────────────── */
  --text-primary:   #071e36;
  --text-secondary: #4a5a6a;
  --text-muted:     #7d9996;
  --text-on-dark:   rgba(255, 255, 255, 0.92);
  --text-on-dark-muted: rgba(255, 255, 255, 0.65);

  /* ── Typography ────────────────────────────── */
  --font-body:    'Heebo', sans-serif;
  --font-heading: 'Frank Ruhl Libre', serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   800;
  --fw-heavy:   900;

  /* Fluid type scale */
  --text-xs:   0.78rem;
  --text-sm:   0.88rem;
  --text-base: 1rem;
  --text-md:   1.08rem;
  --text-lg:   clamp(1.15rem, 1.5vw, 1.25rem);
  --text-xl:   clamp(1.4rem, 2vw, 1.8rem);
  --text-2xl:  clamp(1.85rem, 3vw, 2.4rem);
  --text-3xl:  clamp(2.2rem, 4vw, 3rem);
  --text-4xl:  clamp(2.6rem, 4.5vw, 3.8rem);

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── Spacing Scale ─────────────────────────── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-section: clamp(4rem, 8vw, 7rem);

  /* ── Border Radius ─────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* ── Shadows ───────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 16px 40px rgba(0, 0, 0, 0.14);
  --shadow-xl:  0 24px 56px rgba(0, 0, 0, 0.18);

  /* ── Transitions ───────────────────────────── */
  --ease-out:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.4s;

  /* ── Gradients ─────────────────────────────── */
  --gradient-brand:  linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-teal) 100%);
  --gradient-dark:   linear-gradient(160deg, #071e36 0%, #0b3d39 55%, #0f5c55 100%);
  --gradient-accent: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-accent) 100%);

  /* ── Breakpoints (documented, not usable in CSS) ─── */
  /* Mobile:    480px  */
  /* Tablet:    768px  */
  /* Desktop:   1024px */
  /* Wide:      1280px */

  /* ── Calculator-specific aliases ───────────── */
  --calc-navy:      var(--brand-navy);
  --calc-teal:      var(--brand-teal);
  --calc-teal-soft: #e8f5f3;
  --calc-white:     var(--white);
  --calc-text:      var(--text-secondary);
  --calc-accent:    var(--brand-accent);
  --calc-soft:      var(--soft-bg);
  --calc-border:    var(--border);
}

/* ── Reduced Motion ────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}