/* ==========================================================================
   Zero Bola design tokens
   Load order: variables.css, reset.css, base.css, layout.css, components.css
   ========================================================================== */

:root {
  /* Brand palette (fixed by the brand guide) */
  --lead: #1F3F3A;
  --energy: #6FC32E;
  --depth: #005150;
  --accent: #26D680;
  --clarity: #F9F7F6;
  --gap: 1.25rem;

  /* Derived neutrals. All text pairings are contrast checked in README.md */
  --mist: #E8EFEC;          /* light section tint */
  --sage: #C9D8D3;          /* secondary text on dark sections */
  --lead-muted: #3E5A55;    /* secondary text on light sections */
  --white: #FFFFFF;
  --line: rgb(31 63 58 / 0.16);
  --line-strong: rgb(31 63 58 / 0.42);
  --line-on-dark: rgb(249 247 246 / 0.2);

  /* Theme slots. Sections swap these with .theme-dark or .theme-energy */
  --text: var(--lead);
  --heading: var(--depth);
  --muted: var(--lead-muted);
  --link: var(--depth);
  --link-hover-line: var(--energy);
  --focus: var(--depth);
  --surface: var(--clarity);

  /* Typography */
  --font-display: "Polly Rounded", "Polly Rounded Fallback", Arial, sans-serif;
  --font-body: "Helvetica Neue", "Helvetica Neue Fallback", Arial, sans-serif;

  /* Fluid type scale, ratio about 1.25 */
  --step--1: 0.875rem;
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --step-1: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --step-2: clamp(1.375rem, 1.22rem + 0.75vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.45vw, 2.5rem);
  --step-4: clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);
  --step-5: clamp(2.375rem, 1.5rem + 4.2vw, 4.75rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --measure: 66ch;

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: var(--gap);
  --space-l: 2rem;
  --space-xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --space-2xl: clamp(3.5rem, 2.4rem + 5vw, 7rem);
  --gutter: clamp(1rem, 0.5rem + 3vw, 2.5rem);
  --container: 75rem;

  /* Shape and depth */
  --radius-s: 0.375rem;
  --radius-m: 0.75rem;
  --radius-pill: 999px;
  --arch: 999px 999px 0 0;
  --arch-soft: 50% 50% 0 0 / 26% 26% 0 0;
  --shadow-drawer: -12px 0 40px rgb(31 63 58 / 0.22);

  /* Layers */
  --z-header: 50;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur-med: 280ms;
}

/* Dark sections: hero, recognition band, footer */
.theme-dark {
  --text: var(--clarity);
  --heading: var(--clarity);
  --muted: var(--sage);
  --link: var(--clarity);
  --link-hover-line: var(--energy);
  --focus: var(--accent);
  --surface: var(--lead);
  --line: var(--line-on-dark);
}

/* Bright call to action band */
.theme-energy {
  --text: var(--lead);
  --heading: var(--lead);
  --muted: var(--lead);
  --link: var(--lead);
  --link-hover-line: var(--lead);
  --focus: var(--lead);
  --surface: var(--energy);
}