/* ==========================================================================
   Design tokens — single source of truth for the visual language
   Values sampled from the reference composition (Clubtickets, Ibiza 2026).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typography
   PP Mori is the original typeface; Satoshi is a close, self-hosted
   substitute with matching proportions (single-storey g, double-storey a).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/satoshi-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/satoshi-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/satoshi-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------------
     Colour
     ------------------------------------------------------------------ */
  --color-ink: #151515;
  --color-ink-soft: #555555;
  --color-ink-muted: #696969;
  --color-white: #ffffff;
  --color-paper: #f2f2f2;

  --color-periwinkle: #b9b6f8;
  --color-periwinkle-ink: #b4aef7; /* headline accent, slightly more saturated */
  --color-mint: #b0eed0;
  --color-mint-soft: #e7f8ef;
  --color-sky: #cce7ff;

  --color-canvas: #f1effb;
  --color-canvas-deep: #e9e6f6;
  --color-line: rgba(21, 21, 21, 0.08);

  /* ------------------------------------------------------------------
     Typography scale
     ------------------------------------------------------------------ */
  --font-sans: "Satoshi", "PP Mori", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-eyebrow: 0.75rem;
  --fs-body: 1rem;
  --fs-lead: 1.125rem;
  --fs-caption: 0.6875rem;
  --fs-label: 0.8125rem;
  --fs-ui: 0.9375rem;

  --fs-display: clamp(2rem, 4.45vw, 4.35rem);
  --fs-venue: clamp(1.375rem, 1.75vw, 1.75rem);

  --tracking-display: -0.032em;
  --tracking-title: -0.03em;

  /* ------------------------------------------------------------------
     Shape
     ------------------------------------------------------------------ */
  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  /* ------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------ */
  --container-max: 1568px;
  --gutter: clamp(1.25rem, 2.05vw, 2rem);
  --header-gap: clamp(1rem, 2.5vw, 2.5rem);

  /* ------------------------------------------------------------------
     Motion
     ------------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 240ms;

  /* ------------------------------------------------------------------
     Elevation
     ------------------------------------------------------------------ */
  --shadow-soft: 0 1px 0 rgba(21, 21, 21, 0.03),
    0 18px 40px -28px rgba(21, 21, 21, 0.28);
  --shadow-float: 0 24px 60px -30px rgba(21, 21, 21, 0.35);
}