/*
 * Mortgage Savings Calculator: design tokens
 * Direction: B "Home Stretch" palette/type/logo + C "Countdown" data-as-imagery.
 * Light only. There is deliberately no dark theme; do not add prefers-color-scheme overrides.
 * Source of truth: design/design-system.md (mirrors design/tokens.json).
 *
 * Fonts are self-hosted (owner decision, 2026-09-26). Load in <head>, before this file:
 * <link rel="preload" href="fonts/figtree-latin.woff2" as="font" type="font/woff2" crossorigin>
 * <link rel="preload" href="fonts/fraunces-latin.woff2" as="font" type="font/woff2" crossorigin>
 * <link rel="stylesheet" href="fonts/fonts.css">
 * Never load from Google Fonts. See design/fonts/ for the files and their OFL licences.
 */

:root {
  color-scheme: light;

  /* ---------- Colour: brand palette (approved, Direction B) ---------- */
  --msc-chimney: #2B2522;      /* warm near-black: text, headings */
  --msc-brick: #B4492F;        /* primary: buttons, links, key UI */
  --msc-oat: #F6F1EA;          /* page background */
  --msc-cream: #FFFDF9;        /* surfaces: cards, calculator panel, charts */
  --msc-sage: #3F6B4F;         /* savings / positive, "with overpayments" series */
  --msc-sage-tint: #DDE8DF;    /* savings fills, success bands, chart area */
  --msc-mustard: #E3A83B;      /* accent: payoff point, badges. NEVER text on light */
  --msc-pebble: #6B605A;       /* secondary text, form-control borders */

  /* ---------- Colour: supporting tints/shades (derived, verified) ---------- */
  --msc-brick-deep: #963A24;   /* primary hover/active, error text, text on brick-tint */
  --msc-brick-tint: #F7E4DC;   /* ERC note / error field background */
  --msc-brick-soft: #CB7F6C;   /* chart only: interest bars (Brick at ~70% on Cream, solid) */
  --msc-sage-deep: #30543D;    /* sage hover, savings text on sage-tint */
  --msc-mustard-tint: #FBEDCF; /* "tip" callout background, milestone halo */
  --msc-stone: #958980;        /* chart only: "without overpayments" line, hollow dots, disabled borders */
  --msc-line: #E6DDD1;         /* decorative dividers, card borders, chart gridlines */

  /* ---------- Colour: semantic roles (use these in components) ---------- */
  --color-bg: var(--msc-oat);
  --color-surface: var(--msc-cream);
  --color-surface-positive: var(--msc-sage-tint);
  --color-surface-caution: var(--msc-brick-tint);
  --color-surface-tip: var(--msc-mustard-tint);

  --color-text: var(--msc-chimney);
  --color-text-muted: var(--msc-pebble);
  --color-text-positive: var(--msc-sage);          /* on oat/cream */
  --color-text-positive-strong: var(--msc-sage-deep); /* on sage-tint */
  --color-text-caution: var(--msc-brick-deep);
  --color-text-on-primary: var(--msc-cream);
  --color-text-on-accent: var(--msc-chimney);      /* on mustard */

  --color-primary: var(--msc-brick);
  --color-primary-hover: var(--msc-brick-deep);
  --color-link: var(--msc-brick);
  --color-link-hover: var(--msc-brick-deep);
  --color-positive: var(--msc-sage);
  --color-positive-hover: var(--msc-sage-deep);
  --color-accent: var(--msc-mustard);

  --color-border: var(--msc-line);                 /* decorative only (<3:1) */
  --color-border-control: var(--msc-pebble);       /* inputs, checkboxes (>=3:1) */
  --color-border-disabled: var(--msc-stone);
  --color-error: var(--msc-brick-deep);
  --color-focus: var(--msc-chimney);

  /* Chart roles */
  --chart-surface: var(--msc-cream);
  --chart-baseline: var(--msc-stone);              /* without overpayments: 2px dashed */
  --chart-overpay: var(--msc-sage);                /* with overpayments: 3px solid */
  --chart-overpay-fill: var(--msc-sage-tint);
  --chart-principal: var(--msc-sage);
  --chart-interest: var(--msc-brick-soft);
  --chart-payoff: var(--msc-mustard);              /* always with chimney ring + text label */
  --chart-payoff-ring: var(--msc-chimney);
  --chart-grid: var(--msc-line);
  --chart-axis: var(--msc-pebble);
  --chart-label: var(--msc-chimney);
  --chart-label-muted: var(--msc-pebble);
  --chart-dot-on: var(--msc-pebble);
  --chart-dot-off: var(--msc-stone);

  /* ---------- Typography ---------- */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-number: var(--font-body); /* Figtree + tabular-nums (verified tnum in Google Fonts build v9) */
  --font-heading-variation: "SOFT" 100;
  --font-numeric-live: tabular-nums lining-nums;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Fluid type scale (ratio 1.2 at desktop, base 18px). min @ 360px, max @ 1280px */
  --text-result: clamp(2.5rem, 1.913rem + 2.61vw, 4rem);      /* 40 -> 64: live headline figure, Figtree 700 tnum */
  --text-display: clamp(2.25rem, 1.957rem + 1.3vw, 3rem);    /* 36 -> 48 */
  --text-h1: clamp(2rem, 1.804rem + 0.87vw, 2.5rem);          /* 32 -> 40 */
  --text-h2: clamp(1.625rem, 1.478rem + 0.65vw, 2rem);         /* 26 -> 32 */
  --text-h3: clamp(1.375rem, 1.277rem + 0.43vw, 1.625rem);    /* 22 -> 26 */
  --text-h4: clamp(1.1875rem, 1.139rem + 0.22vw, 1.3125rem);   /* 19 -> 21 */
  --text-lead: clamp(1.1875rem, 1.139rem + 0.22vw, 1.3125rem); /* 19 -> 21 */
  --text-body: 1.125rem;   /* 18 */
  --text-ui: 1rem;         /* 16: buttons, inputs, nav, table cells */
  --text-small: 0.9375rem; /* 15: captions, disclaimers */
  --text-micro: 0.8125rem; /* 13: chart axis labels, badges. Never for paragraphs */

  --leading-result: 1;
  --leading-display: 1.1;
  --leading-h1: 1.15;
  --leading-h2: 1.2;
  --leading-h3: 1.25;
  --leading-h4: 1.3;
  --leading-body: 1.6;
  --leading-ui: 1.4;
  --leading-small: 1.5;

  --tracking-result: -0.02em;
  --tracking-display: -0.015em;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --tracking-caps: 0.06em; /* only for the rare small-caps eyebrow label */

  --measure-prose: 68ch;

  /* ---------- Spacing (4px base) ---------- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  --gutter: clamp(1rem, 0.609rem + 1.74vw, 2rem); /* 16 -> 32 page side padding */
  --section-gap: clamp(3rem, 1.826rem + 5.22vw, 6rem);

  /* ---------- Layout ---------- */
  --container-prose: 45rem;   /* 720 */
  --container-content: 70rem; /* 1120 */
  --container-wide: 80rem;    /* 1280 */
  --tap-target-min: 2.75rem;  /* 44px */
  /* Breakpoints (for reference; CSS vars can't be used in @media):
     sm 480px | md 768px | lg 1024px | xl 1280px */

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---------- Borders ---------- */
  --border-hairline: 1px solid var(--color-border);
  --border-control: 1.5px solid var(--color-border-control);
  --border-width-focus: 3px;
  --focus-offset: 2px;

  /* ---------- Shadows (Chimney at low alpha; warm, never grey-blue) ---------- */
  --shadow-sm: 0 1px 2px rgb(43 37 34 / 0.06), 0 1px 1px rgb(43 37 34 / 0.04);
  --shadow-md: 0 2px 4px rgb(43 37 34 / 0.05), 0 8px 20px -6px rgb(43 37 34 / 0.12);
  --shadow-lg: 0 4px 8px rgb(43 37 34 / 0.05), 0 20px 40px -12px rgb(43 37 34 / 0.18);
  --shadow-sticky: 0 -6px 20px -8px rgb(43 37 34 / 0.2);

  /* ---------- Motion ---------- */
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --duration-number: 450ms;  /* count-up/down of live figures */
  --duration-chart: 600ms;   /* line draw / morph */
  --stagger-dot: 6ms;        /* dot field switch-off, per dot; cap total at 600ms */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-settle: cubic-bezier(0.34, 1.3, 0.64, 1); /* payoff dot / badge arrival only */

  /* ---------- Z-index ---------- */
  --z-sticky: 100;
  --z-header: 200;
  --z-tooltip: 300;
  --z-overlay: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-number: 0ms;
    --duration-chart: 0ms;
    --stagger-dot: 0ms;
  }
}