/* Scott&Young — Direction B "The Studio Index" — design tokens
   Source: tmp-b/Scott&Young Home.dc.html (Claude Design export, 23 Oct 2026) + REDESIGN-PROPOSAL.md §2.
   Fluid sizes interpolate linearly between 390px and 1440px viewports. PREVIEW BUILD ONLY. */

/* ---------- Fonts (self-hosted woff2, font-display: swap) ---------- */
/* Ship only: Archivo variable (wght 400–700, wdth 100–112.5) OR static 400/500/600/700,
   IBM Plex Mono 500. Preload Archivo 700 + 400. Drop Bodoni Moda, Karla, Archivo 800/900. */

:root {
  /* ---------- Colour ---------- */
  --c-ground:      #F4F1EC; /* cream page ground */
  --c-paper:       #FBF9F5; /* row hover / card / input ground */
  --c-ink:         #12100F; /* charcoal: headings, rules, dark bands */
  --c-body:        #3A352F; /* body text            10.77:1 on ground */
  --c-label:       #5E574F; /* mono labels (DARKEST ALLOWED MIN) 6.31:1 on ground, 4.82:1 on tile */
  --c-accent:      #A8401C; /* terracotta: text, buttons, lead row, Pledge band  5.46:1 */
  --c-accent-ink:  #E07A52; /* terracotta on charcoal  6.39:1 */
  --c-on-ink:      #F4F1EC; /* text on charcoal */
  --c-label-on-ink:#C9C2B9; /* labels on charcoal 10.75:1 */
  --c-tile:        #D9D4CC; /* brand placeholder tile ground (3 tiles only) */
  --c-rule-soft:   #E6E1D9; /* inner hairline inside cards/forms (non-text) */
  --c-error:       #A8401C; /* errors reuse accent + icon-free text label */
  --c-focus:       #A8401C;
  --c-focus-on-ink:#E07A52;

  /* ---------- Families / widths / weights ---------- */
  --f-sans: 'Archivo', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --stretch-display: 112.5%;  /* SemiExpanded: display, h1–h3, row titles, wordmark, nav links */
  --stretch-text: 100%;       /* body, lead, small */
  --w-regular: 400;
  --w-medium: 500;            /* nav links, small, all mono */
  --w-semibold: 600;          /* row titles, h3, overlay links */
  --w-bold: 700;              /* display, h1, h2, wordmark, Pledge line */

  /* ---------- Type scale: 8 steps, nothing else ships ---------- */
  --t-display: clamp(3rem, 1.5143rem + 6.0952vw, 7rem);      /* 48 → 112 */
  --t-h1:      clamp(2.5rem, 1.7571rem + 3.0476vw, 4.5rem);  /* 40 → 72  */
  --t-h2:      clamp(2rem, 1.6286rem + 1.5238vw, 3rem);      /* 32 → 48  */
  --t-h3:      clamp(1.5rem, 1.3143rem + 0.7619vw, 2rem);    /* 24 → 32  */
  --t-lead:    clamp(1.1875rem, 1.1179rem + 0.2857vw, 1.375rem); /* 19 → 22 */
  --t-body:    1.0625rem;  /* 17 */
  --t-small:   0.9375rem;  /* 15 */
  --t-label:   0.9375rem;  /* 15: one step up from 13, and above the old 12px desktop label */

  /* line heights */
  --lh-display: 0.98;
  --lh-h1: 1.02;
  --lh-h2: 1.05;
  --lh-h3: 1.15;
  --lh-row: 1;      /* single-line row titles inside 88/72px rows */
  --lh-lead: 1.45;
  --lh-body: 1.6;
  --lh-small: 1.5;
  --lh-label: 1.4;

  /* tracking */
  --tr-display: -0.02em;
  --tr-h1: -0.02em;
  --tr-h2: -0.01em;
  --tr-h3: -0.005em;
  --tr-wordmark: -0.01em;
  --tr-body: 0;
  --tr-label: 0.12em;   /* mono, uppercase */
  --tr-price: 0.06em;   /* mono prices in ledger */
  --tr-email: 0.04em;   /* mono email address, not uppercase */

  /* ---------- Spacing (8px base) ---------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 160px;
  --section-pad: var(--s8);        /* sm/md: 64 */
  --band-pad: var(--s7);           /* Pledge band sm: 48 */

  /* ---------- Grid ---------- */
  --max: 1280px;
  --measure: 64ch;
  --rail: 0px;                      /* sm/md: rail collapses to inline label */
  --cols: 2;
  --gutter: var(--s4);              /* 16 */
  --margin: 20px;                   /* outer page margin sm (mock uses 24 at 390; 20 min) */

  /* ---------- Rows ---------- */
  --row-h: 72px;                    /* sm */
  --row-h-lg: 88px;

  /* ---------- Borders / radii ---------- */
  --rule: 1px solid var(--c-ink);
  --rule-on-ink: 1px solid var(--c-on-ink);
  --rule-soft: 1px solid var(--c-rule-soft);
  --radius: 0;                      /* B is square: buttons, inputs, tiles, overlay */
  --focus-ring: 2px solid var(--c-focus);
  --focus-offset: 2px;

  /* ---------- Controls ---------- */
  --btn-h-sm: 48px;   /* nav button */
  --btn-h: 56px;      /* standard / CTA band / overlay */
  --btn-h-lg: 64px;   /* hero primary */
  --tap-min: 44px;
  --nav-h: 72px;      /* sm/md */
  --input-h: 56px;
  --check: 24px;      /* checkbox target */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;   /* buttons, links, row bg */
  --dur-base: 200ms;   /* overlay fade, arrow slide */
  --dur-reveal: 300ms; /* row reveal */
  --stagger: 40ms;
  --arrow-shift: 8px;
  --rise: 8px;
}

@media (min-width: 600px) {          /* md */
  :root { --margin: 48px; --gutter: var(--s5); --cols: 4; --section-pad: var(--s9); }
}
@media (min-width: 960px) {          /* lg: rail appears, desktop nav */
  :root { --cols: 8; --rail: 112px; --gutter: var(--s6); --margin: 48px; --row-h: var(--row-h-lg); --nav-h: 88px; --band-pad: var(--s8); }
}
@media (min-width: 1280px) {         /* xl */
  :root { --margin: 80px; --section-pad: var(--s10); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-reveal: 0ms; --stagger: 0ms; --arrow-shift: 0px; --rise: 0px; }
}

/* Component measures. site.css uses these so it does not introduce raw lengths. */
:root {
  --wordmark-size: 19px;
  --overlay-link: 40px;
  --menu-label: 15px;
  --tile-label: 14px;
  --link-underline: 6px;
  --line-2: 2px;
  --px: 1px;
  --marker: 12px;
  --price-size: 15px;
  --col-n: 40px;
  --col-detail: 176px;
  --col-status: 32px;
  --col-arrow: 24px;
  --ledger-n: 64px;
  --ledger-price: 72px;
  --proof-w: 112px;
  --z-header: 50;
  --z-menu: 80;
  --u-off: 3px;
  --tick-w: 6px;
  --tick-h: 10px;
  --form-max: 640px;
  --field-min: 160px;
}
@media (min-width: 960px) {
  :root {
    --price-size: 22px;
    --wordmark-size: 22px;
    --col-n: 48px;
    --col-arrow: 32px;
    --ledger-price: 200px;
    --proof-w: 200px;
  }
}

/* ---------- Base helpers (optional, SCOTTY may restructure) ---------- */
.u-label { font: var(--w-medium) var(--t-label)/var(--lh-label) var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--c-label); }
.u-display { font-family: var(--f-sans); font-stretch: var(--stretch-display); font-weight: var(--w-bold); font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); text-wrap: balance; }
.u-h1 { font-family: var(--f-sans); font-stretch: var(--stretch-display); font-weight: var(--w-bold); font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); text-wrap: balance; }
.u-h2 { font-family: var(--f-sans); font-stretch: var(--stretch-display); font-weight: var(--w-bold); font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
.u-h3 { font-family: var(--f-sans); font-stretch: var(--stretch-display); font-weight: var(--w-semibold); font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); }
.u-lead { font: var(--w-regular) var(--t-lead)/var(--lh-lead) var(--f-sans); color: var(--c-body); max-width: var(--measure); text-wrap: pretty; }
.u-body { font: var(--w-regular) var(--t-body)/var(--lh-body) var(--f-sans); color: var(--c-body); max-width: var(--measure); }
.u-small { font: var(--w-medium) var(--t-small)/var(--lh-small) var(--f-sans); }
.u-tabular { font-variant-numeric: tabular-nums; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.on-ink :focus-visible { outline-color: var(--c-focus-on-ink); }