/*
 * PaceOut canonical design tokens.
 *
 * This is the only :root token declaration in the public site. The
 * --po-foundation-* and --po-content-* names are semantic aliases for older
 * route-family selectors; they live here so every page resolves the same
 * values. Components belong in paceout-shared-shell.css or their page-family
 * stylesheet, never in another token root.
 */
:root {
  /* Brand surfaces */
  --po-ink: #080807;
  --po-ink-soft: #121210;
  --po-card: #141416;
  --po-card-raised: #201c17;
  --po-card-premium-accent: #201c17;
  --po-paper: #f7f4ee;
  --po-paper-soft: #e9e2d6;
  --po-white: #fffdfa;

  /* Content colours */
  --po-text: #fffdfa;
  --po-text-soft: #c4c1b9;
  --po-text-dim: #a7a49b;
  --po-paper-text: #191916;
  --po-paper-dim: #5c5950;
  --po-orange: #ff6b00;
  --po-orange-light: #ff8c3a;
  --po-orange-wash: #ffe2cf;
  --po-green: #59d887;
  --po-green-on-paper: #348d50;
  --po-amber: #f2b74f;
  --po-coral: #f47864;

  /* Borders and geometry */
  --po-border-dark: rgba(255, 253, 248, .14);
  --po-border-dark-strong: rgba(255, 253, 248, .28);
  --po-border-paper: rgba(25, 25, 22, .16);
  --po-border-paper-strong: rgba(25, 25, 22, .28);
  --po-line: rgba(255, 253, 248, .14);
  --po-line-dark: rgba(25, 25, 22, .16);
  --po-radius-chip: 6px;
  --po-radius-control: 14px;
  --po-radius-card: 22px;
  --po-radius-stage: 28px;
  --po-radius-frame: 32px;
  --po-radius-pill: 999px;
  --po-radius: 22px;

  /* Layout and type */
  --po-max: 1180px;
  --po-copy: 720px;
  --po-foundation-content-max: var(--po-max);
  --po-content-max: var(--po-max);
  --po-font-display: clamp(2.2rem, 9.5vw, 5.8rem);
  --po-font-h2: clamp(1.8rem, 7.5vw, 4.5rem);
  --po-font-h3: clamp(1.25rem, 5.5vw, 2rem);
  --po-font-eyebrow: .72rem;
  --po-font-body-lede: 1.05rem;
  --po-font-body: .94rem;
  --po-font-caption: .72rem;
  --po-font-button: .88rem;
  --po-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --po-font-serif: Georgia, "Times New Roman", serif;
  --po-weight-regular: 400;
  --po-weight-semibold: 600;
  --po-weight-bold: 700;
  --po-weight-extrabold: 800;

  /* Spacing */
  --po-space-1: 4px;
  --po-space-2: 8px;
  --po-space-3: 12px;
  --po-space-4: 16px;
  --po-space-5: 20px;
  --po-space-6: 24px;
  --po-space-8: 32px;
  --po-space-12: 48px;
  --po-space-16: 64px;
  --po-space-21: 84px;
  --po-space-30: 120px;

  /* Motion and systemic layers */
  --po-ease: cubic-bezier(.16, 1, .3, 1);
  --po-duration-micro: .2s;
  --po-duration-medium: .35s;
  --po-duration-scene: .7s;
  --po-nav-height: 74px;
  --po-shadow: 0 24px 80px rgba(0, 0, 0, .22);
  --po-z-skip: 100;
  --po-z-sticky: 40;
  --po-z-overlay: 60;

  /* Semantic aliases: the single compatibility layer for route families. */
  --po-foundation-ink: var(--po-ink);
  --po-foundation-ink-soft: var(--po-ink-soft);
  --po-foundation-paper: var(--po-paper);
  --po-foundation-white: var(--po-white);
  --po-foundation-muted: var(--po-text-soft);
  --po-foundation-dim: var(--po-text-dim);
  --po-foundation-paper-text: var(--po-paper-text);
  --po-foundation-paper-muted: var(--po-paper-dim);
  --po-foundation-orange: var(--po-orange);
  --po-foundation-orange-light: var(--po-orange-light);
  --po-foundation-green: var(--po-green);
  --po-foundation-amber: var(--po-amber);
  --po-foundation-coral: var(--po-coral);
  --po-foundation-border-dark: var(--po-border-dark);
  --po-foundation-border-light: var(--po-border-paper);
  --po-foundation-radius-control: var(--po-radius-pill);
  --po-foundation-radius-card: var(--po-radius-card);
  --po-foundation-radius-frame: var(--po-radius-frame);
  --po-foundation-nav-height: var(--po-nav-height);
  --po-foundation-ease: var(--po-ease);

  --po-content-orange: var(--po-orange);
  --po-content-orange-soft: var(--po-orange-light);
  --po-content-ink: var(--po-ink);
  --po-content-line: var(--po-line);

  --paceout-ink: var(--po-ink);
  --paceout-ink-soft: var(--po-ink-soft);
  --paceout-paper: var(--po-paper);
  --paceout-white: var(--po-white);
  --paceout-text-soft: var(--po-text-soft);
  --paceout-text-dim: var(--po-text-dim);
  --paceout-paper-text: var(--po-paper-text);
  --paceout-paper-dim: var(--po-paper-dim);
  --paceout-orange: var(--po-orange);
  --paceout-orange-light: var(--po-orange-light);
  --paceout-green: var(--po-green);
  --paceout-amber: var(--po-amber);
  --paceout-coral: var(--po-coral);
  --paceout-content-max: var(--po-max);
  --paceout-touch-target: 48px;
  --paceout-ease: var(--po-ease);
  --paceout-radius-sm: var(--po-radius-chip);
  --paceout-radius-md: var(--po-radius-control);
  --paceout-radius-lg: var(--po-radius-card);
  --paceout-focus: 3px solid var(--po-orange-light);
}

/* The reset is intentionally tiny. Shared shell owns visible components. */
html { box-sizing: border-box; background: var(--po-ink); }
*, *::before, *::after { box-sizing: inherit; }
img, svg, video, canvas { max-width: 100%; }