/* Joyful Rides brand system v1. Sample components require application a11y tests. */
:root {
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --radius-control: 8px; --radius-panel: 12px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --ease: cubic-bezier(.2,0,0,1); --duration-quick: 160ms; --duration-standard: 240ms;
  --background: #F7F3EA;
  --text: #173D36;
  --muted: #53665E;
  --action: #245643;
  --onAction: #F7F3EA;
  --link: #247783;
  --surface: #DFEDF0;
  --focus: #AA513D;
}
[data-theme="dark"] {
  --background: #102B26;
  --text: #F7F3EA;
  --muted: #C8DBD2;
  --action: #F2B544;
  --onAction: #173D36;
  --link: #8AD3DC;
  --surface: #173D36;
  --focus: #F2B544;
}
.jr { background:var(--background);color:var(--text);font:400 1rem/1.5 var(--font-body); }
.jr h1 {font:700 clamp(3rem,6vw,5rem)/1 var(--font-display);letter-spacing:-.025em;}
.jr h2 {font:600 clamp(1.75rem,3vw,2.5rem)/1.12 var(--font-display);}
.jr p {max-width:65ch;}
.jr button {font:600 1rem/1.2 var(--font-body);min-height:48px;padding:12px 20px;border-radius:var(--radius-control);}
.jr .primary {background:var(--action);color:var(--onAction);border:2px solid var(--action);}
.jr a {color:var(--link);text-decoration:underline;text-underline-offset:.2em;}
.jr :focus-visible {outline:3px solid var(--focus);outline-offset:4px;}
.jr .metric {font-variant-numeric:tabular-nums;}
.jr .ride-primary {font:600 clamp(2rem,8vw,3.5rem)/1.1 var(--font-body);}
@media(prefers-reduced-motion:reduce){.jr * {animation:none!important;transition:none!important;scroll-behavior:auto!important;}}