/* ==========================================================================
   IMABEATDUHPARTY — DESIGN TOKENS
   --------------------------------------------------------------------------
   This is the single source of truth for the brand. Every colour, size,
   font and animation speed on the site reads from a value in this file.
   Change it here once and it updates on every page.
   ========================================================================== */

:root {
  /* ---- Brand palette ------------------------------------------------- */
  --ink: #08060a;          /* near-black — the base of the whole site      */
  --ink-2: #100c14;        /* raised black — cards, menus                  */
  --ink-3: #191320;        /* hairline black — borders, wells              */
  --paper: #ffffff;

  --pink: #ff2f92;         /* HOT PINK — the primary brand colour          */
  --pink-bright: #ff5faf;  /* hover / glow state                           */
  --pink-light: #ffb3d9;   /* light pink — soft type, quiet accents        */
  --pink-deep: #b8005c;    /* pressed state, deep shadow                   */

  --blue: #8ad8ff;         /* LIGHT BLUE — accent + focus rings            */
  --blue-deep: #2aa5e0;

  /* ---- Semantic roles ------------------------------------------------ */
  --bg: var(--ink);
  --fg: var(--paper);
  --fg-muted: rgb(255 255 255 / 0.70);
  --fg-faint: rgb(255 255 255 / 0.46);
  --accent: var(--pink);
  --focus: var(--blue);

  --line: rgb(255 255 255 / 0.14);
  --line-strong: rgb(255 255 255 / 0.30);

  /* ---- Cinematic lighting -------------------------------------------- */
  --glow-pink: 0 0 0 1px rgb(255 47 146 / 0.35), 0 8px 40px -8px rgb(255 47 146 / 0.55);
  --glow-blue: 0 0 0 1px rgb(138 216 255 / 0.35), 0 8px 40px -8px rgb(138 216 255 / 0.45);
  --shadow-lift: 0 18px 50px -18px rgb(0 0 0 / 0.85);
  --vignette: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgb(0 0 0 / 0.55) 100%);

  /* ---- Typography ----------------------------------------------------- */
  /* True Futura is used when the visitor's machine has it licensed and
     installed; Jost (self-hosted, geometric, Futura-derived) is the
     fallback everyone else sees. Both share the same proportions.        */
  --font-display: "Futura", "Futura PT", "Futura Std", "Jost", "Century Gothic",
                  system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Jost", "Futura", "Futura PT", system-ui, -apple-system,
               "Segoe UI", Helvetica, Arial, sans-serif;

  --w-regular: 400;
  --w-medium: 500;
  --w-bold: 700;

  /* Fluid type scale — min size on a 360px screen, max on a 1600px screen */
  /* 11px floor: below that, uppercase letter-spaced type stops being
     comfortably readable on a phone. The maximum is unchanged.           */
  --t-micro: clamp(0.6875rem, 0.64rem + 0.18vw, 0.72rem);
  --t-small: clamp(0.75rem, 0.71rem + 0.2vw, 0.875rem);
  --t-body: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  --t-lede: clamp(1.05rem, 0.96rem + 0.5vw, 1.3rem);
  --t-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --t-h2: clamp(1.9rem, 1.35rem + 2.6vw, 3.5rem);
  --t-h1: clamp(2.6rem, 1.5rem + 4.8vw, 6rem);
  --t-mega: clamp(3.2rem, 1.2rem + 9vw, 10rem);

  /* Futura reads best uppercase with air between the letters */
  --track-mega: -0.02em;
  --track-display: 0.01em;
  --track-eyebrow: 0.34em;
  --track-nav: 0.16em;

  --leading-tight: 0.92;
  --leading-snug: 1.15;
  --leading-body: 1.6;

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

  --section-y: clamp(4rem, 2rem + 8vw, 9rem);

  /* ---- Layout --------------------------------------------------------- */
  --shell-max: 84rem;      /* 1344px — outer content width                 */
  --measure: 46ch;         /* comfortable reading length                   */
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --header-h: 5rem;

  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Motion ---------------------------------------------------------- */
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 620ms;
  --dur-page: 520ms;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);      /* general UI            */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* entrances, reveals    */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* page transitions      */

  /* Parallax travel. Set to 0px to switch cinematic drift off site-wide.  */
  --parallax-scroll: 44px;
  --parallax-pointer: 12px;

  /* ---- Depth ----------------------------------------------------------- */
  --z-art: 0;
  --z-scrim: 1;
  --z-content: 2;
  --z-header: 100;
  --z-menu: 200;
  --z-skip: 300;
}

@media (max-width: 48rem) {
  :root {
    --header-h: 4.25rem;
  }
}

/* Motion tokens collapse to zero for visitors who ask for less movement.
   Every animation on the site is built on these, so this one block
   quiets the entire experience without disabling any functionality.      */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
    --dur-page: 1ms;
    --parallax-scroll: 0px;
    --parallax-pointer: 0px;
  }
}