/* variables.css — design tokens: color, spacing, typography, radii, motion, elevation */

:root {
  /* ---- neutral palette (90% of the surface; separation via light shifts, not colour) ---- */
  --c-canvas: #fcfcfc;
  --c-surface: #ffffff;
  --c-surface-sunk: #f7f7f8;
  --c-surface-raise: #ffffff;

  --c-ink: #18181b;
  --c-ink-soft: #5f6368;
  --c-ink-faint: #9ca3af;

  --c-hair: #eceef1;
  --c-hair-strong: #d9dde3;

  /* ---- single restrained accent (~2%): editorial indigo / muted cobalt ---- */
  --c-accent: #4d56c6;
  --c-accent-deep: #3a429c;
  --c-accent-soft: #9098e2;
  --c-accent-wash: #eef0fb;
  --c-accent-ring: rgba(77, 86, 198, 0.30);

  /* ---- understated status (muted editorial tones + soft washes) ---- */
  --c-pos: #43a972;
  --c-neg: #e0685f;
  --c-warn: #dca73a;
  --c-pos-wash: #eef5f1;
  --c-neg-wash: #f9f0f0;
  --c-warn-wash: #f7f2e9;

  /* ---- interpretation bands (lighter, breathable; clear low/avg/strong separation) ---- */
  --c-band-low: #e0685f;
  --c-band-avg: #dca73a;
  --c-band-strong: #43a972;

  /* ---- muted notepad-yellow callout (leverage + band chip) ---- */
  --c-note: #dca73a;
  --c-note-line: #ead08a;
  --c-note-wash: #fbf8e8;

  /* ---- type ---- */
  --f-display: "Bricolage Grotesque", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "Lilex", "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --t-xxl: clamp(2.6rem, 5.2vw, 3.9rem);
  --t-xl: clamp(1.75rem, 3vw, 2.4rem);
  --t-lg: 1.3rem;
  --t-md: 1.0rem;
  --t-sm: 0.875rem;
  --t-xs: 0.75rem;
  --t-num: clamp(1.8rem, 3vw, 2.2rem);

  --w-reg: 400;
  --w-med: 500;
  --w-semi: 600;
  --w-bold: 700;

  --lh-tight: 1.08;
  --lh-body: 1.6;

  /* ---- spacing scale (4px base) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6.5rem;

  /* ---- structure ---- */
  --shell: 1140px;
  --shell-narrow: 760px;
  --r-sm: 7px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --hair: 1px solid var(--c-hair);
  --hair-strong: 1px solid var(--c-hair-strong);

  /* ---- premium layered elevation (depth replaces contrast) ---- */
  --shadow-flat: 0 1px 2px rgba(24, 24, 27, 0.04);
  --shadow-rest: 0 1px 1px rgba(24,24,27,0.03), 0 2px 6px -3px rgba(24,24,27,0.07);
  --shadow-lift: 0 1px 1px rgba(24,24,27,0.04), 0 12px 30px -16px rgba(24,24,27,0.16);
  --shadow-pop: 0 2px 4px rgba(24,24,27,0.04), 0 24px 54px -24px rgba(24,24,27,0.22);
  --shadow-inset: inset 0 0 0 1px rgba(24,24,27,0.035);

  /* ---- motion ---- */
  --ease: cubic-bezier(0.22, 0.7, 0.22, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 130ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
}