/* Page-level tokens that extend brand/tokens.css, shared by the report app (b26/app), this site and the landing (b26/site4).
   The brand file stays a verbatim copy of b26/brand4/tokens.css; every value a page needs beyond it lives here, so
   components.css and each page.css hold no raw values. */
:root {
  /* Display sizes. The landing h1 and the stat numbers scale with the viewport; every other heading is fixed. */
  --fs-hero: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --fs-stat: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  --fs-statement: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  --fs-close: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --fs-mono: 0.8125rem;

  /* Sizes */
  --size-stage: 31rem;
  --size-diff: 25rem;
  --size-cell: 1.375rem;
  --size-chip: 1.375rem;
  --size-num: 1.25rem;
  --size-bar: 2px;
  --size-swatch: 0.5rem;
  --size-mark: 1.125rem;
  --size-mark-small: 0.9375rem;
  --size-col: 18rem;
  --size-illo: 4.5rem;
  --size-gate: 9rem;
  --size-token: 2rem;
  --size-node: 0.5rem;
  --size-pill: 999px;
  --size-label: 7rem;
  --size-caret: 0.9em;
  --size-gap-bar: 2px;
  --size-knob: 0.875rem;
  --size-switch: 1.25rem;
  --size-area: 6rem;
  --size-menu: 15rem;
  --size-pop: 17.5rem;
  --size-dialog: 30rem;
  --size-cmdk: 36rem;
  --size-side: 15rem;
  --size-screen: 100svh;
  --o-disabled: 0.4;
  /* Focus: a 2 px accent ring held 2 px off the control; rows draw it inside their own edge */
  --size-focus-ring: 2px;
  --size-focus-offset: 2px;
  /* Overlays open from 98 percent scale at their origin */
  --scale-pop: 0.98;
  --d-caret: 900ms;
  --d-spin: 800ms;

  /* Motion: one autoplay step and one 150 ms entrance */
  /* Landing hero and liveliness: a larger display size, a press, a spring settle and one scroll reveal */
  --fs-display: clamp(2.5rem, 0.9rem + 4.4vw, 4.875rem);
  --track-hero: -0.03em;
  --size-tile-art: 16rem;
  --size-shot-float: 19rem;
  --d-press: 80ms;
  --scale-press: 0.98;
  --d-settle: 300ms;
  --d-swap: 4000ms;
  --d-scan: 2600ms;
  --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --shift-rise: 0.75rem;
  --tilt: 3deg;
  --shift-parallax: 0.375rem;
  --d-auto: 7000ms;
  --d-type: 28ms;
  --d-reveal: 150ms;
  --d-travel: 150ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shift-reveal: 0.5rem;
  --blur-reveal: 0;
}

/* Colour roles built from brand tokens. Declared on every theme scope so a dark region resolves its own values. */
:root, [data-theme] {
  --c-marker: var(--c-accent-soft);
  --c-page-tint: var(--c-bg);
  --c-diff-unran: var(--c-unran-line);
  --c-diff-ran: var(--c-ran);
  --c-scan: var(--c-ink);
  --c-scrim: color-mix(in srgb, var(--p-ink-950) 40%, transparent);
  --c-ring-error: color-mix(in srgb, var(--c-failed) 28%, transparent);
  /* The one elevation: menus, the command menu, dialogs and toasts only. A hairline does the edge; this soft, tight
     shadow only lifts the overlay off the page. Nothing else casts a shadow. */
  --elev-overlay: 0 4px 16px -4px color-mix(in srgb, var(--p-ink-950) 12%, transparent), 0 1px 2px color-mix(in srgb, var(--p-ink-950) 6%, transparent);
}
/* On black a light shadow vanishes, so the dark overlay shadow is deeper */
[data-theme="dark"] {
  --elev-overlay: 0 8px 24px -6px color-mix(in srgb, var(--p-ink-950) 80%, transparent), 0 1px 2px color-mix(in srgb, var(--p-ink-950) 60%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-reveal: 0.01ms; --d-travel: 0.01ms; --shift-reveal: 0; --shift-rise: 0; --tilt: 0deg; --shift-parallax: 0; --d-settle: 0.01ms; }
}