/* hayward.dev design tokens. Source of truth: /design.md */

:root {
  /* colour: navy on white. --accent fills buttons and tiles; --accent-ink is the same hue for text (AA on bg) */
  --bg: #FFFFFF;
  --surface: #EEF2FA;
  --surface-2: #DCE4F5;
  --text: #0B1530;
  --muted: #4A5568;
  --line: rgba(11, 21, 48, 0.12);
  --line-strong: #0B1530;
  --accent: #1E3A8A;
  --on-accent: #FFFFFF;
  --accent-ink: #1E3A8A;
  --caret: #F59E0B; /* typing cursor and keycap: gold, so it never blends into the navy name */
  /* hover rule (site-wide, never dark): white → navy, navy → amber gold */
  --hover-light: var(--accent);
  --on-hover-light: #FFFFFF;
  --hover-navy: #F59E0B;
  --on-hover-navy: #0B1530;

  /* type */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Inter Tight', system-ui, sans-serif;
  --fs-base: 16px;
  --display-scale: 1;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  --lh-tight: 0.84;
  --lh-body: 1.6;
  --tracking-display: -0.01em;
  --tracking-label: 0.08em;

  /* space (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1440px;

  /* shape + motion */
  --rule: 2px solid var(--text);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --reveal-distance: 40px;
}