/* The landing page's names, pointed at the generated tokens.
 *
 * The page used to define its own :root: all sixteen type roles, the tracking, the
 * weights and the colours, hand-copied from the same Figma file the app copied them
 * from. Three copies existed and they had already diverged - this page said
 * --ink: #0A0A0B where the variable says #000000, and it carried two sizes, 17px and
 * 19px, that are not on the 1.125 scale at all.
 *
 * This file is the only place the page's vocabulary meets the generated one. Nothing
 * below invents a value: every right-hand side is a token from
 * @acrostic/tokens, which is generated from the Figma variables and tested.
 *
 * It is deliberately a BRIDGE and not a rename. Renaming 1,711 lines of working
 * markup in the same change that repoints the tokens would make any visual difference
 * impossible to attribute. The names go when the sections are rebuilt, one at a time. */

:root {
  /* ---- colour ---- */
  /* The marketing page inverts the app's ground: white page, F9F9FA for recessed
     bands. That is a page-level design choice rather than a drift, so it is kept and
     named honestly instead of being flattened into the app's arrangement. */
  --paper: #FFFFFF;
  --well:  var(--color-surface-page);

  /* Was #0A0A0B. The bound variable is #000000, and the near-black was a third
     spelling of body text that nothing chose on purpose. */
  --ink:   var(--color-text-body);
  --ink-3: var(--color-text-placeholder);
  /* --ink-2 is not redefined: the generated token is already #4C4C52, which is what
     this page had. Restating it as var(--ink-2) would be a self reference, and a
     self referential custom property is invalid at computed value time - it does not
     fall back, it drops. */

  --line:   var(--color-border-default);
  --line-2: var(--color-border-default);

  /* Chrome: the dark nav and footer. Not in Figma, and the marketing page's four
     values are each a shade off the app's (#0A0A0B vs #0B0B0C, #F2F2F4 vs #ECECEF,
     #777C84 vs #85858D, #232327 vs #202024). Nobody chose that; they were typed
     twice. Kept AS THE PAGE HAS THEM here, because repointing tokens and restyling
     the chrome in one change makes any visual difference impossible to attribute.
     Reconciling them is a separate, deliberate edit. */
  --chrome:       #0A0A0B;
  --chrome-ink:   #F2F2F4;
  --chrome-muted: var(--color-text-placeholder);
  --chrome-line:  #232327;

  /* ---- type ---- */
  --font: var(--font-sans);
  --display: var(--font-sans);
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --track-display: var(--t-display-large-tracking);
  --track-heading: var(--t-heading-h1-tracking);
  --track-stat:    var(--t-display-large-tracking);
  --track-micro:   .18em;

  --w-display: var(--t-display-large-weight);
  --w-heading: var(--t-heading-h1-weight);
  --w-subhead: var(--t-heading-h3-weight);
  --w-label:   var(--t-label-large-weight);
  --w-body:    var(--t-link-medium-weight);

  --fs-display-lg: var(--t-display-large-size);
  --fs-display-md: var(--t-display-medium-size);
  --fs-display-sm: var(--t-display-small-size);
  --fs-display-xs: var(--t-display-xsmall-size);
  --fs-h1: var(--t-heading-h1-size);
  --fs-h2: var(--t-heading-h2-size);
  --fs-h3: var(--t-heading-h3-size);
  --fs-h4: var(--t-heading-h4-size);
  --fs-body-lg: var(--t-link-large-size);
  --fs-body-md: var(--t-link-medium-size);
  --fs-body-sm: var(--t-link-small-size);
  --fs-caption: var(--t-caption-size);
  --fs-label-lg: var(--t-label-large-size);
  --fs-label-md: var(--t-label-medium-size);
  --fs-label-sm: var(--t-label-small-size);
  --fs-label-xs: var(--t-label-xsmall-size);

  /* The page uses RATIOS for fluid display type, which a fixed px leading cannot
     carry. Derived from the generated pairs rather than retyped, so they cannot drift
     from the sizes above. */
  --lh-display: calc(var(--t-display-large-line) / var(--t-display-large-size));
  --lh-heading: calc(var(--t-heading-h1-line) / var(--t-heading-h1-size));
  --lh-body:    calc(var(--t-link-medium-line) / var(--t-link-medium-size));

  --wrap: 1180px;
}