/* =============================================================================
   PHYSICIAN FREEDOM SYSTEM — DESIGN TOKENS (Baseline Design System)
   -----------------------------------------------------------------------------
   This is the single source of truth for the brand identity. Every page and
   every calculator inherits from these tokens. Change a value here and it
   propagates across the entire suite. Do NOT hard-code colors/spacing in
   components — always reference a token below.

   Brand: premium, trustworthy, calm, clinically precise.
   Palette logic:
     - Ink/Navy   -> authority, trust, "private banking" feel
     - Emerald    -> money + health + growth (the brand's signature accent)
     - Gold       -> premium highlight, reserved for key moments
     - Slate/Neutral -> calm, readable surfaces
   ========================================================================== */

:root {
  /* ---- Brand color ramps ---------------------------------------------- */
  --ink-900: #0a1c30;
  --ink-800: #0b2a4a;
  --ink-700: #103456;
  --ink-600: #1c4570;

  --emerald-600: #0e9f6e;
  --emerald-500: #14b88a;
  --emerald-400: #34d3a6;
  --emerald-100: #d6f5ea;

  --gold-500: #c9a24b;
  --gold-300: #ffe9b0;

  /* ---- Neutrals (slate) ----------------------------------------------- */
  --slate-900: #0f172a;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50:  #f8fafc;
  --white:     #ffffff;

  /* ---- Semantic feedback ---------------------------------------------- */
  --good:   #0e9f6e;
  --good-bg:#e7f8f1;
  --warn:   #c98a1b;
  --warn-bg:#fdf3e2;
  --bad:    #d8492f;
  --bad-bg: #fcebe7;
  --info:   #2563a8;
  --info-bg:#e9f1fb;

  /* ---- Semantic roles (use these in components) ----------------------- */
  --brand:           var(--emerald-600);
  --brand-strong:    var(--emerald-500);
  --brand-ink:       var(--ink-800);
  --accent:          var(--gold-500);

  --bg-app:          var(--slate-50);
  --bg-surface:      var(--white);
  --bg-elevated:     var(--white);
  --bg-sunken:       var(--slate-100);

  --text-strong:     var(--slate-900);
  --text-body:       var(--slate-700);
  --text-muted:      var(--slate-500);
  --text-onbrand:    var(--white);

  --border:          var(--slate-200);
  --border-strong:   var(--slate-300);

  /* ---- Brand gradients ------------------------------------------------ */
  --grad-brand: linear-gradient(135deg, var(--emerald-600) 0%, var(--ink-800) 100%);
  --grad-ink:   linear-gradient(160deg, var(--ink-800) 0%, var(--ink-900) 100%);
  --grad-sheen: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0));

  /* ---- Typography ----------------------------------------------------- */
  /* Self-contained system stacks (no web-font dependency -> works offline). */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "SFMono-Regular", "Cascadia Code", "Consolas", monospace;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.25rem;   /* 36 */
  --fs-3xl:  3rem;      /* 48 */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

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

  /* ---- Radius --------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* ---- Elevation ------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(11,42,74,.06);
  --shadow-sm: 0 2px 8px rgba(11,42,74,.07);
  --shadow-md: 0 10px 30px rgba(11,42,74,.10);
  --shadow-lg: 0 24px 60px rgba(11,42,74,.16);
  --ring-brand: 0 0 0 4px rgba(20,184,138,.18);

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;

  /* ---- Layout --------------------------------------------------------- */
  --container: 1140px;
  --container-narrow: 760px;
  --header-h: 68px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}