/* ==========================================================================
   Beat Bunker — Design Tokens
   Deduplicated from the Webflow export. One source of truth.
   Maps cleanly to Astro / CSS custom properties at the port.
   ========================================================================== */

:root {
  /* --- Colour: primitives ------------------------------------------------ */
  --bb-black: #000;
  --bb-ink: #252021;          /* near-black surface (was neutral-darker) */
  --bb-white: #fff;

  --bb-neutral-900: #252021;
  --bb-neutral-700: #555252;
  --bb-neutral-500: #868384;
  --bb-neutral-300: #b6b4b5;
  --bb-neutral-200: #dad9da;
  --bb-neutral-100: #f2f2f2;

  --bb-turbo: #ffeb00;        /* primary accent — collapses 7 redundant yellows */
  --bb-turbo-dark: #ccbc00;
  --bb-pink: #ffa0b5;
  --bb-pink-dark: #cc7384;     /* folded-ribbon underside shade */
  --bb-green: #36bb85;
  --bb-green-dark: #268a62;    /* folded-ribbon underside shade */
  --bb-blue: #0080c3;

  /* --- Colour: semantic -------------------------------------------------- */
  --color-bg: var(--bb-black);
  --color-surface: var(--bb-ink);
  --color-surface-2: #2e2c30;
  --color-text: var(--bb-white);
  --color-text-muted: var(--bb-neutral-300);
  --color-soldout-ink: #929091;   /* greyed sold-out pass labels — lifted from neutral-500 (#868384, 4.1:1) to clear AA 4.5:1 on the surface while reading inactive */
  --color-accent: var(--bb-turbo);
  --color-accent-ink: var(--bb-black);   /* crisp black on yellow — was an olive #665e00 that read faded */
  --color-border: rgba(255, 255, 255, 0.15);
  --color-border-strong: rgba(255, 255, 255, 0.30);
  --color-overlay: rgba(0, 0, 0, 0.85);   /* modal/lightbox backdrop */
  --color-focus: #2d62ff;

  --color-success: #cef5ca;
  --color-error: #f8e4e4;
  --color-warning: #fcf8d8;
  /* Error / required-field ink — reads on the dark surfaces (#000 / #252021)
     at >4.5:1. Used for the required-field asterisk + inline error text. */
  --color-error-ink: #ff9b9b;

  /* --- Typography: families (tightened 5 -> 3) --------------------------- */
  --font-display: "Sink", "Arial Narrow", Arial, sans-serif;        /* headings */
  --font-body: "N Haas Grotesk", "Helvetica Neue", Arial, sans-serif; /* body + UI */
  --font-accent: var(--font-display);                              /* oversized moments — Sink */

  /* --- Typography: scale ------------------------------------------------- */
  --fs-2xs: 0.625rem;   /* 10 — micro labels (e.g. sold-out tab banner) */
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md: 1.25rem;     /* 20 */
  --fs-lg: 1.5rem;      /* 24 */
  --fs-xl: 2rem;        /* 32 */
  --fs-2xl: 2.5rem;     /* 40 */
  --fs-3xl: 3rem;       /* 48 */
  --fs-4xl: 4.5rem;     /* 72 */

  /* Fluid heading sizes — honour the scale, fix the responsiveness */
  --h1: clamp(2.75rem, 6vw + 1rem, 4.5rem);
  --h2: clamp(2rem, 4vw + 0.5rem, 3rem);
  --h3: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  --h4: clamp(1.5rem, 2vw + 0.5rem, 2rem);
  --h5: 1.5rem;
  --h6: 1.25rem;

  --fw-regular: 400;
  --fw-bold: 700;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.5;

  --tracking-heading: -0.02em;  /* headings tighten */
  --tracking-label: 0.08em;     /* eyebrows / pills loosen + uppercase */

  /* --- Spacing: 0.25rem (4px) grid -------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 2.5rem;
  --space-10: 3rem;
  --space-12: 4rem;
  --space-16: 5rem;
  --space-20: 6rem;
  --space-32: 8rem;

  /* Section rhythm + layout */
  --section-sm: 4rem;
  --section-md: 6rem;
  --section-lg: 8rem;
  --gutter: 2.5rem;             /* horizontal page padding (desktop) */
  --gutter-mobile: 1.25rem;
  --maxw: 80rem;               /* 1280px content cap */
  --header-h: 6rem;            /* sticky header zone: nav pill (4rem) + padding-block */
  --mixcloud-h: 120px;         /* fixed height of the Mixcloud player widget iframe */
  --maxw-prose: 44rem;
  --maxw-article: 64rem;       /* editorial 2-col: feature image + rich-text body, capped narrower than the full container */
  --maxw-cta: 64rem;           /* CTA band content: narrower than the full container */
  --promo-w: 20rem;            /* promo preview width (9:16 portrait) */
  --video-modal-h: 88svh;      /* video modal height cap (9:16 portrait lightbox) */

  --pad-card-sm: 1.5rem;
  --pad-card-md: 2rem;
  --pad-card-lg: 3rem;

  --card-media-w: 18rem;       /* media column on wide feature cards (e.g. glamping slider) */

  --poster-name: clamp(1.75rem, 4vw + 0.5rem, 3.25rem);  /* interactive poster bill — flat, equal-weight names */
  --poster-tip-w: 17rem;       /* poster hover/focus tooltip width */
  --poster-avatar: 0.92em;     /* poster leading DJ avatar — em-scaled to the fluid name size */
  --poster-gap: 0.22em;        /* one equal gutter around every avatar: row gap = column gap = avatar-to-name gap */

  /* --- Radii ------------------------------------------------------------- */
  --radius-sm: 0.125rem;       /* 2 */
  --radius-md: 0.25rem;        /* 4 */
  --radius-lg: 0.5rem;         /* 8 */
  --radius-xl: 1rem;           /* 16 */
  --radius-pill: 10rem;
  --radius-full: 50%;

  /* --- Borders / strokes ------------------------------------------------- */
  --border-w: 2px;

  /* --- Shadows ----------------------------------------------------------- */
  --shadow-hard: 6px 6px 0 0 var(--color-accent);   /* signature playful shadow */
  --shadow-hard-white: 6px 6px 0 0 var(--bb-white);
  --shadow-hard-black: 6px 6px 0 0 var(--bb-black);
  --shadow-hard-blue: 6px 6px 0 0 var(--bb-blue);   /* primary button shadow on grey surfaces */
  --shadow-soft: 0 12px 24px -8px rgba(0, 0, 0, 0.5);

  /* Brand-gradient offset for filled buttons — the hard-offset "shadow" as a
     gradient of the brand palette (a box-shadow can't be a gradient, so it's
     painted by a pseudo-element). Direction tracks the 6px down-right offset. */
  --grad-brand: linear-gradient(135deg, var(--bb-blue) 0%, var(--bb-green) 40%, var(--bb-pink) 72%, var(--bb-turbo) 100%);

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-swap: cubic-bezier(0.65, 0, 0.35, 1);   /* in-out for the nav text-swap */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);    /* soft ease-out — dropdown open (Framer-style) */
  --dur: 200ms;
  --dur-swap: 300ms;           /* nav link text-swap slide */
  --dur-menu: 260ms;           /* dropdown panel + item fade/slide (tune to match a reference) */
  --dur-slow: 400ms;           /* reveal/transition for larger moves (scroll reveals) */
  --dur-spin: 24s;
  --stagger: 45ms;             /* per-item delay in the dropdown cascade */
  --menu-slide: 8px;           /* distance items travel in the cascade */

  /* --- Z-index ----------------------------------------------------------- */
  --z-header: 100;
  --z-popover: 150;   /* hover previews that must clear the sticky header */
  --z-overlay: 200;
}

/* Breakpoints (reference — used as max-width queries in CSS):
   991px  small desktop / tablet landscape
   767px  tablet portrait
   479px  mobile                                                            */