/* MortgageMath US — design tokens. Every component in app.css uses these variables only.
   "Bright blueprint": white surfaces, faint blueprint grid #EEF4FF, royal blue #1D4ED8, mint #10B981. */

@font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("../fonts/sora-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("../fonts/plex-sans-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/plex-mono-500-latin.woff2") format("woff2"); }
/* Size-adjusted local fallbacks keep layout stable while the web fonts load (CLS). */
@font-face { font-family: "Sora Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 116.18%; ascent-override: 83.49%; descent-override: 24.96%; line-gap-override: 0%; }
@font-face { font-family: "Plex Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 101.57%; ascent-override: 100.92%; descent-override: 27.07%; line-gap-override: 0%; }

:root {
  /* Colour — surfaces */
  --c-bg: #ffffff;
  --c-bg-soft: #f7faff;
  --c-bg-tint: #f2f6ff;
  --c-grid: #eef4ff;
  --c-surface: #ffffff;
  --c-glass: rgb(255 255 255 / .72);
  --c-glass-strong: rgb(255 255 255 / .88);
  --c-glass-border: rgb(29 78 216 / .11);
  --c-line: #e3eaf7;
  --c-line-strong: #cbd7ee;
  /* Colour — text */
  --c-ink: #0b1a3a;
  --c-text: #1f2a44;
  --c-muted: #4b5875;
  --c-subtle: #5f6c88;
  /* Colour — brand */
  --c-primary: #1d4ed8;
  --c-primary-hover: #1e40af;
  --c-primary-ink: #1e3a8a;
  --c-primary-50: #eef4ff;
  --c-primary-100: #dbe7ff;
  --c-primary-200: #bcd2ff;
  --c-primary-300: #93b4f5;
  --c-accent: #10b981;
  --c-accent-ink: #047857;
  --c-accent-50: #ecfdf5;
  --c-accent-100: #d1fae5;
  --c-accent-300: #6ee7b7;
  --c-violet: #7c3aed;
  --c-violet-50: #f4efff;
  --c-amber: #b45309;
  --c-amber-50: #fff6e5;
  --c-sky: #0369a1;
  --c-sky-50: #e8f6ff;
  --c-warn: #b45309;
  --c-warn-50: #fff7ed;
  --c-danger: #b91c1c;
  --c-on-primary: #ffffff;
  /* Data visualisation (5-step sequential blue, categorical) */
  --c-seq-1: #e4edff;
  --c-seq-2: #c3d6ff;
  --c-seq-3: #8fb1fb;
  --c-seq-4: #4d7ff0;
  --c-seq-5: #1d4ed8;
  --c-cat-1: #1d4ed8;
  --c-cat-2: #10b981;
  --c-cat-3: #8b5cf6;
  --c-cat-4: #f59e0b;
  --c-cat-5: #0ea5e9;
  /* Gradients */
  --g-wash: radial-gradient(60% 80% at 85% 0%, rgb(147 180 245 / .32), transparent 70%), radial-gradient(50% 70% at 0% 100%, rgb(110 231 183 / .22), transparent 70%);
  --g-quick: linear-gradient(135deg, #eef4ff 0%, #ecfdf5 55%, #f4efff 100%);
  --g-primary: linear-gradient(135deg, #2563eb 0%, #1d4ed8 60%, #1e40af 100%);
  --g-sweep: conic-gradient(from var(--angle), transparent 0 55%, #93b4f5 70%, #10b981 82%, transparent 92%);
  --grid-size: 32px;
  --g-grid: linear-gradient(var(--c-grid) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size), linear-gradient(90deg, var(--c-grid) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size);

  /* Type */
  --f-display: "Sora", "Sora Fallback", ui-sans-serif, system-ui, sans-serif;
  --f-body: "IBM Plex Sans", "Plex Fallback", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --t-xs: .8125rem;
  --t-sm: .875rem;
  --t-base: clamp(1rem, .97rem + .14vw, 1.0625rem);
  --t-lg: clamp(1.125rem, 1.08rem + .22vw, 1.25rem);
  --t-xl: clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
  --t-2xl: clamp(1.5rem, 1.3rem + .9vw, 2rem);
  --t-3xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --t-4xl: clamp(2.25rem, 1.55rem + 2.9vw, 3.5rem);
  --t-display: clamp(3.5rem, 2.6rem + 3.6vw, 5.5rem);
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.65;
  --measure: 68ch;

  /* Space — 8px scale */
  --s-0: 4px;
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;
  --s-10: 80px;
  --s-12: 96px;
  --s-16: 128px;
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 68px;

  /* Shape */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Elevation — layered soft shadows */
  --sh-1: 0 1px 2px rgb(11 26 58 / .05), 0 1px 1px rgb(11 26 58 / .03);
  --sh-2: 0 1px 2px rgb(11 26 58 / .04), 0 6px 16px -6px rgb(29 78 216 / .14), 0 18px 36px -18px rgb(11 26 58 / .12);
  --sh-3: 0 2px 4px rgb(11 26 58 / .04), 0 14px 32px -10px rgb(29 78 216 / .2), 0 32px 64px -28px rgb(16 185 129 / .2);
  --sh-glow: 0 0 0 4px rgb(29 78 216 / .14), 0 8px 24px -6px rgb(29 78 216 / .35);
  --ring: 0 0 0 3px #fff, 0 0 0 5px var(--c-primary);

  /* Blur */
  --blur-1: 8px;
  --blur-2: 16px;
  --blur-3: 40px;

  /* Motion */
  --dur-1: 150ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 500ms;
  --dur-5: 900ms;
  --dur-draw: 1200ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --stagger: 60ms;
  --rise: 16px;

  /* Layers */
  --z-header: 50;
  --z-sheet: 70;
  --z-palette: 80;
  --z-consent: 60;

  color-scheme: light;
}

/* Optional dark theme (toggle only; light stays the default). */
:root[data-theme="dark"] {
  --c-bg: #0b1220;
  --c-bg-soft: #0e1729;
  --c-bg-tint: #101b31;
  --c-grid: rgb(148 170 255 / .07);
  --c-surface: #111b30;
  --c-glass: rgb(17 27 48 / .72);
  --c-glass-strong: rgb(17 27 48 / .9);
  --c-glass-border: rgb(147 180 245 / .14);
  --c-line: #1e2b45;
  --c-line-strong: #2a3a5c;
  --c-ink: #f2f6ff;
  --c-text: #d6dff0;
  --c-muted: #a8b5d1;
  --c-subtle: #97a5c4;
  --c-primary: #7aa2ff;
  --c-primary-hover: #a3c0ff;
  --c-primary-ink: #c7d8ff;
  --c-primary-50: #142246;
  --c-primary-100: #1a2c58;
  --c-primary-200: #24396f;
  --c-accent: #34d399;
  --c-accent-ink: #6ee7b7;
  --c-accent-50: #0f2a24;
  --c-accent-100: #12382f;
  --c-violet-50: #221a3d;
  --c-amber-50: #2e2210;
  --c-sky-50: #0f2536;
  --c-warn-50: #2e2210;
  --c-on-primary: #0b1220;
  --c-seq-1: #1a2a4f;
  --c-seq-2: #233c74;
  --c-seq-3: #3156a6;
  --c-seq-4: #4d7ff0;
  --c-seq-5: #8fb1fb;
  --g-quick: linear-gradient(135deg, #14214a 0%, #0f2a24 60%, #221a3d 100%);
  --g-primary: linear-gradient(135deg, #7aa2ff 0%, #5b8bff 100%);
  --sh-2: 0 1px 2px rgb(0 0 0 / .3), 0 12px 28px -12px rgb(0 0 0 / .5);
  --sh-3: 0 2px 4px rgb(0 0 0 / .3), 0 24px 48px -20px rgb(0 0 0 / .6);
  --ring: 0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-primary);
  color-scheme: dark;
}

@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --fill { syntax: "<percentage>"; inherits: true; initial-value: 0%; }