/* ═══════════════════════════════════════════════════════════════════
 * tokens/css/tokens.css
 * Generated by tokens/build.py — do not edit directly.
 * Source of truth: tokens/foundation.json
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Primitives ─────────────────────────────────────────────────────── */
:root {
  --prim-colour-accent-a: #e12d32;
  --prim-colour-accent-b: #91050a;
  --prim-colour-accent-b-50: #cc4a36;
  --prim-colour-accent-c: #ff69d7;
  --prim-colour-accent-d: #ff9b00;
  --prim-colour-accent-d-83: #ff9b00;
  --prim-colour-accent-d-dark: #261a00;
  --prim-colour-accent-e: #c35500;
  --prim-colour-accent-f: #ebff00;
  --prim-colour-accent-g: #8c46ff;
  --prim-colour-accent-h: #5a0ae6;
  --prim-colour-accent-h-52: #9659ff;
  --prim-colour-accent-i: #5fc3ff;
  --prim-colour-accent-j: #00c3a0;
  --prim-colour-accent-k: #006e7d;
  --prim-colour-accent-k-62: #00876e;
  --prim-colour-accent-k-bright: #4fa3b3;
  --prim-colour-accent-l: #abff7d;
  --prim-colour-neutral-0: #000000;
  --prim-colour-neutral-10: #1c1c1c;
  --prim-colour-neutral-100: #ffffff;
  --prim-colour-neutral-12: #1f1f1f;
  --prim-colour-neutral-18: #2b2b2b;
  --prim-colour-neutral-20: #303030;
  --prim-colour-neutral-30: #474747;
  --prim-colour-neutral-36: #545454;
  --prim-colour-neutral-40: #615e5e;
  --prim-colour-neutral-50: #7a7575;
  --prim-colour-neutral-6: #141414;
  --prim-colour-neutral-60: #948f8f;
  --prim-colour-neutral-70: #b0abab;
  --prim-colour-neutral-80: #c9c4c4;
  --prim-colour-neutral-90: #e6e0e0;
  --prim-colour-neutral-95: #f5f0f0;
  --prim-colour-neutral-99: #fffcfc;
  --prim-colour-neutral-opacity-0-0: rgba(20,20,20,0.0);
  --prim-colour-neutral-opacity-0-1: rgba(20,20,20,0.01);
  --prim-colour-neutral-opacity-0-10: rgba(20,20,20,0.1);
  --prim-colour-neutral-opacity-0-100: rgba(20,20,20,1.0);
  --prim-colour-neutral-opacity-0-20: rgba(20,20,20,0.2);
  --prim-colour-neutral-opacity-0-30: rgba(20,20,20,0.3);
  --prim-colour-neutral-opacity-0-40: rgba(20,20,20,0.4);
  --prim-colour-neutral-opacity-0-5: rgba(20,20,20,0.05);
  --prim-colour-neutral-opacity-0-50: rgba(20,20,20,0.5);
  --prim-colour-neutral-opacity-0-60: rgba(20,20,20,0.6);
  --prim-colour-neutral-opacity-0-70: rgba(20,20,20,0.7);
  --prim-colour-neutral-opacity-0-80: rgba(20,20,20,0.8);
  --prim-colour-neutral-opacity-0-90: rgba(20,20,20,0.9);
  --prim-colour-neutral-opacity-100-0: rgba(255,255,255,0.0);
  --prim-colour-neutral-opacity-100-1: rgba(255,255,255,0.01);
  --prim-colour-neutral-opacity-100-10: rgba(255,255,255,0.1);
  --prim-colour-neutral-opacity-100-100: rgba(255,255,255,1.0);
  --prim-colour-neutral-opacity-100-20: rgba(255,255,255,0.2);
  --prim-colour-neutral-opacity-100-30: rgba(255,255,255,0.3);
  --prim-colour-neutral-opacity-100-40: rgba(255,255,255,0.4);
  --prim-colour-neutral-opacity-100-5: rgba(255,255,255,0.05);
  --prim-colour-neutral-opacity-100-50: rgba(255,255,255,0.5);
  --prim-colour-neutral-opacity-100-60: rgba(255,255,255,0.6);
  --prim-colour-neutral-opacity-100-70: rgba(255,255,255,0.7);
  --prim-colour-neutral-opacity-100-80: rgba(255,255,255,0.8);
  --prim-colour-neutral-opacity-100-90: rgba(255,255,255,0.9);
  --prim-colour-neutral-opacity-50-0: rgba(122,117,117,0.0);
  --prim-colour-neutral-opacity-50-1: rgba(122,117,117,0.01);
  --prim-colour-neutral-opacity-50-10: rgba(122,117,117,0.1);
  --prim-colour-neutral-opacity-50-100: rgba(122,117,117,1.0);
  --prim-colour-neutral-opacity-50-20: rgba(122,117,117,0.2);
  --prim-colour-neutral-opacity-50-30: rgba(122,117,117,0.3);
  --prim-colour-neutral-opacity-50-40: rgba(122,117,117,0.4);
  --prim-colour-neutral-opacity-50-5: rgba(122,117,117,0.05);
  --prim-colour-neutral-opacity-50-50: rgba(122,117,117,0.5);
  --prim-colour-neutral-opacity-50-60: rgba(122,117,117,0.6);
  --prim-colour-neutral-opacity-50-70: rgba(122,117,117,0.7);
  --prim-colour-neutral-opacity-50-80: rgba(122,117,117,0.8);
  --prim-colour-neutral-opacity-50-90: rgba(122,117,117,0.9);
  --prim-colour-neutral-opacity-95-0: rgba(230,224,224,0.0);
  --prim-colour-neutral-opacity-95-1: rgba(230,224,224,0.01);
  --prim-colour-neutral-opacity-95-10: rgba(230,224,224,0.1);
  --prim-colour-neutral-opacity-95-100: rgba(230,224,224,1.0);
  --prim-colour-neutral-opacity-95-20: rgba(230,224,224,0.2);
  --prim-colour-neutral-opacity-95-30: rgba(230,224,224,0.3);
  --prim-colour-neutral-opacity-95-40: rgba(230,224,224,0.4);
  --prim-colour-neutral-opacity-95-5: rgba(230,224,224,0.05);
  --prim-colour-neutral-opacity-95-50: rgba(230,224,224,0.5);
  --prim-colour-neutral-opacity-95-60: rgba(230,224,224,0.6);
  --prim-colour-neutral-opacity-95-70: rgba(230,224,224,0.7);
  --prim-colour-neutral-opacity-95-80: rgba(230,224,224,0.8);
  --prim-colour-neutral-opacity-95-90: rgba(230,224,224,0.9);
  --prim-number-scale-1-2-0-688rem: 11px;
  --prim-number-scale-1-2-0-812rem: 13px;
  --prim-number-scale-1-2-1-000rem: 16px;
  --prim-number-scale-1-2-1-188rem: 19px;
  --prim-number-scale-1-2-1-438rem: 23px;
  --prim-number-scale-1-2-1-750rem: 28px;
  --prim-number-scale-1-2-2-062rem: 33px;
  --prim-number-scale-1-2-2-500rem: 40px;
  --prim-number-scale-1-2-3-000rem: 48px;
  --prim-number-scale-1-2-3-562rem: 57px;
  --prim-number-scale-1-2-4-312rem: 69px;
  --prim-number-scale-1-2-5-188rem: 83px;
  --prim-number-scale-1-2-6-188rem: 99px;
  --prim-number-scale-1-2-7-438rem: 119px;
  --prim-number-scale-1-2-8-938rem: 143px;
  --prim-number-scale-1-25-0-625rem: 10px;
  --prim-number-scale-1-25-0-812rem: 13px;
  --prim-number-scale-1-25-1-000rem: 16px;
  --prim-number-scale-1-25-1-250rem: 20px;
  --prim-number-scale-1-25-1-562rem: 25px;
  --prim-number-scale-1-25-1-938rem: 31px;
  --prim-number-scale-1-25-11-625rem: 186px;
  --prim-number-scale-1-25-14-562rem: 233px;
  --prim-number-scale-1-25-2-438rem: 39px;
  --prim-number-scale-1-25-3-062rem: 49px;
  --prim-number-scale-1-25-3-812rem: 61px;
  --prim-number-scale-1-25-4-750rem: 76px;
  --prim-number-scale-1-25-5-938rem: 95px;
  --prim-number-scale-1-25-7-438rem: 119px;
  --prim-number-scale-1-25-9-312rem: 149px;
  --prim-number-scale-2-0rem: 0px;
  --prim-number-scale-2-10rem: 40px;
  --prim-number-scale-2-11rem: 44px;
  --prim-number-scale-2-12rem: 48px;
  --prim-number-scale-2-13rem: 52px;
  --prim-number-scale-2-14rem: 56px;
  --prim-number-scale-2-15rem: 60px;
  --prim-number-scale-2-16rem: 64px;
  --prim-number-scale-2-17rem: 68px;
  --prim-number-scale-2-18rem: 72px;
  --prim-number-scale-2-19rem: 76px;
  --prim-number-scale-2-1rem: 4px;
  --prim-number-scale-2-20rem: 80px;
  --prim-number-scale-2-21rem: 84px;
  --prim-number-scale-2-22rem: 88px;
  --prim-number-scale-2-23rem: 92px;
  --prim-number-scale-2-24rem: 96px;
  --prim-number-scale-2-25rem: 100px;
  --prim-number-scale-2-26rem: 104px;
  --prim-number-scale-2-27rem: 108px;
  --prim-number-scale-2-28rem: 112px;
  --prim-number-scale-2-29rem: 116px;
  --prim-number-scale-2-2rem: 8px;
  --prim-number-scale-2-30rem: 120px;
  --prim-number-scale-2-31rem: 124px;
  --prim-number-scale-2-32rem: 128px;
  --prim-number-scale-2-33rem: 132px;
  --prim-number-scale-2-34rem: 136px;
  --prim-number-scale-2-35rem: 140px;
  --prim-number-scale-2-36rem: 144px;
  --prim-number-scale-2-37rem: 148px;
  --prim-number-scale-2-38rem: 152px;
  --prim-number-scale-2-39rem: 156px;
  --prim-number-scale-2-3rem: 12px;
  --prim-number-scale-2-40rem: 160px;
  --prim-number-scale-2-41rem: 164px;
  --prim-number-scale-2-42rem: 168px;
  --prim-number-scale-2-43rem: 172px;
  --prim-number-scale-2-44rem: 176px;
  --prim-number-scale-2-45rem: 180px;
  --prim-number-scale-2-46rem: 184px;
  --prim-number-scale-2-47rem: 188px;
  --prim-number-scale-2-48rem: 192px;
  --prim-number-scale-2-49rem: 196px;
  --prim-number-scale-2-4rem: 16px;
  --prim-number-scale-2-50rem: 200px;
  --prim-number-scale-2-5rem: 20px;
  --prim-number-scale-2-6rem: 24px;
  --prim-number-scale-2-7rem: 28px;
  --prim-number-scale-2-8rem: 32px;
  --prim-number-scale-2-9rem: 36px;
  --prim-type-family-a: "Inter";
  --prim-type-family-mono: "Noto Sans Mono";
  --prim-type-family-sans: "Noto Sans";
  --prim-type-family-serif: "Noto Serif";
  --prim-type-lh-relative-1: 1;
  --prim-type-lh-relative-1-04: 1.04;
  --prim-type-lh-relative-1-2: 1.2;
  --prim-type-lh-relative-1-35: 1.35;
  --prim-type-lh-relative-1-6: 1.6;
  --prim-type-ls-em-0: 0;
  --prim-type-ls-em-0-12em: 0.12em;
  --prim-type-weight-100: 100;
  --prim-type-weight-200: 200;
  --prim-type-weight-300: 300;
  --prim-type-weight-400: 400;
  --prim-type-weight-500: 500;
  --prim-type-weight-600: 600;
  --prim-type-weight-700: 700;
  --prim-type-weight-800: 800;
  --prim-type-weight-900: 900;
}

/* ── Colour tokens ─────────────────────────────────────────────────── */
:root,
[data-colour-mode="light"] {
  --color-text-default: var(--prim-colour-neutral-6);
  --color-text-inverse: var(--prim-colour-neutral-100);
  --color-text-error: var(--prim-colour-accent-a);
  --color-text-primary: var(--prim-colour-accent-d-dark);
  --color-text-interactive: var(--prim-colour-accent-g);
  --color-graphic-default: var(--prim-colour-neutral-6);
  --color-graphic-inverse: var(--prim-colour-neutral-100);
  --color-graphic-error: var(--prim-colour-accent-a);
  --color-graphic-interactive: var(--prim-colour-accent-g);
  --color-container-default: var(--prim-colour-neutral-100);
  --color-container-mid-1: var(--prim-colour-neutral-95);
  --color-container-mid-2: var(--prim-colour-neutral-90);
  --color-container-inverse: var(--prim-colour-neutral-6);
  --color-border-default: var(--prim-colour-neutral-100);
  --color-border-mid-2: var(--prim-colour-neutral-90);
  --color-border-inverse: var(--prim-colour-neutral-6);
  --color-border-error: var(--prim-colour-accent-a);
  --color-shadow-1: var(--prim-colour-neutral-opacity-50-20);
  --color-shadow-2: var(--prim-colour-neutral-opacity-50-10);
  --color-text-a: var(--prim-colour-accent-a);
  --color-graphic-a: var(--prim-colour-accent-a);
  --color-container-a: var(--prim-colour-accent-a);
  --color-border-a: var(--prim-colour-accent-a);
  --color-text-b: var(--prim-colour-accent-b);
  --color-graphic-b: var(--prim-colour-accent-b);
  --color-container-b: var(--prim-colour-accent-b);
  --color-border-b: var(--prim-colour-accent-b);
  --color-text-c: var(--prim-colour-accent-c);
  --color-graphic-c: var(--prim-colour-accent-c);
  --color-container-c: var(--prim-colour-accent-c);
  --color-border-c: var(--prim-colour-accent-c);
  --color-text-d: var(--prim-colour-accent-d);
  --color-graphic-d: var(--prim-colour-accent-d);
  --color-container-d: var(--prim-colour-accent-d);
  --color-border-d: var(--prim-colour-accent-d);
  --color-text-e: var(--prim-colour-accent-e);
  --color-graphic-e: var(--prim-colour-accent-e);
  --color-container-e: var(--prim-colour-accent-e);
  --color-border-e: var(--prim-colour-accent-e);
  --color-text-f: var(--prim-colour-accent-f);
  --color-graphic-f: var(--prim-colour-accent-f);
  --color-container-f: var(--prim-colour-accent-f);
  --color-border-f: var(--prim-colour-accent-f);
  --color-text-g: var(--prim-colour-accent-g);
  --color-graphic-g: var(--prim-colour-accent-g);
  --color-container-g: var(--prim-colour-accent-g);
  --color-border-g: var(--prim-colour-accent-g);
  --color-text-h: var(--prim-colour-accent-h);
  --color-graphic-h: var(--prim-colour-accent-h);
  --color-container-h: var(--prim-colour-accent-h);
  --color-border-h: var(--prim-colour-accent-h);
  --color-text-i: var(--prim-colour-accent-i);
  --color-graphic-i: var(--prim-colour-accent-i);
  --color-container-i: var(--prim-colour-accent-i);
  --color-border-i: var(--prim-colour-accent-i);
  --color-text-j: var(--prim-colour-accent-j);
  --color-graphic-j: var(--prim-colour-accent-j);
  --color-container-j: var(--prim-colour-accent-j);
  --color-border-j: var(--prim-colour-accent-j);
  --color-text-k: var(--prim-colour-accent-k);
  --color-graphic-k: var(--prim-colour-accent-k);
  --color-container-k: var(--prim-colour-accent-k);
  --color-border-k: var(--prim-colour-accent-k);
  --color-text-l: var(--prim-colour-accent-l);
  --color-graphic-l: var(--prim-colour-accent-l);
  --color-container-l: var(--prim-colour-accent-l);
  --color-border-l: var(--prim-colour-accent-l);
  --color-text-default-a60: var(--prim-colour-neutral-opacity-0-60);
  --color-graphic-default-a60: var(--prim-colour-neutral-opacity-0-60);
  --color-graphic-default-a30: var(--prim-colour-neutral-opacity-0-30);
  --color-graphic-default-a10: var(--prim-colour-neutral-opacity-0-10);
  --color-container-default-a60: var(--prim-colour-neutral-opacity-100-60);
  --color-container-default-a30: var(--prim-colour-neutral-opacity-100-30);
  --color-container-default-a20: var(--prim-colour-neutral-opacity-100-20);
  --color-container-default-a10: var(--prim-colour-neutral-opacity-100-10);
  --color-container-inverse-a30: var(--prim-colour-neutral-opacity-0-30);
  --color-container-inverse-a10: var(--prim-colour-neutral-opacity-0-10);
  --color-border-inverse-a60: var(--prim-colour-neutral-opacity-0-60);
  --color-border-inverse-a30: var(--prim-colour-neutral-opacity-0-30);
  --color-border-inverse-a10: var(--prim-colour-neutral-opacity-0-10);
  --color-border-mid-2-a50: var(--prim-colour-neutral-opacity-95-50);
  --color-border-surface-a60: var(--prim-colour-neutral-opacity-100-60);
  --color-border-surface-a30: var(--prim-colour-neutral-opacity-100-30);
  --color-border-surface-a20: var(--prim-colour-neutral-opacity-100-20);
  --color-border-surface-a10: var(--prim-colour-neutral-opacity-100-10);
}

[data-colour-mode="dark"] {
  --color-text-default: var(--prim-colour-neutral-90);
  --color-text-inverse: var(--prim-colour-neutral-12);
  --color-text-error: var(--prim-colour-accent-a);
  --color-text-primary: var(--prim-colour-accent-d);
  --color-text-interactive: var(--prim-colour-accent-g);
  --color-graphic-default: var(--prim-colour-neutral-90);
  --color-graphic-inverse: var(--prim-colour-neutral-12);
  --color-graphic-error: var(--prim-colour-accent-a);
  --color-graphic-interactive: var(--prim-colour-accent-g);
  --color-container-default: var(--prim-colour-neutral-36);
  --color-container-mid-1: var(--prim-colour-neutral-12);
  --color-container-mid-2: var(--prim-colour-neutral-20);
  --color-container-inverse: var(--prim-colour-neutral-90);
  --color-border-default: var(--prim-colour-neutral-36);
  --color-border-mid-2: var(--prim-colour-neutral-20);
  --color-border-inverse: var(--prim-colour-neutral-90);
  --color-border-error: var(--prim-colour-accent-a);
  --color-shadow-1: var(--prim-colour-neutral-opacity-0-20);
  --color-shadow-2: var(--prim-colour-neutral-opacity-0-10);
  --color-text-a: var(--prim-colour-accent-a);
  --color-graphic-a: var(--prim-colour-accent-a);
  --color-container-a: var(--prim-colour-accent-a);
  --color-border-a: var(--prim-colour-accent-a);
  --color-text-b: var(--prim-colour-accent-b-50);
  --color-graphic-b: var(--prim-colour-accent-b-50);
  --color-container-b: var(--prim-colour-accent-b-50);
  --color-border-b: var(--prim-colour-accent-b);
  --color-text-c: var(--prim-colour-accent-c);
  --color-graphic-c: var(--prim-colour-accent-c);
  --color-container-c: var(--prim-colour-accent-c);
  --color-border-c: var(--prim-colour-accent-c);
  --color-text-d: var(--prim-colour-accent-d-83);
  --color-graphic-d: var(--prim-colour-accent-d-83);
  --color-container-d: var(--prim-colour-accent-d-83);
  --color-border-d: var(--prim-colour-accent-d);
  --color-text-e: var(--prim-colour-accent-e);
  --color-graphic-e: var(--prim-colour-accent-e);
  --color-container-e: var(--prim-colour-accent-e);
  --color-border-e: var(--prim-colour-accent-e);
  --color-text-f: var(--prim-colour-accent-f);
  --color-graphic-f: var(--prim-colour-accent-f);
  --color-container-f: var(--prim-colour-accent-f);
  --color-border-f: var(--prim-colour-accent-f);
  --color-text-g: var(--prim-colour-accent-g);
  --color-graphic-g: var(--prim-colour-accent-g);
  --color-container-g: var(--prim-colour-accent-g);
  --color-border-g: var(--prim-colour-accent-g);
  --color-text-h: var(--prim-colour-accent-h-52);
  --color-graphic-h: var(--prim-colour-accent-h-52);
  --color-container-h: var(--prim-colour-accent-h-52);
  --color-border-h: var(--prim-colour-accent-h);
  --color-text-i: var(--prim-colour-accent-i);
  --color-graphic-i: var(--prim-colour-accent-i);
  --color-container-i: var(--prim-colour-accent-i);
  --color-border-i: var(--prim-colour-accent-i);
  --color-text-j: var(--prim-colour-accent-j);
  --color-graphic-j: var(--prim-colour-accent-j);
  --color-container-j: var(--prim-colour-accent-j);
  --color-border-j: var(--prim-colour-accent-j);
  --color-text-k: var(--prim-colour-accent-k-62);
  --color-graphic-k: var(--prim-colour-accent-k-62);
  --color-container-k: var(--prim-colour-accent-k-62);
  --color-border-k: var(--prim-colour-accent-k-bright);
  --color-text-l: var(--prim-colour-accent-l);
  --color-graphic-l: var(--prim-colour-accent-l);
  --color-container-l: var(--prim-colour-accent-l);
  --color-border-l: var(--prim-colour-accent-l);
  --color-text-default-a60: var(--prim-colour-neutral-opacity-100-60);
  --color-graphic-default-a60: var(--prim-colour-neutral-opacity-100-60);
  --color-graphic-default-a30: var(--prim-colour-neutral-opacity-100-30);
  --color-graphic-default-a10: var(--prim-colour-neutral-opacity-100-10);
  --color-container-default-a60: var(--prim-colour-neutral-opacity-0-60);
  --color-container-default-a30: var(--prim-colour-neutral-opacity-0-30);
  --color-container-default-a20: var(--prim-colour-neutral-opacity-0-20);
  --color-container-default-a10: var(--prim-colour-neutral-opacity-0-10);
  --color-container-inverse-a30: var(--prim-colour-neutral-opacity-100-30);
  --color-container-inverse-a10: var(--prim-colour-neutral-opacity-100-10);
  --color-border-inverse-a60: var(--prim-colour-neutral-opacity-100-70);
  --color-border-inverse-a30: var(--prim-colour-neutral-opacity-100-70);
  --color-border-inverse-a10: var(--prim-colour-neutral-opacity-100-10);
  --color-border-mid-2-a50: var(--prim-colour-neutral-opacity-95-50);
  --color-border-surface-a60: var(--prim-colour-neutral-opacity-0-60);
  --color-border-surface-a30: var(--prim-colour-neutral-opacity-0-30);
  --color-border-surface-a20: var(--prim-colour-neutral-opacity-0-20);
  --color-border-surface-a10: var(--prim-colour-neutral-opacity-0-10);
}

/* ── Layout tokens ─────────────────────────────────────────────────── */

[data-layout="xs"] {
  --layout-size-none: var(--prim-number-scale-2-0rem);
  --layout-size-2xs: var(--prim-number-scale-2-1rem);
  --layout-size-xs: var(--prim-number-scale-2-2rem);
  --layout-size-sm: var(--prim-number-scale-2-4rem);
  --layout-size-md: var(--prim-number-scale-2-8rem);
  --layout-size-lg: var(--prim-number-scale-2-16rem);
  --layout-size-xl: var(--prim-number-scale-2-32rem);
  --layout-spacing-none: var(--prim-number-scale-2-0rem);
  --layout-spacing-2xs: var(--prim-number-scale-2-1rem);
  --layout-spacing-xs: var(--prim-number-scale-2-2rem);
  --layout-spacing-sm: var(--prim-number-scale-2-4rem);
  --layout-spacing-md: var(--prim-number-scale-2-8rem);
  --layout-spacing-lg: var(--prim-number-scale-2-16rem);
  --layout-spacing-xl: var(--prim-number-scale-2-32rem);
  --layout-radius-none: var(--prim-number-scale-2-0rem);
  --layout-radius-2xs: var(--prim-number-scale-2-1rem);
  --layout-radius-xs: var(--prim-number-scale-2-2rem);
  --layout-radius-sm: var(--prim-number-scale-2-4rem);
  --layout-radius-md: var(--prim-number-scale-2-8rem);
  --layout-radius-lg: var(--prim-number-scale-2-16rem);
  --layout-radius-xl: var(--prim-number-scale-2-32rem);
}


[data-layout="sm"] {
  --layout-size-none: var(--prim-number-scale-2-0rem);
  --layout-size-2xs: var(--prim-number-scale-2-1rem);
  --layout-size-xs: var(--prim-number-scale-2-2rem);
  --layout-size-sm: var(--prim-number-scale-2-4rem);
  --layout-size-md: var(--prim-number-scale-2-8rem);
  --layout-size-lg: var(--prim-number-scale-2-16rem);
  --layout-size-xl: var(--prim-number-scale-2-32rem);
  --layout-spacing-none: var(--prim-number-scale-2-0rem);
  --layout-spacing-2xs: var(--prim-number-scale-2-1rem);
  --layout-spacing-xs: var(--prim-number-scale-2-2rem);
  --layout-spacing-sm: var(--prim-number-scale-2-4rem);
  --layout-spacing-md: var(--prim-number-scale-2-8rem);
  --layout-spacing-lg: var(--prim-number-scale-2-16rem);
  --layout-spacing-xl: var(--prim-number-scale-2-32rem);
  --layout-radius-none: var(--prim-number-scale-2-0rem);
  --layout-radius-2xs: var(--prim-number-scale-2-1rem);
  --layout-radius-xs: var(--prim-number-scale-2-2rem);
  --layout-radius-sm: var(--prim-number-scale-2-4rem);
  --layout-radius-md: var(--prim-number-scale-2-8rem);
  --layout-radius-lg: var(--prim-number-scale-2-16rem);
  --layout-radius-xl: var(--prim-number-scale-2-32rem);
}

:root,
[data-layout="md"] {
  --layout-size-none: var(--prim-number-scale-2-0rem);
  --layout-size-2xs: var(--prim-number-scale-2-1rem);
  --layout-size-xs: var(--prim-number-scale-2-2rem);
  --layout-size-sm: var(--prim-number-scale-2-6rem);
  --layout-size-md: var(--prim-number-scale-2-12rem);
  --layout-size-lg: var(--prim-number-scale-2-24rem);
  --layout-size-xl: var(--prim-number-scale-2-48rem);
  --layout-spacing-none: var(--prim-number-scale-2-0rem);
  --layout-spacing-2xs: var(--prim-number-scale-2-1rem);
  --layout-spacing-xs: var(--prim-number-scale-2-2rem);
  --layout-spacing-sm: var(--prim-number-scale-2-6rem);
  --layout-spacing-md: var(--prim-number-scale-2-12rem);
  --layout-spacing-lg: var(--prim-number-scale-2-24rem);
  --layout-spacing-xl: var(--prim-number-scale-2-48rem);
  --layout-radius-none: var(--prim-number-scale-2-0rem);
  --layout-radius-2xs: var(--prim-number-scale-2-1rem);
  --layout-radius-xs: var(--prim-number-scale-2-2rem);
  --layout-radius-sm: var(--prim-number-scale-2-6rem);
  --layout-radius-md: var(--prim-number-scale-2-12rem);
  --layout-radius-lg: var(--prim-number-scale-2-24rem);
  --layout-radius-xl: var(--prim-number-scale-2-48rem);
}


[data-layout="lg"] {
  --layout-size-none: var(--prim-number-scale-2-0rem);
  --layout-size-2xs: var(--prim-number-scale-2-2rem);
  --layout-size-xs: var(--prim-number-scale-2-4rem);
  --layout-size-sm: var(--prim-number-scale-2-8rem);
  --layout-size-md: var(--prim-number-scale-2-24rem);
  --layout-size-lg: var(--prim-number-scale-2-48rem);
  --layout-size-xl: var(--prim-number-scale-2-48rem);
  --layout-spacing-none: var(--prim-number-scale-2-0rem);
  --layout-spacing-2xs: var(--prim-number-scale-2-2rem);
  --layout-spacing-xs: var(--prim-number-scale-2-4rem);
  --layout-spacing-sm: var(--prim-number-scale-2-8rem);
  --layout-spacing-md: var(--prim-number-scale-2-24rem);
  --layout-spacing-lg: var(--prim-number-scale-2-48rem);
  --layout-spacing-xl: var(--prim-number-scale-2-48rem);
  --layout-radius-none: var(--prim-number-scale-2-0rem);
  --layout-radius-2xs: var(--prim-number-scale-2-1rem);
  --layout-radius-xs: var(--prim-number-scale-2-2rem);
  --layout-radius-sm: var(--prim-number-scale-2-6rem);
  --layout-radius-md: var(--prim-number-scale-2-12rem);
  --layout-radius-lg: var(--prim-number-scale-2-24rem);
  --layout-radius-xl: var(--prim-number-scale-2-48rem);
}

/* ── Typography tokens ──────────────────────────────────────────────── */

[data-type="xs"] {
  --type-family-primary: var(--prim-type-family-a);
  --type-family-secondary: var(--prim-type-family-a);
  --type-weight-light: var(--prim-type-weight-300);
  --type-weight-regular: var(--prim-type-weight-400);
  --type-weight-medium: var(--prim-type-weight-500);
  --type-weight-semi-bold: var(--prim-type-weight-600);
  --type-weight-bold: var(--prim-type-weight-700);
  --type-size-xs: var(--prim-number-scale-1-2-0-812rem);
  --type-size-sm: var(--prim-number-scale-1-2-1-000rem);
  --type-size-md: var(--prim-number-scale-1-2-1-188rem);
  --type-size-lg: var(--prim-number-scale-1-2-1-438rem);
  --type-size-xl: var(--prim-number-scale-1-2-2-500rem);
  --type-size-2xl: var(--prim-number-scale-1-2-2-500rem);
  --type-size-3xl: var(--prim-number-scale-1-2-3-000rem);
  --type-lh-xs: var(--prim-number-scale-2-4rem);
  --type-lh-sm: var(--prim-number-scale-2-6rem);
  --type-lh-md: var(--prim-number-scale-2-8rem);
  --type-lh-lg: var(--prim-number-scale-2-10rem);
  --type-lh-xl: var(--prim-number-scale-2-12rem);
  --type-lh-2xl: var(--prim-number-scale-2-14rem);
  --type-lh-3xl: var(--prim-number-scale-2-16rem);
  --type-ls-xs: var(--prim-number-scale-2-0rem);
  --type-ls-sm: var(--prim-number-scale-2-1rem);
  --type-ls-md: var(--prim-number-scale-2-2rem);
  --type-ls-lg: var(--prim-number-scale-2-3rem);
  --type-ls-xl: var(--prim-number-scale-2-4rem);
  --type-ls-2xl: var(--prim-number-scale-2-5rem);
  --type-ls-3xl: var(--prim-number-scale-2-6rem);
}


[data-type="sm"] {
  --type-family-primary: var(--prim-type-family-a);
  --type-family-secondary: var(--prim-type-family-a);
  --type-weight-light: var(--prim-type-weight-300);
  --type-weight-regular: var(--prim-type-weight-400);
  --type-weight-medium: var(--prim-type-weight-500);
  --type-weight-semi-bold: var(--prim-type-weight-600);
  --type-weight-bold: var(--prim-type-weight-700);
  --type-size-xs: var(--prim-number-scale-1-2-0-812rem);
  --type-size-sm: var(--prim-number-scale-1-2-1-000rem);
  --type-size-md: var(--prim-number-scale-1-2-1-188rem);
  --type-size-lg: var(--prim-number-scale-1-2-1-438rem);
  --type-size-xl: var(--prim-number-scale-1-2-2-500rem);
  --type-size-2xl: var(--prim-number-scale-1-2-2-500rem);
  --type-size-3xl: var(--prim-number-scale-1-2-3-000rem);
  --type-lh-xs: var(--prim-number-scale-2-4rem);
  --type-lh-sm: var(--prim-number-scale-2-6rem);
  --type-lh-md: var(--prim-number-scale-2-8rem);
  --type-lh-lg: var(--prim-number-scale-2-10rem);
  --type-lh-xl: var(--prim-number-scale-2-12rem);
  --type-lh-2xl: var(--prim-number-scale-2-14rem);
  --type-lh-3xl: var(--prim-number-scale-2-16rem);
  --type-ls-xs: var(--prim-number-scale-2-0rem);
  --type-ls-sm: var(--prim-number-scale-2-1rem);
  --type-ls-md: var(--prim-number-scale-2-2rem);
  --type-ls-lg: var(--prim-number-scale-2-3rem);
  --type-ls-xl: var(--prim-number-scale-2-4rem);
  --type-ls-2xl: var(--prim-number-scale-2-5rem);
  --type-ls-3xl: var(--prim-number-scale-2-6rem);
}

:root,
[data-type="md"] {
  --type-family-primary: var(--prim-type-family-a);
  --type-family-secondary: var(--prim-type-family-a);
  --type-weight-light: var(--prim-type-weight-300);
  --type-weight-regular: var(--prim-type-weight-400);
  --type-weight-medium: var(--prim-type-weight-500);
  --type-weight-semi-bold: var(--prim-type-weight-600);
  --type-weight-bold: var(--prim-type-weight-700);
  --type-size-xs: var(--prim-number-scale-1-25-0-812rem);
  --type-size-sm: var(--prim-number-scale-1-25-1-000rem);
  --type-size-md: var(--prim-number-scale-1-25-1-250rem);
  --type-size-lg: var(--prim-number-scale-1-25-1-562rem);
  --type-size-xl: var(--prim-number-scale-1-25-3-062rem);
  --type-size-2xl: var(--prim-number-scale-1-25-3-812rem);
  --type-size-3xl: var(--prim-number-scale-1-25-5-938rem);
  --type-lh-xs: var(--prim-number-scale-2-4rem);
  --type-lh-sm: var(--prim-number-scale-2-6rem);
  --type-lh-md: var(--prim-number-scale-2-8rem);
  --type-lh-lg: var(--prim-number-scale-2-10rem);
  --type-lh-xl: var(--prim-number-scale-2-12rem);
  --type-lh-2xl: var(--prim-number-scale-2-14rem);
  --type-lh-3xl: var(--prim-number-scale-2-16rem);
  --type-ls-xs: var(--prim-number-scale-2-0rem);
  --type-ls-sm: var(--prim-number-scale-2-1rem);
  --type-ls-md: var(--prim-number-scale-2-2rem);
  --type-ls-lg: var(--prim-number-scale-2-3rem);
  --type-ls-xl: var(--prim-number-scale-2-4rem);
  --type-ls-2xl: var(--prim-number-scale-2-5rem);
  --type-ls-3xl: var(--prim-number-scale-2-6rem);
}


[data-type="lg"] {
  --type-family-primary: var(--prim-type-family-a);
  --type-family-secondary: var(--prim-type-family-a);
  --type-weight-light: var(--prim-type-weight-300);
  --type-weight-regular: var(--prim-type-weight-400);
  --type-weight-medium: var(--prim-type-weight-500);
  --type-weight-semi-bold: var(--prim-type-weight-600);
  --type-weight-bold: var(--prim-type-weight-700);
  --type-size-xs: var(--prim-number-scale-1-25-0-812rem);
  --type-size-sm: var(--prim-number-scale-1-25-1-000rem);
  --type-size-md: var(--prim-number-scale-1-25-3-812rem);
  --type-size-lg: var(--prim-number-scale-1-25-5-938rem);
  --type-size-xl: var(--prim-number-scale-1-25-9-312rem);
  --type-size-2xl: var(--prim-number-scale-1-25-14-562rem);
  --type-size-3xl: var(--prim-number-scale-1-25-14-562rem);
  --type-lh-xs: var(--prim-number-scale-2-4rem);
  --type-lh-sm: var(--prim-number-scale-2-18rem);
  --type-lh-md: var(--prim-number-scale-2-28rem);
  --type-lh-lg: var(--prim-number-scale-2-18rem);
  --type-lh-xl: var(--prim-number-scale-2-18rem);
  --type-lh-2xl: var(--prim-number-scale-2-18rem);
  --type-lh-3xl: var(--prim-number-scale-2-18rem);
  --type-ls-xs: var(--prim-number-scale-2-0rem);
  --type-ls-sm: var(--prim-number-scale-2-1rem);
  --type-ls-md: var(--prim-number-scale-2-2rem);
  --type-ls-lg: var(--prim-number-scale-2-3rem);
  --type-ls-xl: var(--prim-number-scale-2-4rem);
  --type-ls-2xl: var(--prim-number-scale-2-5rem);
  --type-ls-3xl: var(--prim-number-scale-2-6rem);
}

/* ── Type role tokens ─────────────────────────────────────────────── */
/* Fixed semantic roles from product-card-item extraction. Not per-mode. */
/* Noto Sans = Proxima Nova stand-in; Noto Serif = Canela stand-in.     */
:root {
  --type-role-overline-family: var(--prim-type-family-sans);
  --type-role-overline-weight: var(--prim-type-weight-500);
  --type-role-overline-size: var(--prim-number-scale-1-25-0-812rem);
  --type-role-overline-lh: var(--prim-type-lh-relative-1-2);
  --type-role-overline-ls: var(--prim-type-ls-em-0-12em);
  --type-role-headline-2-family: var(--prim-type-family-serif);
  --type-role-headline-2-weight: var(--prim-type-weight-400);
  --type-role-headline-2-size: var(--prim-number-scale-1-25-1-562rem);
  --type-role-headline-2-lh: var(--prim-type-lh-relative-1-2);
  --type-role-headline-2-ls: var(--prim-type-ls-em-0);
  --type-role-headline-3-family: var(--prim-type-family-serif);
  --type-role-headline-3-weight: var(--prim-type-weight-400);
  --type-role-headline-3-size: var(--prim-number-scale-1-25-1-250rem);
  --type-role-headline-3-lh: var(--prim-type-lh-relative-1-2);
  --type-role-headline-3-ls: var(--prim-type-ls-em-0);
  --type-role-body-1-family: var(--prim-type-family-sans);
  --type-role-body-1-weight: var(--prim-type-weight-400);
  --type-role-body-1-size: var(--prim-number-scale-1-25-1-000rem);
  --type-role-body-1-lh: var(--prim-type-lh-relative-1-2);
  --type-role-body-1-ls: var(--prim-type-ls-em-0);
  --type-role-body-lead-1-family: var(--prim-type-family-sans);
  --type-role-body-lead-1-weight: var(--prim-type-weight-400);
  --type-role-body-lead-1-size: var(--prim-number-scale-1-25-1-250rem);
  --type-role-body-lead-1-lh: var(--prim-type-lh-relative-1-35);
  --type-role-body-lead-1-ls: var(--prim-type-ls-em-0);
  --type-role-caption-1-family: var(--prim-type-family-sans);
  --type-role-caption-1-weight: var(--prim-type-weight-400);
  --type-role-caption-1-size: var(--prim-number-scale-1-25-0-812rem);
  --type-role-caption-1-lh: var(--prim-type-lh-relative-1-2);
  --type-role-caption-1-ls: var(--prim-type-ls-em-0-12em);
  --type-role-mono-family: var(--prim-type-family-mono);
  --type-role-mono-weight: var(--prim-type-weight-400);
  --type-role-mono-size: var(--prim-number-scale-1-25-0-812rem);
  --type-role-mono-lh: var(--prim-type-lh-relative-1-2);
  --type-role-mono-ls: var(--prim-type-ls-em-0);
  --type-role-button-1-family: var(--prim-type-family-sans);
  --type-role-button-1-weight: var(--prim-type-weight-500);
  --type-role-button-1-size: var(--prim-number-scale-1-25-0-812rem);
  --type-role-button-1-lh: var(--prim-type-lh-relative-1-2);
  --type-role-button-1-ls: var(--prim-type-ls-em-0-12em);
  --type-role-button-2-family: var(--prim-type-family-sans);
  --type-role-button-2-weight: var(--prim-type-weight-500);
  --type-role-button-2-size: var(--prim-number-scale-1-25-1-250rem);
  --type-role-button-2-lh: var(--prim-type-lh-relative-1-2);
  --type-role-button-2-ls: var(--prim-type-ls-em-0-12em);
  --type-role-display-1-family: var(--prim-type-family-serif);
  --type-role-display-1-weight: var(--prim-type-weight-400);
  --type-role-display-1-size: var(--prim-number-scale-1-25-3-812rem);
  --type-role-display-1-lh: var(--prim-type-lh-relative-1-04);
  --type-role-display-1-ls: var(--prim-type-ls-em-0);
}

/* ── Breakpoint-aware type scale ─────────────────────────────────── */
/* <1024px: ×1.2 ladder (11 13 16 19 23 28 33 40 48 57 69 83)         */
/* ≥1024px: ×1.25 ladder (10 13 16 20 25 31 39 49 61 76 95 119)       */
/* Same-step derivation — the exponent holds, the ratio switches.     */
/* Authority: Ken's type-scale audit 2026-07-27 (see DECISIONS.md).   */
/* Wins over the html-level data-type axis below 1024px by source     */
/* order; scoped [data-type] wrappers (explorer specimens) still win  */
/* inside their own subtree.                                          */
@media (max-width: 1023.98px) {
  :root {
    --type-size-md: var(--prim-number-scale-1-2-1-188rem); /* 19px */
    --type-size-lg: var(--prim-number-scale-1-2-1-438rem); /* 23px */
    --type-size-xl: var(--prim-number-scale-1-2-2-500rem); /* 40px */
    --type-size-2xl: var(--prim-number-scale-1-2-3-000rem); /* 48px */
    --type-size-3xl: var(--prim-number-scale-1-2-4-312rem); /* 69px */
    --type-role-headline-2-size: var(--prim-number-scale-1-2-1-438rem); /* 23px */
    --type-role-headline-3-size: var(--prim-number-scale-1-2-1-188rem); /* 19px */
    --type-role-body-lead-1-size: var(--prim-number-scale-1-2-1-188rem); /* 19px */
    --type-role-display-1-size: var(--prim-number-scale-1-2-3-000rem); /* 48px */
    --type-role-button-2-size: var(--prim-number-scale-1-2-1-438rem); /* 23px */
  }
}

/* ── Grid ───────────────────────────────────────────────────────────── */
/* Values: Figma-confirmed. Breakpoints (768/1024/1600px): ASSUMED.     */
/* --grid-gutter is viewport-driven (16px xs/sm, 24px md/lg),          */
/* distinct from density-responsive --layout-spacing-sm.                */
/* xs default: 4-col Stretch */
:root {
  --grid-max-width: 1200px;
  --grid-columns: 4;
  --grid-gutter: 16px;
  --grid-margin: 16px;
}
/* sm: 8-col Stretch, gutter + margin unchanged */
@media (min-width: 768px) {
  :root {
    --grid-columns: 8;
  }
}
/* md+: 12-col Center, 78px col-width, 24px gutter */
@media (min-width: 1024px) {
  :root {
    --grid-columns: 12;
    --grid-gutter: 24px;
    --grid-margin: 0px;
    --grid-col-width: 78px;
  }
}
/* lg (1600px+): same as md — no additional block needed */