/* ==========================================================================
   tokens.css — every design decision that repeats lives here.

   Structure follows the Vita Travel reference: a deep, near-black ground,
   white type at varying alpha, hairline borders, one hot accent. The hues are
   Caribbean rather than Nordic petrol — the ground is a deep sea-night, the
   accent is sun gold, and the secondary accents are mango and palm.
   ========================================================================== */

:root {
  /* ---------- Ground ----------------------------------------------------
     Four near-black steps, neutral rather than tinted — the colour in this
     scheme comes entirely from the red / gold / green accents, so the ground
     stays out of their way. */
  --ink: #0b0b0b;          /* page background, deepest */
  --ink-2: #131313;        /* alternating section band */
  --surface: #191919;      /* cards, raised panels */
  --surface-2: #242424;    /* hover on a card, inset wells */

  /* ---------- Type on the ground ---------------------------------------
     White at descending alpha, exactly the Vita approach. --text-dim is the
     colour SplitText animates FROM as a word scrolls into view. */
  --text: #ffffff;
  --text-soft: rgba(255, 255, 255, 0.66);
  --text-muted: rgba(255, 255, 255, 0.46);
  --text-dim: rgba(255, 255, 255, 0.22);

  /* ---------- Hairlines -------------------------------------------------
     The whole layout is drawn with these. Vita separates every cell with a
     1px rgba-white rule rather than with gaps. */
  --line: rgba(255, 255, 255, 0.1);
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.2);

  /* ---------- Accents ---------------------------------------------------
     Red / gold / green on black. Gold carries the primary actions because it
     has the most contrast against the ground; red and green are reserved for
     meaning (audio vs image, error vs success) so the palette never turns
     into decoration for its own sake. */
  --sun: #ffc400;          /* primary — CTAs, active nav, numerals */
  --sun-deep: #f59e0b;     /* hover, gradient mid stop */
  --red: #e1231f;          /* audio badge, alerts, destructive */
  --red-soft: #ff6b62;     /* red text on a dark ground, for contrast */
  --green: #00a550;        /* image badge, success, "live" dots */
  --green-soft: #4ed98a;   /* green text on a dark ground */
  --green-deep: #007a3d;

  --sun-wash: rgba(255, 196, 0, 0.13);
  --red-wash: rgba(225, 35, 31, 0.16);
  --green-wash: rgba(0, 165, 80, 0.16);

  --grad-sun: linear-gradient(120deg, var(--sun) 0%, var(--sun-deep) 55%, var(--red) 100%);
  /* The flag order — green, gold, red — used for avatar and tile grounds. */
  --grad-flag: linear-gradient(140deg, var(--green) 0%, var(--sun) 52%, var(--red) 100%);
  /* Fallback art behind audio posts with no cover image. */
  --grad-cover: linear-gradient(135deg, #007a3d 0%, #ffc400 50%, #e1231f 100%);
  /* Scrim laid over hero media so white type stays legible. */
  --scrim: linear-gradient(
    180deg,
    rgba(11, 11, 11, 0.4) 0%,
    rgba(11, 11, 11, 0.58) 45%,
    rgba(11, 11, 11, 0.95) 100%
  );

  /* ---------- Typography ------------------------------------------------
     Inter throughout, matching the reference. Headings are heavy and set
     very tight; that compression is most of the look. */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --step-xs: 0.75rem;
  --step-sm: 0.8125rem;
  --step-0: 0.9375rem;
  --step-1: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
  --step-2: clamp(1.25rem, 1vw + 1rem, 1.6rem);
  --step-3: clamp(1.75rem, 2.4vw + 1rem, 3rem);
  --step-4: clamp(2.25rem, 4.4vw + 1rem, 4.5rem);
  /* The hero wordmark. Tuned so the longest line ("Frequency", 9 characters)
     clears the viewport at 360px and still fills it at 1440 — the previous
     value was scaled for a single six-letter word and overflowed. */
  --step-5: clamp(2.75rem, 11vw, 10.5rem);

  --leading-tight: 0.98;
  --leading-snug: 1.12;
  --leading-body: 1.55;
  --tracking-tight: -0.035em;   /* display */
  --tracking-snug: -0.02em;     /* subheads */
  --tracking-wide: 0.14em;      /* eyebrows, labels */

  /* ---------- Space ----------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* ---------- Layout ---------------------------------------------------- */
  --container: 1440px;      /* Vita runs edge-to-edge wide */
  --container-narrow: 780px;
  --feed-width: 640px;
  --page-x: 1.25rem;
  --nav-height: 60px;

  /* Notch / home-indicator insets. The pages ship viewport-fit=cover so the
     hero video reaches the physical edges of the screen; everything that must
     stay clear of the rounded corners and the home bar adds these instead of
     guessing at a magic number. They resolve to 0px on every non-notched
     device, so the same rule serves both. */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* Minimum comfortable target for a finger. Used wherever a control would
     otherwise be sized by its text alone. */
  --tap: 44px;

  /* ---------- Shape & depth -------------------------------------------- */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 12px 34px rgba(245, 166, 35, 0.3);

  /* ---------- Motion ----------------------------------------------------
     --ease-out-expo is the Vita feel: fast start, long settle. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 760ms;

  /* ---------- Z layers -------------------------------------------------- */
  --z-nav: 100;
  --z-drawer: 150;
  --z-modal: 200;
  --z-toast: 300;
}

@media (min-width: 768px) {
  :root {
    --page-x: 2rem;
    --nav-height: 76px;
  }
}

@media (min-width: 1200px) {
  :root { --page-x: 2.5rem; }
}

/* One switch disables motion project-wide. Individual rules read these tokens
   and so never need their own reduced-motion handling. anim.js checks the
   same media query before building any GSAP timeline. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms !important;
    --dur: 0.01ms !important;
    --dur-slow: 0.01ms !important;
  }
}