/*
 * Design tokens (DESIGN-SYSTEM.md §9.4, Direction A: Private Bank).
 *
 * This is the ONLY stylesheet allowed to contain a raw colour value. Two layers:
 *
 *   1. PRIMITIVES (--neutral-*, --brand-*, --accent-*) are the raw palettes.
 *   2. SEMANTIC tokens (--bg, --ink, --action, ...) map those primitives onto
 *      roles. Components read ONLY the semantic layer, so a palette change is
 *      one edit here.
 *
 * test/no-raw-colors.test.js enforces the first rule; test/tokens.test.js
 * measures every text and graphic pair against its WCAG floor.
 */

/* ------------------------------------------------------------------ fonts */
/* Fraunces and Figtree are self-hosted from Fontsource (SIL OFL, see LICENSES/). */

/* Fraunces variable (opsz 9-144, wght 100-900), latin subset. */
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- 1. primitives: warm neutrals ---- */
  --neutral-0: #ffffff;
  --neutral-50: #fbf8f2;
  --neutral-100: #f3ede2;
  --neutral-200: #e8e1d3;
  --neutral-300: #d6ccbb;
  --neutral-400: #b3a994;
  --neutral-500: #8a7f6e;
  --neutral-600: #675d50;
  --neutral-700: #4a4238;
  --neutral-800: #302a24;
  --neutral-900: #1f1a17;

  /* ---- 1. primitives: forest (brand) ---- */
  --brand-50: #eef4f0;
  --brand-100: #e4ede7;
  --brand-200: #c4d8cb;
  --brand-300: #94b7a3;
  --brand-400: #5e8a72;
  --brand-500: #3f6d56;
  --brand-600: #2e5c47;
  --brand-700: #1f4d3a;
  --brand-800: #173b2c;
  --brand-900: #0f2a1f;

  /* ---- 1. primitives: brass (accent) ---- */
  --accent-50: #fbf5ea;
  --accent-100: #f4e7cb;
  --accent-200: #e8cf9c;
  --accent-300: #d6ae66;
  --accent-400: #be8e45;
  --accent-500: #a8742a;
  --accent-600: #8c5f20;
  --accent-700: #7a5216;
  --accent-800: #5e3f12;
  --accent-900: #3d290b;

  /* ---- 1. primitives: data viz ---- */
  --blue-600: #3b6790;
  --amber-warn: #6b4e00;
  --red-600: #a23a2f;
  --green-600: #2d6a4a;

  /* ---- 2. semantic colour (components read these only) ---- */
  --bg: var(--neutral-50);
  --surface: var(--neutral-0);
  --surface-2: var(--neutral-100);
  --ink: var(--neutral-900);
  --ink-2: var(--neutral-700);
  --muted: var(--neutral-600);
  --hairline: rgb(31 26 23 / 10%);
  --hairline-strong: rgb(31 26 23 / 16%);
  --inner-highlight: rgb(255 255 255 / 80%);
  --brand: var(--brand-700);
  --brand-tint: var(--brand-100);
  --link: var(--brand-600);
  --action: var(--brand-700);
  --action-hover: var(--brand-800);
  --action-ink: var(--neutral-50);
  --action-ink-soft: rgb(251 248 242 / 15%);
  --highlight: var(--accent-500);
  --highlight-ink: var(--accent-700);
  --highlight-band: rgb(168 116 42 / 20%);
  --success: var(--green-600);
  --success-tint: #eaf3ee;
  --error: var(--red-600);
  --warn-ink: var(--amber-warn);
  --warn-bg: var(--accent-50);
  --focus: #ffdd00;
  --input-border: #7a6f60;
  /* 3:1 edge for unselected cards and chips (WCAG 1.4.11): neutral-500 on surface and bg. */
  --control-edge: var(--neutral-500);
  --disabled-bg: var(--neutral-200);
  --disabled-ink: var(--neutral-600);

  /* ---- chart tokens (charts.js reads these at paint time) ---- */
  --chart-low: var(--neutral-600);
  --chart-median: var(--brand-700);

  /* ---- data viz: sequential ramp (income band) and categorical set ---- */
  --viz-seq-1: #6f957f;
  --viz-seq-2: var(--brand-400);
  --viz-seq-3: var(--brand-500);
  --viz-seq-4: var(--brand-600);
  --viz-seq-5: var(--brand-700);
  --viz-cat-1: var(--brand-700);
  --viz-cat-2: var(--accent-500);
  --viz-cat-3: var(--blue-600);
  --viz-cat-4: var(--neutral-500);

  /* ---- elevation 0-3: ink-tinted, stacked, very diffused ---- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgb(31 26 23 / 4%), 0 2px 8px rgb(31 26 23 / 4%);
  --elev-2: 0 1px 2px rgb(31 26 23 / 4%), 0 8px 24px rgb(31 26 23 / 6%);
  --elev-3: 0 2px 4px rgb(31 26 23 / 3%), 0 16px 40px rgb(31 26 23 / 7%),
    0 40px 80px rgb(31 26 23 / 5%);

  /* ---- type families ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif;
  /* Optical size for display setting: use as font-variation-settings: "opsz" var(--opsz-display). */
  --opsz-display: 144;

  /* ---- fluid type: clamp() from 390px (min) to 1280px (max) ----
     Each token is  clamp(min, min + delta * ((100vw - 390px) / 890), max). */
  --fs-small: 16px;
  --fs-body: clamp(18px, calc(18px + 1 * ((100vw - 390px) / 890)), 19px);
  --fs-lead: clamp(20px, calc(20px + 2 * ((100vw - 390px) / 890)), 22px);
  --fs-h3: clamp(22px, calc(22px + 2 * ((100vw - 390px) / 890)), 24px);
  --fs-h2: clamp(28px, calc(28px + 6 * ((100vw - 390px) / 890)), 34px);
  --fs-h1: clamp(36px, calc(36px + 16 * ((100vw - 390px) / 890)), 52px);
  --fs-display: clamp(52px, calc(52px + 52 * ((100vw - 390px) / 890)), 104px);

  --lh-body: 1.6;
  --lh-small: 1.5;
  --lh-lead: 1.5;
  --lh-h: 1.2;
  --lh-h1: 1.1;
  --lh-display: 1;

  --tracking-display: -0.03em;
  --measure: 65ch;

  /* ---- space ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Section rhythm: the gap between two sections. 48px at 390px, 112px from
     1280px up. styles.css gives each section half of it. */
  --section-y: clamp(48px, calc(48px + 64 * ((100vw - 390px) / 890)), 112px);

  /* ---- shape ---- */
  --r-outer: 24px;
  --bezel: 8px;
  --r-inner: calc(var(--r-outer) - var(--bezel));
  --r-pill: 999px;
  --radius-input: 10px;
  --radius-card: 16px;

  --control-h: 52px;
  --tap: 48px;
  --icon-circle: 32px;

  --container: 1120px;
  --reading: 680px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 400ms;
  --dur-4: 700ms;
  --reveal-distance: 16px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
  }
}