/**
 * Design tokens — No Limits Adventure brand foundation
 * Source: docs/Final Typography and Branding Colors decision.md
 */

@layer tokens {
:root {
  /* —— Colors —— */
  --color-charcoal: #242424;
  --color-green: #7dbb56;
  --color-green-dark: #59863d;
  --color-gold: #FFD54D;
  --color-gold-dark: #E0AC00;
  --color-gold-soft: #FFE285;
  --color-red: #B22222;
  --color-bg: #fffaeb;
  --color-bg-soft: #fcfaf7;
  --color-white: #ffffff;

  --color-text: var(--color-charcoal);
  --color-text-muted: color-mix(in srgb, var(--color-charcoal) 65%, transparent);
  --color-border: color-mix(in srgb, var(--color-charcoal) 12%, transparent);
  --color-focus: var(--color-green);

  /* —— Typography —— */
  --font-display: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;

  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --text-lg: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --text-xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --text-2xl: clamp(2.25rem, 1.6rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.75rem, 1.8rem + 3.5vw, 4.5rem);
  --text-4xl: clamp(3.25rem, 2rem + 4.5vw, 5.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --tracking-display: 0.02em;

  /* —— Spacing (4px base) —— */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* —— Layout —— */
  --container-sm: 40rem;
  --container-md: 48rem;
  --container-lg: 72rem;
  --container-xl: 80rem;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --section-space: clamp(3rem, 2rem + 4vw, 6rem);
  /* Sticky header height. JS replaces this with the measured value. */
  --ace-header-offset: 6.5rem;

  /* —— Radii —— */
  --radius-sm: 0.15rem;
  --radius-md: 0.30rem;
  --radius-lg: 0.45rem;
  --radius-pill: 999px;

  /* —— Shadows (restrained) —— */
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--color-charcoal) 8%, transparent);
  --shadow-md: 0 4px 16px color-mix(in srgb, var(--color-charcoal) 10%, transparent);

  /* —— Motion —— */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 150ms;
  --duration: 250ms;

  /* —— Controls —— */
  --control-height: 3.25rem;
  --control-padding-x: 1.6rem;
}

@media (max-width: 64rem) {
  :root {
    --ace-header-offset: 4.5rem;
  }
}
}