:root {
  --surface-0: #0B0F14;   
  --surface-1: #15191D;
  --surface-2: #1F2227;
  --surface-3: #2B2E33;
  --surface-4: #393D41;

  --line-0: #14191E;
  --line-1: #1C2127;
  --line-2: #272D33;

  --ink-primary: var(--color-white);
  --ink-secondary: #C7CBCE;   
  --ink-muted: #7F898F;       
  --ink-on-dark: var(--color-white);

  --bg-page: var(--surface-0);
  --bg-raised: var(--surface-1);
  --bg-sunken: var(--surface-2);
  --border-default: var(--line-1);
  --border-strong: var(--line-2);
  --border-hairline: var(--line-0);

  color-scheme: dark;
}

:root {
  --text-display-sm: clamp(2.50rem, 5vw + 1rem, 3.75rem);  
  --text-display-md: clamp(3.25rem, 7vw + 1rem, 5.50rem);  
  --text-display-lg: clamp(4.00rem, 9vw + 1rem, 7.50rem);  

  --leading-display: 0.94;
  --tracking-display: -0.035em;
}

:root {
  --measure-prose: 62ch;
  --measure-lede: 48ch;
  --measure-display: 16ch;
  --container-marketing: 1120px;
  --container-narrow: 720px;
  --gutter: var(--space-5);
  --section-y: clamp(var(--space-7), 9vw, var(--space-9));
}

:root {
  --lane-spine-width: 1px;
  --lane-spine-color: var(--border-strong);
  --lane-spine-active: var(--color-scout-lime);
  --lane-node-size: 10px;
  --lane-node-ring: 3px;
  --lane-inset: clamp(var(--space-5), 6vw, var(--space-8));
}

:root {
  --duration-scroll: 600ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:root {
  --chroma-budget-accent: 5%;    
  --chroma-budget-structure: 15%;
  --chroma-budget-neutral: 80%;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--border-width-thick) solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:where(a, button, input, textarea, select, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

:root {
  --tap-target-min: 44px;   

  --btn-height: 48px;
  --btn-padding-x: var(--space-5);
  --btn-radius: var(--radius-md);

  --field-height: 52px;
  --field-radius: var(--radius-md);
  --field-border: var(--border-strong);
  --field-border-focus: var(--color-scout-lime);
  --field-border-error: var(--color-danger);

  --card-padding: var(--space-6);
  --card-radius: var(--radius-lg);
  --card-bg: var(--bg-raised);
  --card-border: var(--border-default);
}

:where(a, button)[data-tap] {
  position: relative;
}
:where(a, button)[data-tap]::after {
  content: "";
  position: absolute;
  inset: 50% 0 0 50%;
  width: max(100%, var(--tap-target-min));
  height: max(100%, var(--tap-target-min));
  transform: translate(-50%, -50%);
}

:root {
  --font-display: var(--font-sans);
  --font-numeric: var(--font-mono);   
}

.u-display {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-display-md);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  max-width: var(--measure-display);
  text-wrap: balance;
}
.u-lede {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--ink-secondary);
  max-width: var(--measure-lede);
  text-wrap: pretty;
}
.u-prose { max-width: var(--measure-prose); text-wrap: pretty; }
.u-numeric {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
}

.u-eyebrow {
  font-family: var(--font-numeric);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-scout-lime);
}