:root{
  /* primitives: brand tones */
  --mist:#E6ECEF;
  --frost:#F5F7F8;
  --stone:#556E7F;
  --stone-ink:#4B6272;
  --dusk:#1E2B34;
  --ink:#17222A;
  --lamp:#E8A93C;
  --white:#FFFFFF;

  /* primitives: stone tonal scale (hue 238) */
  --stone-50:#F5F7F8;
  --stone-100:#E9EDF0;
  --stone-200:#D8DFE4;
  --stone-300:#BECBD4;
  --stone-400:#9DB1BF;
  --stone-500:#7E96A6;
  --stone-600:#5E7788;
  --stone-700:#556E7F;
  --stone-800:#405360;
  --stone-900:#34424B;
  --stone-950:#222A30;

  /* primitives: neutral text and lines */
  --slate-text:#4A5C68;
  --line-soft:#C3CED5;
  --line-strong:#556E7F;
  --raised-dark:#26353F;

  /* primitives: semantic (always paired with an icon glyph and a label) */
  --red-600:#A63A32;  --red-100:#F8E4E1;  --red-300:#FFB4AB;
  --green-600:#2B6648; --green-100:#DFF0E7; --green-300:#8FD1A8;
  --ochre-600:#80530A; --ochre-100:#F8ECD0; --ochre-300:#F2C879;
  --info-100:#DCE6EC;

  /* roles: surfaces */
  --surface-page:var(--mist);
  --surface-raised:var(--frost);
  --surface-field:var(--white);
  --surface-band:var(--stone);
  --surface-deep:var(--dusk);

  /* roles: text */
  --text-strong:var(--dusk);
  --text-body:var(--ink);
  --text-muted:var(--slate-text);
  --text-label:var(--stone-ink);
  --text-on-band:var(--frost);
  --text-on-deep:var(--frost);
  --text-on-deep-muted:#AEBDC7;
  --text-on-action:var(--dusk);

  /* roles: lines and controls */
  --border-divider:var(--line-soft);
  --border-control:var(--line-strong);
  --border-on-band:var(--frost);
  --action:var(--lamp);
  --focus-ring:var(--dusk);
  --focus-ring-on-band:var(--frost);
  --focus-ring-on-deep:var(--lamp);
  --decor-stitch:var(--stone);
  --accent-decor:var(--lamp);

  /* roles: semantic */
  --error-fg:var(--red-600);     --error-bg:var(--red-100);
  --success-fg:var(--green-600); --success-bg:var(--green-100);
  --warning-fg:var(--ochre-600); --warning-bg:var(--ochre-100);
  --info-fg:var(--stone-800);    --info-bg:var(--info-100);

  /* typography */
  --font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --weight-regular:400;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-extrabold:800;

  --text-xs:clamp(.75rem,.73rem + .08vw,.8125rem);
  --text-sm:clamp(.9375rem,.92rem + .06vw,1rem);
  --text-base:clamp(1.125rem,1.08rem + .18vw,1.25rem);
  --text-lead:clamp(1.1875rem,1.12rem + .3vw,1.375rem);
  --text-lot:clamp(1.625rem,1.45rem + .75vw,2.125rem);
  --text-h3:clamp(1.375rem,1.25rem + .5vw,1.75rem);
  --text-h2:clamp(1.875rem,1.5rem + 1.6vw,3.25rem);
  --text-h1:clamp(1.875rem,1.6rem + 1.2vw,2.625rem);
  --text-result:clamp(6rem,4.6rem + 6vw,10.5rem);

  --leading-tight:1.1;
  --leading-heading:1.2;
  --leading-body:1.55;
  --tracking-display:-.03em;
  --tracking-heading:-.02em;
  --tracking-label:.12em;
  --measure-prose:68ch;

  /* spacing (4 px base) */
  --space-0:0;
  --space-1:.125rem;
  --space-2:.25rem;
  --space-3:.5rem;
  --space-4:.75rem;
  --space-5:1rem;
  --space-6:1.25rem;
  --space-7:1.5rem;
  --space-8:2rem;
  --space-9:2.5rem;
  --space-10:3rem;
  --space-11:4rem;
  --space-12:5rem;
  --space-13:6rem;
  --space-14:8rem;
  --gutter:clamp(1rem,4.4vw,4rem);
  --section-pad:clamp(3.5rem,7vw,6.5rem);
  --grid-max:82rem;

  /* shape and borders */
  --radius-control:4px;
  --radius-pill:999px;
  --border-1:1px;
  --border-2:2px;
  --border-3:3px;
  --control-sm:2.5rem;
  --control-md:3rem;
  --touch-min:2.75rem;

  /* depth: one light direction, tinted with dusk */
  --shadow-0:none;
  --shadow-1:0 1px 0 rgb(30 43 52 / .10);
  --shadow-2:0 1px 0 rgb(30 43 52 / .10),0 10px 24px -14px rgb(30 43 52 / .35);
  --shadow-3:0 1px 0 rgb(30 43 52 / .10),0 18px 40px -18px rgb(30 43 52 / .45);

  /* state layers and opacity */
  --state-hover:8%;
  --state-pressed:12%;
  --opacity-disabled:.38;
  --scrim:rgb(30 43 52 / .56);

  /* motion */
  --duration-fast:100ms;
  --duration-base:200ms;
  --duration-slow:300ms;
  --ease:cubic-bezier(.2,0,0,1);

  /* focus */
  --focus-width:2px;
  --focus-offset:2px;
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --surface-page:var(--dusk);
  --surface-raised:var(--raised-dark);
  --surface-field:var(--ink);
  --surface-band:var(--stone);
  --surface-deep:var(--ink);
  --text-strong:var(--frost);
  --text-body:#E9EEF1;
  --text-muted:#AEBDC7;
  --text-label:#AEBDC7;
  --border-divider:#3A4B57;
  --border-control:#8497A3;
  --focus-ring:var(--lamp);
  --decor-stitch:#8497A3;
  --error-fg:var(--red-300);   --error-bg:#3A2422;
  --success-fg:var(--green-300); --success-bg:#1F3329;
  --warning-fg:var(--ochre-300); --warning-bg:#3A2E15;
  --info-fg:#AEBDC7;           --info-bg:#2B3B46;
  --shadow-1:0 1px 0 rgb(0 0 0 / .30);
  --shadow-2:0 1px 0 rgb(0 0 0 / .30),0 10px 24px -14px rgb(0 0 0 / .6);
  --shadow-3:0 1px 0 rgb(0 0 0 / .30),0 18px 40px -18px rgb(0 0 0 / .7);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --surface-page:var(--dusk);
    --surface-raised:var(--raised-dark);
    --surface-field:var(--ink);
    --surface-deep:var(--ink);
    --text-strong:var(--frost);
    --text-body:#E9EEF1;
    --text-muted:#AEBDC7;
    --text-label:#AEBDC7;
    --border-divider:#3A4B57;
    --border-control:#8497A3;
    --focus-ring:var(--lamp);
    --decor-stitch:#8497A3;
    --error-fg:var(--red-300);   --error-bg:#3A2422;
    --success-fg:var(--green-300); --success-bg:#1F3329;
    --warning-fg:var(--ochre-300); --warning-bg:#3A2E15;
    --info-fg:#AEBDC7;           --info-bg:#2B3B46;
    --shadow-1:0 1px 0 rgb(0 0 0 / .30);
    --shadow-2:0 1px 0 rgb(0 0 0 / .30),0 10px 24px -14px rgb(0 0 0 / .6);
    --shadow-3:0 1px 0 rgb(0 0 0 / .30),0 18px 40px -18px rgb(0 0 0 / .7);
  }
}

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