/* static/css/tokens.css
   Value layer — target PDF brand. Loaded FIRST on every page.
   Three tiers: primitives (--th-*) -> semantic -> component defaults.
   Components reference semantic/component tokens only; never a raw value.
   Fluid scales are Utopia-style, viewport 320->1240px (regenerate at
   utopia.fyi/type/calculator: base 18->20, ratio 1.2/1.25). */
:root{
  /* ---- primitives: brand (Brand guidelines.pdf, 2026-07-03) ---- */
  --th-beige-050:#f8f1e9; --th-beige-300:#cfc8c1;
  --th-green-400:#8a9282;  --th-green-700:#53544f;
  --th-blue-200:#90d5ff;   --th-blue-500:#6396ee;  --th-blue-900:#2f3273;
  --th-yellow:#fef351;     --th-orange:#ff8300;
  --th-ink:#353631;        --th-white:#ffffff;
  /* primitives: signal (confirmed assumptions) */
  --th-success:#4a9d6b;    --th-error:#de1529;

  /* ---- fonts ---- */
  --font-heading:'Ubuntu', system-ui, sans-serif;
  --font-body:'Urbanist', system-ui, sans-serif;

  /* ---- fluid type scale (rem + vw) ---- */
  --fs-2xs:clamp(0.651rem, 0.638rem + 0.065vw, 0.694rem);
  --fs-xs:clamp(0.781rem, 0.775rem + 0.033vw, 0.8rem);
  --fs-sm:clamp(0.938rem, 0.916rem + 0.109vw, 1rem);
  --fs-base:clamp(1.125rem, 1.081rem + 0.217vw, 1.25rem);
  --fs-md:clamp(1.35rem, 1.276rem + 0.370vw, 1.563rem);
  --fs-lg:clamp(1.62rem, 1.504rem + 0.579vw, 1.953rem);
  --fs-xl:clamp(1.944rem, 1.771rem + 0.865vw, 2.441rem);
  --fs-2xl:clamp(2.333rem, 2.082rem + 1.251vw, 3.052rem);
  --fs-3xl:clamp(2.799rem, 2.446rem + 1.766vw, 3.815rem);

  /* weight scale — single source of truth for font-weight */
  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  /* line-height scale */
  --lh-tight:1; --lh-snug:1.2; --lh-normal:1.4; --lh-relaxed:1.5;

  /* ---- fluid space scale (rem + vw) ---- */
  --space-3xs:clamp(0.25rem, 0.228rem + 0.109vw, 0.313rem);
  --space-2xs:clamp(0.5rem, 0.457rem + 0.217vw, 0.625rem);
  --space-xs:clamp(0.75rem, 0.685rem + 0.326vw, 0.938rem);
  --space-s:clamp(1rem, 0.913rem + 0.435vw, 1.25rem);
  --space-m:clamp(1.5rem, 1.370rem + 0.652vw, 1.875rem);
  --space-l:clamp(2rem, 1.826rem + 0.870vw, 2.5rem);
  --space-xl:clamp(3rem, 2.739rem + 1.304vw, 3.75rem);
  --space-2xl:clamp(4rem, 3.652rem + 1.739vw, 5rem);
  --space-3xl:clamp(6rem, 5.478rem + 2.609vw, 7.5rem);

  /* ---- semantic colors ---- */
  --color-bg:var(--th-beige-050);
  --color-surface:var(--th-white);
  --color-surface-dark:var(--th-blue-900);
  --color-text:var(--th-ink);
  --color-text-muted:color-mix(in srgb, var(--th-ink) 62%, var(--th-beige-050));
  --color-heading:var(--th-blue-900);
  --color-action:var(--th-blue-500);
  --color-action-hover:color-mix(in srgb, var(--th-blue-500) 86%, black);
  --color-on-action:var(--th-white);
  --color-selected-bg:var(--th-blue-200);
  --color-selected-border:var(--th-blue-500);
  --color-border:color-mix(in srgb, var(--th-beige-300) 55%, var(--th-white));
  --color-progress-track:color-mix(in srgb, var(--th-beige-300) 60%, var(--th-white));
  --color-progress-current:var(--th-blue-500);
  /* Tinted secondary button fill. Raw --th-blue-200 (#90d5ff) is too saturated at
     button scale, so it is pulled toward white. Resolves to ~#d9ecfb. */
  --color-action-tint:color-mix(in srgb, var(--th-blue-200) 45%, var(--th-white));
  /* Segmented-control track. Sits between --color-bg and --th-beige-300 so the
     white selected chip reads against it. Resolves to ~#f2ece5. */
  --color-track:color-mix(in srgb, var(--th-beige-300) 30%, var(--color-bg));
  --color-progress-answered:var(--th-success);
  --color-progress-skipped:var(--th-yellow);
  --color-error:var(--th-error);

  /* base-element semantics (links, text selection) */
  --color-link:var(--color-action);
  --color-link-hover:var(--color-action-hover);
  --color-selection-bg:var(--color-selected-bg);
  --color-selection-text:var(--color-text);

  /* homed legacy signal colors (compat had these as phantoms; brand values below) */
  --color-success:var(--th-success);
  --color-warning:var(--th-orange);
  --color-info:var(--th-blue-500);

  /* chart/survey-type colours — SINGLE source of truth (survey-colors.js reads these via getComputedStyle).
     Provisional palette (Lars 2026-07-08); hue-tuning is a later 1-line change. pulse=deep-blue, sense=light-blue, custom=orange. */
  --chart-pulse:var(--th-blue-900);
  --chart-sense:var(--th-blue-200);
  --chart-custom:var(--th-orange);
  /* Darkened steps for THIN marks (2px strokes, 1px rules, small dots).
     Every brand hue above is below 3:1 on the beige canvas and --chart-sense
     is 1.43:1 — invisible as a stroke. Validated together for contrast, CVD
     separation and normal-vision separation (timeline spec §9). Fills and
     chips keep the light originals, where the label carries the relief. */
  --chart-pulse-line:#2f3273;
  --chart-sense-line:#2f86b8;
  --chart-custom-line:#c25e00;

  /* ---- radius / motion / viewport ---- */
  --radius-sm:16px; --radius-md:24px; --radius-lg:32px; --radius-pill:100px;
  --radius-circle:50%;
  /* Tight corners — the scale above starts at 16px, too soft for a 36px control.
     6px is the button/chip corner, 8px the segmented track (chip + 1px inset). */
  --radius-xs:6px; --radius-s:8px;

  /* Light card elevation — subtle, neutral (ink-based); works on the beige canvas. */
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--th-ink) 5%, transparent),
                 0 4px 12px color-mix(in srgb, var(--th-ink) 6%, transparent);

  /* Selected-chip elevation — tighter than --shadow-card. */
  --shadow-chip: 0 1px 2px color-mix(in srgb, var(--th-ink) 12%, transparent);

  --tap-min:44px;
  --dur-quick:.16s; --dur-move:.30s; --dur-slow:.8s; --ease:cubic-bezier(.4,0,.2,1);
  --blur:10px;                 /* keep the name — static/js/scatter.js reads --blur */
  --opacity-muted:0.7;
  --opacity-faint:0.05;
  --topbar-height:68px;        /* layout token for the fixed-topbar shell */

  /* homed: --smallcorner/--bigcorner/--corner/--font-small are NOT re-added here —
     they already have brand homes (--radius-sm 16px, --radius-lg 32px, --fs-xs);
     consumers re-point to those as they migrate off compat.css */

  /* map layer defaults (read by dashboard/scatter map JS) */
  --map-base-weight:0.5; --map-base-opacity:0.8; --map-base-fill-opacity:0.2; --map-base-fill-blur:0px;
  --map-highlight-weight:3; --map-highlight-opacity:0; --map-highlight-fill-opacity:0.2; --map-highlight-fill-blur:3px;
}

/* ---- vertical thresholds: compress fluid tokens so a fixed-viewport
        screen still fits (used by the survey shell in a later plan) ---- */
@media (max-height:700px){ :root{ --space-m:0.75rem; --fs-xl:1.75rem; } }
@media (max-height:560px){ :root{ --space-m:0.5rem;  --fs-xl:1.5rem; } }
@media (orientation:landscape) and (max-height:500px){ :root{ --space-m:0.375rem; } }