/* ═══════════════════════════════════════════════════════════════════════
   RASTA Collective — design tokens
   Custom properties only. No selectors beyond :root, nothing renders here.
   ═══════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Palette ──────────────────────────────────────────────────────────
     Sampled directly from the supplied assets, not invented:
     red/yellow are the logo's own flat fills, pink is the paper sequence,
     warm/sepia are the banner collage. Keeping the page inside the artwork's
     own palette is what stops the UI reading as a template around a picture. */
  --ink:          #0B0B0B;   /* hero ground */
  --ink-soft:     #161513;
  --paper:        #F4ECE4;   /* banner highlight — the light sections */
  --paper-warm:   #EFE3D7;
  --red:          #A00E0E;   /* rasta_logo_red.png */
  --red-deep:     #7C0A0A;
  --yellow:       #FFDF57;   /* logo_yellow.png */
  --pink:         #DB546A;   /* paper frame */
  --pink-light:   #E9767E;
  --warm:         #E29658;   /* banner skin/paper tones */
  --sepia:        #564B44;   /* banner shadow tone */

  --text-on-dark:      #F4ECE4;
  --text-on-dark-dim:  #A79E96;
  --text-on-light:     #1A1614;
  --text-on-light-dim: #6B605A;
  --rule-on-dark:      rgba(244, 236, 228, .18);
  --rule-on-light:     rgba(26, 22, 20, .14);

  /* ── Type ─────────────────────────────────────────────────────────────
     Anton is the logo's register: ultra-condensed, caps, screen-printed.
     Inter carries everything that has to be read rather than shouted. */
  --font-display: "Anton", "Anton Fallback", Impact, "Arial Narrow Bold", sans-serif;
  --font-body:    "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid across the whole range, so breakpoints switch behaviour, not size. */
  /* Capped well below what the column could carry: the H1 is six words over
     four lines, and unchecked it pushed the two CTAs — the only thing on the
     page that actually converts — below the fold at 1440×900. The cap lifts
     again on very large displays (see the ≥1600 block) where there is height
     to spend and the smaller size just floats in dead space. */
  --t-hero:    clamp(2.50rem, 1.15rem + 4.55vw, 5.25rem);
  --t-h2:      clamp(1.95rem, 1.35rem + 2.55vw, 3.75rem);
  --t-h3:      clamp(1.35rem, 1.13rem + 0.95vw, 1.95rem);
  --t-lead:    clamp(1.10rem, 1.01rem + 0.38vw, 1.35rem);
  --t-body:    clamp(1.00rem, 0.96rem + 0.17vw, 1.09rem);
  --t-small:   0.875rem;
  --t-micro:   0.75rem;

  --lh-display: 0.92;
  --lh-lead:    1.42;
  --lh-body:    1.62;

  --tracking-display: -0.01em;
  --tracking-caps:     0.16em;

  /* ── Space ────────────────────────────────────────────────────────────
     A 4px-based ramp; --gutter and --section are fluid. */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  --gutter:    clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 9vw, 144px);
  --container: 1180px;

  /* ── Form / control geometry ─────────────────────────────────────────── */
  --radius:      2px;   /* near-square: the brand is stencils and cut paper */
  --radius-pill: 999px;
  --control-h:   52px;
  --tap-min:     48px;  /* WCAG 2.5.8 target size floor */

  /* ── Motion ───────────────────────────────────────────────────────────
     Punchy, poster-like. No long lazy eases — the artwork is a shout. */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast:  .18s;
  --dur-base:  .32s;
  --dur-slow:  .6s;

  /* ── Z ladder ─────────────────────────────────────────────────────────
     Declared once so nothing has to guess. Hero layers are local to .hero
     (which sets isolation:isolate), the rest are page-level. */
  --z-grain:      1;
  --z-halo:       2;
  --z-paper:      3;
  --z-figure:     4;
  --z-arc:        5;
  --z-icons:      6;
  --z-hero-copy: 10;
  --z-about-nav: 20;
  --z-logo:      90;
  --z-preloader:100;
  --z-skip:     200;

  /* ── Scroll progress ──────────────────────────────────────────────────
     scroll.js writes these on <html> and nothing else. CSS reads them at
     different rates to produce parallax. Declared with @property below so
     they interpolate as numbers rather than flipping between strings. */
  --hero-p:  0;
  --about-p: 0;
  --pin-len: 0px;
}

/* Large displays have the height to carry a bigger headline, and at the
   smaller cap it read as marooned in the middle of a very tall hero. */
@media (min-width: 1600px) {
  :root { --t-hero: clamp(5.25rem, 2rem + 4.2vw, 7.5rem); }
}

/* Registering the progress props does two things: guarantees a numeric type
   (so calc() can't be poisoned by an unparsed token on first paint), and lets
   the browser animate them on the compositor instead of re-parsing strings. */
@property --hero-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --about-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}