/* ==========================================================================
   Design Tokens — Raisin Journey Case Study
   Typography: Inter (matches vipulsaxena.com portfolio)
   Color: neutral executive base + Raisin Blue as the single accent.
   ========================================================================== */

:root {
  /* ---- Color: executive-neutral base ---- */
  --ink: #12130f;
  --ink-soft: #34362f;
  --paper: #faf9f6;
  --paper-dim: #f1efe9;
  --line: #e3e0d7;
  --line-strong: #c9c5b8;
  --muted: #75725f;

  /* ---- Color: Raisin Blue accent ---- */
  --accent: #3096ff;
  --accent-ink: #0a2540;
  --accent-soft: #e4f1ff;
  --accent-dim: #7fbbff;

  /* ---- Category colors (from Web Dashboard color system) ---- */
  --cat-savings: #3096ff;
  --cat-invest: #d98c3d;
  --cat-retire: #3f9a6b;

  /* ---- Signal colors ---- */
  --good: #3f9a6b;
  --warn: #d98c3d;
  --bad: #c0553f;

  /* ---- Track surfaces ---- */
  --enablement-surface: var(--accent-ink);
  --enablement-surface-text: var(--paper);
  --enablement-surface-muted: #b9cfe6;
  --enablement-surface-accent: var(--accent);
  --enablement-surface-stat: #8fd4b0;
  --enablement-surface-line: rgba(255, 255, 255, 0.16);

  /* ---- Dark surfaces (used for hero/section-break blocks) ---- */
  --dark: #0b0e14;
  --dark-soft: #171b24;
  --on-dark: #f4f2ec;
  --on-dark-muted: #9a9c8f;

  /* ---- Typography ---- */
  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.75rem;
  --fs-xl: 2.5rem;
  --fs-2xl: 3.5rem;
  --fs-3xl: 5rem;
  --fs-4xl: 7rem;

  /* ---- Spacing (8pt-derived, rem) ---- */
  --sp-micro: 0.25rem;
  --sp-xs: 0.5rem;
  --sp-sm: 0.875rem;
  --sp-md: 1.5rem;
  --sp-lg: 2.5rem;
  --sp-xl: 4rem;
  --sp-2xl: 6rem;
  --sp-3xl: 9rem;

  /* ---- Shape ---- */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.75rem;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;

  /* ---- Layout ---- */
  --container: 76rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

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