/* =========================================================
   SPIRIT EVENTS — DESIGN TOKENS

   Lifted from the live site's Elementor kit so the redesign still
   reads as Spirit Events: the plum (#8C348C) that carries every
   button and heading today, near-black stage sections, Syne for
   display and Inter for body.

   What changes is how hard the palette works. The current page puts
   plum on everything, so nothing stands out. Here plum means one
   thing: "act on this". Headings go to ink, and the dark "stage"
   sections carry the energy an events brand needs.
========================================================= */

:root {
  /* brand */
  --plum: #8c348c;
  --plum-deep: #671b65;
  --plum-bright: #c857c8; /* plum on the dark stage — #8C348C fails contrast there */
  --plum-wash: rgba(140, 52, 140, 0.09);
  --plum-glow: rgba(200, 87, 200, 0.35);

  /* light grounds — the site's own #F4F5F6 mist and #E1E1E1 hairline */
  --paper: #ffffff;
  --mist: #f4f5f6;
  --line: #e1e1e1;
  --line-soft: #eceded;

  /* type on light */
  --ink: #1f1e1e;
  --ink-soft: #3b3b3b;
  --muted: #666666; /* the site's #767676 is 4.5:1 on white and fails on mist */

  /* the stage — dark sections, where the photography lives */
  --stage: #121012;
  --stage-soft: #1f1e1e;
  --stage-line: #2e2b2e;
  --stage-text: #f4f2f4;
  --stage-muted: #a9a3a9;

  /* channels a visitor already recognises, kept exactly as the site has them */
  --whatsapp: #25d366;
  --call: #2596d3;

  /* form state, deliberately outside the brand so an error never reads as a CTA */
  --ok: #1f7a4a;
  --ok-wash: rgba(31, 122, 74, 0.1);
  --err: #b3261e;
  --err-wash: rgba(179, 38, 30, 0.08);
  --warn: #9a6200;
  --warn-wash: rgba(154, 98, 0, 0.1);

  /* families */
  --display: 'Syne', ui-sans-serif, system-ui, sans-serif;
  --body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* metrics */
  --tap: 44px;
  --radius: 14px;
  --radius-lg: 22px;
  --pill: 999px;
  --wrap: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(4rem, 9vw, 7.5rem);
  --header: 72px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* =========================================================
   TYPE HELPERS
========================================================= */

.display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}

.eyebrow {
  font-family: var(--body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: var(--plum);
  margin: 0;
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}