/**
 * AllinBand — Tokens
 * Nature and care: dark forest ground, warm white text, one amber accent.
 * Surfaces are "mist" (bruma): a moss veil with blur, used only over photos.
 */

:root {
  /* Ground */
  --forest-950: #0b1610;
  --forest-900: #0e1a14;
  --forest-800: #17241c;
  --forest-700: #1f3327;
  --moss: #576b5c;

  /* Ink */
  --paper: #fffdf7;
  --paper-soft: #f6f1e6;
  --amber: #f0b65a;

  /* Mist surfaces: no border, no shadow, no gradient */
  --mist-rgb: 35, 50, 41;
  --mist: rgba(var(--mist-rgb), 0.56);
  --mist-strong: rgba(var(--mist-rgb), 0.8);
  --mist-soft: rgba(var(--mist-rgb), 0.42);
  --mist-blur: 32px;
  --rule: rgba(255, 253, 247, 0.24);

  /* Section joints: forest ground fading on a smoothstep curve, never two stops */
  --seam-stops:
    rgba(14, 26, 20, 1) 0%, rgba(14, 26, 20, 0.957) 12.5%, rgba(14, 26, 20, 0.844) 25%,
    rgba(14, 26, 20, 0.684) 37.5%, rgba(14, 26, 20, 0.5) 50%, rgba(14, 26, 20, 0.316) 62.5%,
    rgba(14, 26, 20, 0.156) 75%, rgba(14, 26, 20, 0.043) 87.5%, rgba(14, 26, 20, 0) 100%;
  --seam-top: linear-gradient(to bottom, var(--seam-stops));
  --seam-bottom: linear-gradient(to top, var(--seam-stops));
  --seam-left: linear-gradient(to right, var(--seam-stops));
  --seam-right: linear-gradient(to left, var(--seam-stops));

  /* Type: Host Grotesk speaks, Atkinson is read without effort */
  --font-display: "Host Grotesk", "Trebuchet MS", sans-serif;
  --font-body: "Atkinson Hyperlegible Next", Verdana, sans-serif;

  --text-sm: 1rem;
  --text-base: 1.125rem;
  --text-md: 1.1875rem;
  --text-lg: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --display-xl: clamp(2.875rem, 1.6rem + 5.4vw, 7rem);

  /* Space */
  --gap-1: 0.25rem;
  --gap-2: 0.5rem;
  --gap-3: 0.75rem;
  --gap-4: 1rem;
  --gap-6: 1.5rem;
  --gap-8: 2rem;
  --gap-12: 3rem;
  --gutter: clamp(1rem, 3.33vw, 3rem);

  /* Shape */
  --radius-pill: 999px;
  --radius-chip: 0.875rem;
  --radius-mist: 1rem;
  --radius-photo: 1.5rem;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Navbar row: 24px from the top plus a 44px row on desktop */
  --nav-h: 4.25rem;
}

@media (max-width: 47.99rem) {
  :root {
    --nav-h: 3.875rem;
  }
}