/**
 * Design tokens for the website's interactive surfaces.
 *
 * The web counterpart of tier 1 in `src/frontend/styles/responsiveTheme.js`, and a deliberate
 * copy of its values so the site and the app read as one product. Every module that draws UI at
 * runtime (site-header, site-auth-ui, site-reservation, site-bookings) consumes these instead of
 * hardcoding colours - which is how the first version drifted into an invented dark-and-lime
 * palette that existed nowhere in the design system.
 *
 * Kept as a stylesheet rather than inlined per page: the pages already duplicate their own
 * chrome CSS, and duplicating the tokens 23 times is exactly the drift this file prevents. It is
 * linked from every page that loads the site modules, so the variables are always in place before
 * a module injects the CSS that uses them.
 *
 * When `responsiveTheme.js` changes, change this too. There is no build step to do it for us.
 */

:root {
  /* ── Brand blue (theme.colors.primary family) ───────────────────────────── */
  --sn-primary: #2E5984;          /* nav, chips, labels, primary actions */
  --sn-primary-dark: #1D3F63;     /* hover / pressed */
  --sn-primary-light: #5B87B8;
  --sn-primary-tint: #EBF1F8;     /* selected chip / badge background */
  --sn-primary-tint-strong: #D6E8FA;

  /* ── Surfaces ───────────────────────────────────────────────────────────── */
  --sn-bg: #E3E5E8;               /* page background - cool stone grey */
  --sn-surface: #ffffff;
  --sn-surface-alt: #F4F7FB;      /* inputs, chips, subtle fills */

  /* ── Text (midnight navy family) ────────────────────────────────────────── */
  --sn-text: #071A34;
  --sn-text-2: #3A5471;
  --sn-text-3: #7A97B3;
  --sn-placeholder: #A8BDD4;

  /* ── Lines ──────────────────────────────────────────────────────────────── */
  --sn-border: #C5D5E8;
  --sn-disabled-bg: #D8E5F2;

  /* ── Status ─────────────────────────────────────────────────────────────── */
  --sn-error: #E03C38;
  --sn-error-tint: #FFF0F0;     /* theme.colors.accentLight - the light red the app uses behind error copy */
  /* A destructive BUTTON needs a darker red than the error text colour: white on #E03C38 is
     4.31:1, just under AA for 14px text. This is the same hue taken down far enough to pass at
     5.33:1. Use --sn-error for error copy, --sn-danger for a filled destructive control. */
  --sn-danger: #C9302C;
  --sn-danger-hover: #B5322E;
  --sn-success: #4ECDC4;
  --sn-success-dark: #1A7A74;
  --sn-success-tint: #E8FAF9;
  --sn-warning-dark: #C47D00;

  /* ── Call to action ─────────────────────────────────────────────────────── */
  /* ONE treatment, lifted from the CTAs this site already has: the players card's "Get the app"
     button and the map overlay's partner button. Both are a gradient fill that scales slightly on
     hover, and - the part worth stating - neither carries a resting shadow.

     No box-shadow is deliberate. An earlier version used 0 8px 22px at 30% opacity, which read as
     aggressive next to everything around it and was nowhere near the app either: responsiveTheme's
     shadows top out at 10% opacity and a 5px radius. The hover feedback is scale plus a slight
     fade, which is what .audience-cta and .ov-right .primary both do.

     Colour is the brand blue family, not a status colour. Every other accent is already spoken
     for and would mislead: turquoise is "success" (47 uses) AND the site's focus-ring colour, so
     a turquoise button has an invisible focus state; amber is "warning" by name and partner-pin
     gold in practice; coral is the "cancelled" state in EventCard. */
  --sn-cta: linear-gradient(135deg, #071A34, #2E5984);
  --sn-cta-text: #ffffff;
  /* A hairline, so the gradient still separates from the dark glass header without needing a
     different fill there. White text on this gradient is 17.41:1 at the dark stop, 7.30:1 at the
     light one - it works on any background the site has. */
  --sn-cta-edge: 1px solid rgba(255, 255, 255, .28);
  /* 12px, matching .hero-cta - the site CTA this was measured against - and the --sn-radius
     step below, so the buttons and the panels they sit in share one corner. */
  --sn-radius-cta: 12px;

  --sn-cta-ease: transform .2s ease, opacity .2s ease;
  --sn-cta-hover-scale: scale(1.03);
  --sn-cta-hover-opacity: .9;

  /* ── Slot states ────────────────────────────────────────────────────────── */
  /* Free / booked / blocked / past. Mirrors responsiveTheme.colors.slot in the app, which is
     the source of meaning for these - the site has no bundler, so the values are copied by
     hand and the two must be changed together.

     Booked is amber (someone holds this time) and blocked is grey (the venue closed it), so
     blocked and past are both grey, separated by lightness. That is deliberate: every cell
     carries its state as a word as well as a colour, so the pair is never told apart by hue
     alone.

     Text colours are not free choices. On the amber tint the app's #D97706 is 2.86:1 and fails
     outright, so booked uses a darker amber at 5.10:1; grey needs text-2 rather than text-3,
     which is 2.76:1. Check any change against the tint it sits on. */
  --sn-slot-free-bg: var(--sn-success-tint);      /* #E8FAF9 */
  --sn-slot-free-text: var(--sn-success-dark);    /* #1A7A74 - 4.77:1 */
  --sn-slot-booked-bg: #FEF3C7;
  --sn-slot-booked-text: #96580B;                 /* 5.10:1 */
  --sn-slot-blocked-bg: #F3F4F6;
  --sn-slot-blocked-text: var(--sn-text-2);       /* 7.10:1 */
  --sn-slot-past-bg: #F9FAFB;
  --sn-slot-past-text: var(--sn-text-3);
  /* Selected keeps the brand blue it already had. */
  --sn-slot-selected-bg: var(--sn-primary);
  --sn-slot-selected-text: var(--sn-on-dark);

  /* ── Shape ──────────────────────────────────────────────────────────────── */
  --sn-radius-sm: 8px;
  --sn-radius: 12px;
  --sn-radius-lg: 16px;
  --sn-radius-pill: 999px;

  /* ── Elevation ──────────────────────────────────────────────────────────── */
  --sn-shadow: 0 10px 30px rgba(7, 26, 52, .16);
  --sn-shadow-lg: 0 24px 64px rgba(7, 26, 52, .28);

  /* ── On the dark glass header ───────────────────────────────────────────── */
  /* The header is translucent black on every page, with nav links as faint white pills. The
     account control has to sit in that language rather than the light-surface one above, so its
     values live here instead of being improvised at the call site. */
  --sn-on-dark: #ffffff;
  --sn-on-dark-dim: rgba(255, 255, 255, .72);
  --sn-on-dark-fill: rgba(255, 255, 255, .12);
  --sn-on-dark-fill-strong: rgba(255, 255, 255, .24);
  --sn-on-dark-line: rgba(255, 255, 255, .5);
}

/* The CTA hover rise is decoration. The rest of the site already honours this preference
   (index.html, bg.html), so the tokens do too - neutralising them here means every control that
   uses them complies without each module remembering to. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sn-cta-ease: opacity .2s ease;
    --sn-cta-hover-scale: none;
  }
}