/*
  Rev Republic design tokens
  Source: Brand Book v1.0, sections 10, 11 and 12.

  Three colours. No tints, no gradients, no fourth colour.
  If you are reaching for a value that is not in this file, stop.
*/

:root {
  /* ---- Colour. Brand Book 10. ---- */
  --black: #0B0B0B;
  --white: #FFFFFF;
  --red: #ED1C24;

  /* The only permitted derivations: transparency of the three, used for
     hairlines and muted text. Never a tint, never a faded red. */
  --line: rgba(255, 255, 255, 0.16);
  --line-strong: rgba(255, 255, 255, 0.34);
  --muted: rgba(255, 255, 255, 0.62);
  --line-dark: rgba(11, 11, 11, 0.16);
  --muted-dark: rgba(11, 11, 11, 0.66);

  /* ---- Type. Brand Book 12. ----
     Display is Poppins. The book also names Impact; Impact is a desktop
     font with no web equivalent, so Poppins carries display on the web. */
  --font-display: 'Poppins', 'Arial Black', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  --tracking-display: 0.02em;
  --tracking-mono: 0.16em;

  /* Fluid scale. No breakpoint jumps. */
  --t-mega: clamp(3rem, 1.1rem + 8.4vw, 8.5rem);
  --t-hero: clamp(2.5rem, 1.3rem + 5.2vw, 5.5rem);
  --t-h2: clamp(2rem, 1.3rem + 3vw, 3.75rem);
  --t-h3: clamp(1.375rem, 1.15rem + 0.95vw, 1.875rem);
  --t-lede: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-micro: 0.6875rem;

  /* ---- Space. 8px base. ---- */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 3rem;
  --s6: 4rem;
  --s7: 6rem;
  --s8: 9rem;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --container: 1280px;
  --measure: 60ch;
  --section-y: clamp(4.5rem, 10vw, 9rem);

  --nav-h: 72px;

  /* Brand Book 08: the badge never goes below 64px on screen. */
  --badge-min: 64px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 200ms;
}

/* -----------------------------------------------------------------
   Folds. Brand Book 11: black leads, white breathes, red accents.
   A section declares its fold and the foreground follows.
   ----------------------------------------------------------------- */

.fold-black {
  background: var(--black);
  color: var(--white);
}

.fold-white {
  background: var(--white);
  color: var(--black);
  --line: var(--line-dark);
  --line-strong: rgba(11, 11, 11, 0.34);
  --muted: var(--muted-dark);
}

/* High-energy moments only. Never long paragraphs on flat red. */
.fold-red {
  background: var(--red);
  color: var(--white);
  --line: rgba(255, 255, 255, 0.3);
  --line-strong: rgba(255, 255, 255, 0.55);
  --muted: rgba(255, 255, 255, 0.86);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}