/* Site tokens: what the public pages add to the product's tokens, and nothing they replace.
   The site links core/ui/tokens.css first, so every colour, the type scale up to 28 px, the space
   scale, radii, motion and both themes come from the product's one file; a rebrand there reaches
   the product and the site together. This file adds only what a marketing page needs and the
   product never draws: display type, section rhythm, the page column, the hero frame and the brand mark's ink. Raw values live here and in core/ui/tokens.css and nowhere else; the
   page lint (linenglass lint --pages site/src) fails on any raw value outside these token blocks.
   The product's name is not a token here: it lives once in brand/brand.json and the build writes
   it into every page. */

:root {
  /* display type: two sizes above the product's 28 px, fluid between a phone and a wide screen */
  --fs-display: clamp(2.25rem, 1.35rem + 3.2vw, 3.75rem);
  --fs-section: clamp(1.75rem, 1.45rem + 1.1vw, 2.5rem);
  --lh-display: 1.04;
  --lh-section: 1.12;
  --track-display: -0.02em;
  --track-section: -0.016em;
  --track-body: -0.006em;
  --track-wordmark: 0.187em;
  --track-wordmark-phone: 0.06em;
  --fw-bold: 650;

  /* page rhythm */
  --page-max: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --sec-y: clamp(64px, 9vw, 128px);
  --sec-gap: clamp(24px, 3vw, 40px);
  --stack-1: var(--s2);
  --stack-2: var(--s4);
  --stack-3: var(--s6);
  --nav-h: 60px;

  /* the live product frame in the hero, and the smaller frames in sections */
  --hero-frame-h: clamp(560px, 70vh, 780px);
  --frame-h: clamp(420px, 52vh, 560px);
  --frame-r: 12px;
  --frame-bar-h: 36px;

  /* the brand mark: one ink in both themes, drawn with currentColor */
  --mark: 28px;
  --mark-lg: 44px;
  --mark-ink: var(--ink);

  /* code blocks */
  --code-bg: var(--bg-2);
  --code-pad: var(--s4);

  /* landing layers: alternate sections, the footer, the hero frame's bar and its edge; dark steps them down the surface ladder */
  --surface-band: var(--bg-2);
  --surface-foot: transparent;
  --frame-bar: var(--bg-2);
  --frame-line: var(--line);

  /* site motion reuses the product's glide; an element entering the page moves this far */
  --enter-y: 12px;

  /* the site library: the numbered step badge, the catalogue's cells, swatches, the phone-width stage, the large mark */
  --step-n: 40px;
  --cat-cell: 280px;
  --demo-phone-w: 390px;
  --demo-box: 72px;
  --swatch-h: 56px;
  --mark-xl: 120px;
}

[data-theme="dark"] {
  --surface-band: var(--l-chrome);
  --surface-foot: var(--l-well);
  --frame-bar: var(--l-chrome);
  --code-bg: var(--l-well);
  --frame-line: var(--line-2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-band: var(--l-chrome);
    --surface-foot: var(--l-well);
    --frame-bar: var(--l-chrome);
    --code-bg: var(--l-well);
    --frame-line: var(--line-2);
  }
}

/* Media queries cannot read custom properties, so the one breakpoint the site uses (768px, the
   product's phone width) is written in the @media preludes of site.css, which the lint exempts. */

/* Increased contrast: hairlines take each theme's quiet ink, so every divider, field and card edge is visible,
   and every button and frame keeps a visible border. The selectors repeat the product's theme blocks so these
   values win over them in the light theme, the dark theme and the system dark theme alike. */
@media (prefers-contrast: more) {
  :root, :root[data-theme], :root:not([data-theme="light"]) {
    --line: var(--ink-3);
    --line-2: var(--ink-3);
  }
  body .bk-btn:not([data-variant="primary"]) { border: var(--hair) solid var(--ink-3); }
  body .s-frame { border: var(--hair) solid var(--ink-3); }
}