/* Bright Reference — design tokens.
   Colours / type / spacing come from theme.json (--wp--preset--*). This file adds
   semantic aliases, surface hierarchy and motion tokens. Accent is overridden from Bright Settings. */
:root {
  --br-accent: #7266E4;
  --br-accent-ink: #5B4FD1;           /* hover / text-on-light accent */
  --br-accent-wash: color-mix(in srgb, var(--br-accent) 9%, transparent);
  --br-accent-line: color-mix(in srgb, var(--br-accent) 35%, transparent);
  --br-signal: #00ABEB;

  /* surface hierarchy */
  --br-s0: var(--wp--preset--color--paper);       /* page */
  --br-s1: var(--wp--preset--color--surface);     /* raised */
  --br-s2: var(--wp--preset--color--sunken);      /* recessed */
  --br-s-dark: var(--wp--preset--color--graphite);
  --br-s-dark-2: var(--wp--preset--color--graphite-2);

  --br-text: var(--wp--preset--color--ink);
  --br-text-muted: var(--wp--preset--color--muted);
  --br-text-on-dark: #F4F3EF;
  --br-text-on-dark-muted: #A3A3AE;

  --br-line: var(--wp--preset--color--line);
  --br-line-dark: rgb(255 255 255 / 0.10);
  --br-border: 1px solid var(--br-line);

  --br-radius-sm: var(--wp--custom--radius--sm);
  --br-radius-md: var(--wp--custom--radius--md);
  --br-radius-lg: var(--wp--custom--radius--lg);

  --br-shadow-1: 0 1px 0 rgb(14 14 16 / 0.04), 0 1px 2px rgb(14 14 16 / 0.05);
  --br-shadow-2: 0 1px 0 rgb(14 14 16 / 0.04), 0 8px 24px -8px rgb(14 14 16 / 0.12);

  /* motion */
  --br-dur-instant: var(--wp--custom--motion--duration--instant);
  --br-dur-fast: var(--wp--custom--motion--duration--fast);
  --br-dur-base: var(--wp--custom--motion--duration--base);
  --br-dur-slow: var(--wp--custom--motion--duration--slow);
  --br-dur-scene: var(--wp--custom--motion--duration--scene);
  --br-ease: var(--wp--custom--motion--ease--standard);
  --br-ease-out: var(--wp--custom--motion--ease--out);
  --br-ease-in-out: var(--wp--custom--motion--ease--in-out);

  /* pacing of pinned scenes, in viewport heights (tuned in one place) */
  --br-scene-length: 300vh;
}
@media (max-width: 1023px) { :root { --br-scene-length: 200vh; } }
@media (max-width: 767px)  { :root { --br-scene-length: 100vh; } }
@media (prefers-reduced-motion: reduce) {
  :root { --br-dur-fast: 0ms; --br-dur-base: 0ms; --br-dur-slow: 0ms; --br-dur-scene: 0ms; }
}