/* ============================================================
   Whinstone Studio — tokens.css
   Candidate A, "Specimen". Chosen 16 September 2026.
   Derived from whinstone-tokens-v2.css: the Candidate B block and
   its two dark-mode blocks are deleted (B stays in the project
   record for a different brand later), and Candidate A's tokens
   sit on :root. Nothing outside this file hard-codes a value.
   ============================================================ */

/* ---- §0 · Shared scales ---- */
:root {
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem;
  --measure: 62ch; --gutter: clamp(16px, 4vw, 40px); --container: 72rem;
  --radius-none: 0; --radius-sm: 2px; --radius-md: 4px;
  --border-hairline: 1px; --border-strong: 2px;
  --motion-settle-duration: 900ms; --motion-settle-ease: cubic-bezier(.2, .7, .2, 1);
  --motion-hover-duration: 160ms; --motion-hover-ease: ease-out;
  --target-min: 44px;
}

/* ---- §1 · Candidate A, "Specimen" ---- */
:root {
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --label-fvs: "wdth" 88, "wght" 500;
  --text-xs: .75rem; --leading-xs: 1.4; --tracking-xs: .06em;
  --text-sm: .875rem; --leading-sm: 1.5; --tracking-sm: .01em;
  --text-base: 1.0625rem; --leading-base: 1.55; --tracking-base: 0;
  --text-lg: 1.25rem; --leading-lg: 1.45; --tracking-lg: -.005em;
  --text-xl: 1.5rem; --leading-xl: 1.3; --tracking-xl: -.01em;
  --text-2xl: 2rem; --leading-2xl: 1.2; --tracking-2xl: -.015em;
  --text-3xl: 2.75rem; --leading-3xl: 1.08; --tracking-3xl: -.02em;
  --text-4xl: 4rem; --leading-4xl: 1; --tracking-4xl: -.025em;
  --text-wordmark: clamp(3.5rem, 14vw, 11rem); --leading-wordmark: .92; --tracking-wordmark: -.035em;
  --wordmark-from: "wdth" 118, "wght" 400;
  --wordmark-to: "wdth" 100, "wght" 700;
  /* The reveal's from-state (18 Sep 2026): WEIGHT ONLY. Animating the
     width axis changes advance widths, which changes line breaking — any
     heading near its wrap threshold jumped line count mid-reveal (worst:
     "Get in touch", two lines snapping to one in the narrow side column).
     Text now rises and fills in weight at its own fitted width. The
     label-voice variant holds wdth 88 for the PASS chip, whose box would
     otherwise swell and re-wrap its row. --wordmark-from keeps both axes:
     the lockups' travel and the nav mark's load settle are single-line
     and deliberate. */
  --reveal-from: "wght" 400;
  --reveal-from-label: "wdth" 88, "wght" 400;
  --wordmark-spacing-from: -.035em; --wordmark-spacing-to: -.035em;
  --bg-base: #EBE9E3; --bg-raised: #F5F4F0; --bg-sunken: #DFDCD4; --line: #C9C5BA; --line-strong: #17181A;
  --fg-primary: #17181A; --fg-secondary: #43454A; --fg-muted: #5E6066; --fg-on-ink: #EBE9E3;
  --accent: #4E6538; --accent-hover: #3E5129; --accent-active: #2F3E1F; --accent-disabled: rgba(78, 101, 56, .4); --accent-on-ink: #B7C79C;
  /* Highlighter wash tone — added 16 Sep evening with the v6 motion port;
     retired from use 17 Sep evening (the wash read out of place on the
     page). Kept in the palette, currently referenced by nothing. */
  --accent-wash: rgba(78, 101, 56, .25);
  --success: #2E6B3F; --warning: #7A5200; --error: #A12B2B;
  --button-bg-active: #000000;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-base: #151618; --bg-raised: #1D1E21; --bg-sunken: #0F1011; --line: #34363B; --line-strong: #ECEAE4;
    --fg-primary: #ECEAE4; --fg-secondary: #B9B6AE; --fg-muted: #8E8B84; --fg-on-ink: #151618;
    --accent: #A9BE8A; --accent-hover: #BDD09F; --accent-active: #CFE0B4; --accent-disabled: rgba(169, 190, 138, .4); --accent-on-ink: #4E6538;
    --accent-wash: rgba(169, 190, 138, .22);
    --success: #7FBF8E; --warning: #E0B25A; --error: #E88A8A; --button-bg-active: #FFFFFF;
  }
}
:root[data-theme="dark"] {
  --bg-base: #151618; --bg-raised: #1D1E21; --bg-sunken: #0F1011; --line: #34363B; --line-strong: #ECEAE4;
  --fg-primary: #ECEAE4; --fg-secondary: #B9B6AE; --fg-muted: #8E8B84; --fg-on-ink: #151618;
  --accent: #A9BE8A; --accent-hover: #BDD09F; --accent-active: #CFE0B4; --accent-disabled: rgba(169, 190, 138, .4); --accent-on-ink: #4E6538;
    --accent-wash: rgba(169, 190, 138, .22);
  --success: #7FBF8E; --warning: #E0B25A; --error: #E88A8A; --button-bg-active: #FFFFFF;
}

/* ---- §2 · Candidate B: deleted. See whinstone-tokens-v2.css in the
        project record. It has no business in this page. ---- */

/* ---- Component tokens derived from the semantic layer ---- */
:root {
  /* One type voice (16 Sep, defect D). Display type IS the wordmark's voice
     — wdth 100, wght 700 — and hierarchy comes from size alone. The width
     axis is a fitting and motion tool, not a style option: at rest the only
     widths on the page are 100 (all display and body type) and 88 (the
     specimen's small-label voice); 118 exists only as the LOCKUPS'
     from-state, travelled in motion and never rested on (18 Sep 2026: the
     general reveal travels weight only — animating wdth re-broke lines
     mid-reveal). References looked
     at 16 Sep: KOBU, Studio Freight, basement.studio — impact from size and
     fill, never condensation. */
  --display-fvs: "wdth" 100, "wght" 700;
  --text-display: clamp(2rem, 4vw, 3.25rem); --leading-display: 1.04; --tracking-display: -.015em;
  /* The rate — second-largest element on the page after the wordmark lockup */
  --text-price: clamp(3rem, 6vw, 5.5rem);
  /* The wordmark lockup: a deliberate two-line break, each line sized so it
     fills the measure exactly. Archivo at wdth 100 / wght 700 / -0.035em,
     uppercase, measures WHINSTONE = 5.982em and STUDIO = 3.6909em, so each
     line's size is measure / em-width. Container-relative (cqw) where
     supported — exact regardless of scrollbars — with viewport math as the
     fallback. */
  --wordmark-l1: calc((min(100vw, 72rem) - 2 * var(--gutter)) / 5.982);
  --wordmark-l2: calc((min(100vw, 72rem) - 2 * var(--gutter)) / 3.6909);
  /* Clip allowance for the lockup (17 Sep 2026, the "STUDIC" defect). The
     fit formulas size each line so its ADVANCE fills the measure, and that
     advance includes the trailing -.035em letter-space — so the final
     glyph's ink legitimately overhangs the measure by up to .035em of the
     line's size. A round terminal (the O of STUDIO) must pass the alignment
     line to look flush with a flat-sided one; a clip exactly at the measure
     shaves it flat. The mouse-follow no longer needs covering here: it
     trades wdth for wght (100->96.5 against 700->790, measured linear), so
     its widest state stays ON the measure to within .3% — that residual is
     the extra .015em below. Bleed = .035em trailing letter-space + .015em
     trade residual = .05em of line 2, the larger size. The settle's
     118-wide from-state still crosses the clip mid-flight (type sweeping
     in, by design), and fallback-font metrics still clip — that is the
     guard's actual job. */
  --wordmark-bleed: calc(var(--wordmark-l2) * .05);
  /* The stone between sections (17 Sep 2026): a fixed-height band, not the
     image's own 21:9 run — at full width the rock was the largest single
     element on the page, bigger than the rate. 22vw tracks the page's scale;
     the clamp keeps it a band, never shorter than 10rem nor taller than
     20rem. The image covers the frame and the drift moves inside it. */
  --texture-band: clamp(10rem, 22vw, 20rem);
  /* The ownership statement's size (17 Sep 2026, pacing pass): one line
     set alone between the price and the list. Above the section display
     voice at every width, below the wordmark — clearly the second-biggest
     type on the page. */
  --text-statement: clamp(2.25rem, 5vw, 4rem);
  --button-bg: var(--fg-primary); --button-fg: var(--fg-on-ink); --button-bg-hover: var(--fg-secondary);
  --button-bg-disabled: var(--bg-sunken); --button-fg-disabled: var(--fg-muted); --button-outline: var(--fg-primary);
  --button-height: 3rem; --button-padding-x: var(--space-6); --button-radius: var(--radius-none);
  --input-bg: var(--bg-raised); --input-border: var(--line); --input-border-focus: var(--fg-primary); --input-height: 3rem; --input-radius: var(--radius-none);
  --rule: var(--line); --rule-strong: var(--line-strong);
  --link: var(--accent); --link-hover: var(--accent-hover); --link-underline-offset: .18em;
  --focus-ring: var(--fg-primary);
}

@supports (font-size: 1cqw) {
  :root {
    --wordmark-l1: calc(100cqw / 5.982);
    --wordmark-l2: calc(100cqw / 3.6909);
  }
}

/* ---- Reduced motion: both durations become zero, globally ---- */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-settle-duration: 0ms; --motion-hover-duration: 0ms; }
}