/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
  /* Surfaces */
  --ink: #251A5F;
  --ink-2: #2E2173;
  --ink-3: #392A8C;
  --deep: #180F45;
  --dark-ink: #160B45;
  --paper: #FFFFFF;

  /* Text & lines on dark surfaces */
  --soft: rgba(255, 255, 255, .66);
  --faint: rgba(255, 255, 255, .40);
  --hair: rgba(255, 255, 255, .14);
  --hair-2: rgba(255, 255, 255, .08);

  /* Brand palette — sampled from the Mobility Lab logotype */
  --c-violet: #6D01F8;
  --c-magenta: #FF2D9B;
  --c-coral: #FF1705;
  --c-orange: #FF6926;
  --c-green: #3BFF6F;
  --c-cyan: #25AFE9;
  /* Derived along the logo's orange → green ramp */
  --c-amber: #FFD51E;
  --c-lime: #AFF03C;
  --c-blue: #4B1AF0;

  --spectrum: linear-gradient(100deg, var(--c-violet), var(--c-magenta) 22%, var(--c-coral) 38%,
              var(--c-orange) 52%, var(--c-amber) 66%, var(--c-green) 82%, var(--c-cyan));

  /* Card gradients */
  --grad-magenta: linear-gradient(142deg, var(--c-magenta) 0%, var(--c-orange) 100%);
  --grad-cyan: linear-gradient(142deg, var(--c-cyan) 0%, var(--c-green) 100%);
  --grad-violet: linear-gradient(142deg, var(--c-violet) 0%, #B01BE0 100%);
  --grad-violet-cyan: linear-gradient(142deg, var(--c-violet) 0%, var(--c-cyan) 100%);
  --grad-amber: linear-gradient(142deg, var(--c-amber) 0%, var(--c-orange) 100%);

  /* Brand assets */
  --lg-sapri: url("../assets/img/sapri-2026.png");
  --lg-band: url("../assets/img/organisers-band.png");

  /* Typography */
  --display: "Archivo", Helvetica, Arial, sans-serif;
  --body: "Barlow", "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --pad: clamp(20px, 5vw, 80px);
  --maxw: 1280px;
  --nav-h: 72px;

  /* Radii */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
}