/* Hunters Creek Swim & Racquet Club design tokens.
   One shared source of brand and status values for every surface: the member
   app, the guard console, and the board admin. Drawn from the club identity at
   hunterscreekpool.com.

   Status is never carried by color alone. Each state pairs a distinct color
   with an icon and explicit words, so it reads for a colorblind user and from
   across a deck. The brand is red, so the CLOSED state uses a deeper alarm red
   plus a full-bleed banner and iconography that cannot be mistaken for a red
   accent. */

:root {
  /* Brand */
  --hc-red: #c70000;          /* club brand red: headers, primary actions */
  --hc-red-ink: #ffffff;
  --hc-ink: #15191e;          /* near-black body text */
  --hc-muted: #5b6670;
  --hc-bg: #f6f8fa;           /* light neutral background */
  --hc-surface: #ffffff;
  --hc-line: #d9e0e6;

  /* Secondary, calm water accent for non-alarm UI */
  --hc-water: #0a7ea4;
  --hc-water-ink: #ffffff;    /* readable ink on a water-accent fill */
  --hc-water-soft: #e3f1f6;

  /* Status palette. Each is distinct from the brand red and from each other.
     Contrast against its paired text meets WCAG 2.1 AA. */
  --hc-open: #1f8f3a;         /* OPEN, green */
  --hc-open-ink: #ffffff;
  --hc-closed: #8a0010;       /* CLOSED lightning, deep alarm red (not brand red) */
  --hc-closed-ink: #ffffff;
  --hc-clear: #d98a00;        /* clear, confirm reopen, amber */
  --hc-clear-ink: #1a1200;
  --hc-degraded-a: #ff7a00;   /* degraded, loud black-and-yellow stripes */
  --hc-degraded-b: #141414;
  --hc-degraded-ink: #ffffff;
  --hc-unknown: #44515c;
  --hc-unknown-ink: #ffffff;

  /* Feedback tints for the live-connection bar: a calm "connected" green and a
     "connecting" amber, each a soft fill with readable ink. Kept distinct from
     the loud status palette so a healthy feed never reads as an alarm. */
  --hc-ok-soft: #e7f6ec;
  --hc-ok-ink: #0f5a26;
  --hc-warn-soft: #fff4d6;
  --hc-warn-ink: #6b4e00;

  /* A plain white for ink and hairline outlines on dark neutral surfaces, named
     so no surface has to hardcode #fff. Colored fills pair with their own ink
     token (--hc-red-ink, --hc-water-ink, --hc-closed-ink). */
  --hc-on-dark: #ffffff;

  /* A QR code must stay light to scan, independent of any future surface or
     dark-theme change, so it has its own token rather than reusing --hc-surface. */
  --hc-qr-bg: #ffffff;

  /* Typography: clean, friendly system sans. Inter may be bundled later. */
  --hc-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hc-font-mono: "SFMono-Regular", ui-monospace, "Menlo", "Consolas", monospace;

  /* Spacing and shape */
  --hc-radius: 12px;
  --hc-radius-sm: 8px;
  --hc-gap: 12px;
  --hc-shadow: 0 1px 3px rgba(21, 25, 30, 0.12);

  /* Touch targets sized for a wet poolside tablet */
  --hc-touch: 44px;
}

/* The hidden attribute always wins over layout rules. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--hc-bg);
  color: var(--hc-ink);
  font-family: var(--hc-font);
  line-height: 1.45;
}

a { color: var(--hc-water); }

/* Respect reduced motion across every surface: keep color and iconography,
   drop the pulsing that some status states use. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}