/*
 * Hydive design tokens — the ONE brand, consumed by every app surface.
 *
 * This file lives inside the Netlify publish root (apps/) and is served at
 * /shared/tokens.css on every host, so all surfaces — marketing, clubsite,
 * board, desk — link it and map their local variables onto these. No brand
 * hex literals in app CSS; test/surfaces.mjs enforces the link on every
 * surface. Per-club theming (orgs.theme, P5) will override these at runtime
 * once a board can set a theme — it is not wired yet.
 *
 * Four blocks: light default, OS dark, and explicit data-theme overrides so
 * an in-app theme toggle beats the OS preference in both directions.
 *
 * Brand faces are self-hosted variable fonts (SIL OFL) served from
 * /shared/fonts/ — Besley (a Clarendon slab) for display headlines, Public
 * Sans for UI/body, and Sometype Mono for every money figure. @font-face here
 * costs nothing on surfaces that never use the family name; surfaces opt in
 * via --hd-font-display / --hd-font-sans / --hd-font-figure.
 */
@font-face {
  font-family: "Besley";
  src: url("/shared/fonts/besley-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Besley";
  src: url("/shared/fonts/besley-latin-var-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/shared/fonts/public-sans-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sometype Mono";
  src: url("/shared/fonts/sometype-mono-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --hd-navy: #002147;        /* brand anchor — deep pool-water navy */
  --hd-accent: #00a8e8;      /* brand accent — pool cyan */
  --hd-accent-deep: #0086bd;
  --hd-accent-ink: #002147;  /* text color used ON the accent */
  --hd-sun: #f4b740;         /* warm highlight — lifeguard-chair gold */

  --hd-bg: #f7fafc;
  --hd-surface: #ffffff;
  --hd-surface-2: #f1f6fa;
  --hd-ink: #0a2033;
  --hd-ink-soft: #33475b;
  --hd-muted: #5b7186;
  --hd-hair: #e2eaf1;

  --hd-ok: #0f8a55;   --hd-ok-bg: #e3f4ec;
  --hd-warn: #b06f10; --hd-warn-bg: #fbeed7;
  --hd-crit: #c0392b; --hd-crit-bg: #f8e2df;

  /* Depth is layering, not glow: cards at rest are flat (surface + hairline
     border, no shadow). The base shadow is a crisp edge for the few raised
     things; -lg is for true overlays only (menus, dialogs, sticky bars). */
  --hd-shadow: 0 1px 2px rgba(2, 20, 38, .07);
  --hd-radius: 10px;

  /* Type — brand faces + a fluid scale. Display = Besley (slab, engraved
     figures), sans = Public Sans (civic UI workhorse). Fallbacks are
     slab/system faces. */
  --hd-font-display: "Besley", "Rockwell", "Roboto Slab", Georgia, serif;
  --hd-font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Money is its own voice. Every figure a person reads as an amount — a dues
     balance, a fund total, a price, an amount due — is set in this face, never
     the display face. Its digits are monospaced, so columns align with no
     font-variant-numeric anywhere, and a ticking clock cannot jitter. NOT
     themable: a club may not restyle the numerals its members read a balance
     in, for the same reason it may not restyle body text. */
  --hd-font-figure: "Sometype Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --hd-text-xs: .8125rem;    /* ledger headings — sentence case, weight 640 */
  --hd-text-sm: .875rem;
  --hd-text-md: 1rem;
  --hd-text-lg: 1.125rem;    /* ledes / standfirsts */
  --hd-text-xl: clamp(1.35rem, 1.15rem + .9vw, 1.6rem);   /* card headings */
  --hd-text-2xl: clamp(1.9rem, 1.4rem + 2.2vw, 2.8rem);   /* section h2 */
  --hd-text-hero: clamp(2.5rem, 1.9rem + 3.2vw, 4.25rem); /* hero h1 */

  /* Spacing scale (4px base) */
  --hd-s1: 4px;  --hd-s2: 8px;  --hd-s3: 12px; --hd-s4: 16px;
  --hd-s5: 24px; --hd-s6: 32px; --hd-s7: 48px; --hd-s8: 72px; --hd-s9: 112px;

  /* Radii (base --hd-radius above). Squared controls: buttons, fields, chips
     and badges sit on -sm; -pill is for genuinely circular things only
     (avatars, status dots, the kiosk queue pill). */
  --hd-radius-sm: 6px; --hd-radius-lg: 16px; --hd-radius-pill: 999px;

  /* Shadow steps around the base --hd-shadow */
  --hd-shadow-sm: 0 1px 2px rgba(2, 20, 38, .05);
  --hd-shadow-lg: 0 16px 40px rgba(2, 20, 38, .18);

  /* Hero surface — the one dramatic navy moment per page. A flat field:
     the drama is the display face at scale, not a gradient. */
  --hd-hero-bg: #002147;
  --hd-hero-ink: #eaf6fd;
  --hd-hero-ink-soft: #c9e2f2;

  /* Motion — every surface transition rides these; reduced-motion zeroes
     them. -1/-2 are interaction speeds; -3 is the one signature motion,
     the burn-down line drawing itself on first paint. */
  --hd-ease: cubic-bezier(.3, .7, .3, 1);
  --hd-dur-1: 120ms; --hd-dur-2: 240ms; --hd-dur-3: 700ms;
}
@media (prefers-color-scheme: dark) {
  :root {
    --hd-accent: #22b8f0;
    --hd-accent-deep: #0d90c8;
    --hd-accent-ink: #04121d;

    --hd-bg: #05121d;
    --hd-surface: #0b2133;
    --hd-surface-2: #0a1a29;
    --hd-ink: #e9f2f9;
    --hd-ink-soft: #c3d3df;
    --hd-muted: #8aa2b5;
    --hd-hair: #1d3a52;

    --hd-ok: #43cf90;   --hd-ok-bg: #0f3025;
    --hd-warn: #e6b25a; --hd-warn-bg: #33260f;
    --hd-crit: #f0796a; --hd-crit-bg: #331410;

    --hd-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    --hd-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --hd-shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
    --hd-hero-bg: #04182b;
  }
}
:root[data-theme="light"] {
  --hd-accent: #00a8e8;
  --hd-accent-deep: #0086bd;
  --hd-accent-ink: #002147;

  --hd-bg: #f7fafc;
  --hd-surface: #ffffff;
  --hd-surface-2: #f1f6fa;
  --hd-ink: #0a2033;
  --hd-ink-soft: #33475b;
  --hd-muted: #5b7186;
  --hd-hair: #e2eaf1;

  --hd-ok: #0f8a55;   --hd-ok-bg: #e3f4ec;
  --hd-warn: #b06f10; --hd-warn-bg: #fbeed7;
  --hd-crit: #c0392b; --hd-crit-bg: #f8e2df;

  --hd-shadow: 0 1px 2px rgba(2, 20, 38, .07);
  --hd-shadow-sm: 0 1px 2px rgba(2, 20, 38, .05);
  --hd-shadow-lg: 0 16px 40px rgba(2, 20, 38, .18);
  --hd-hero-bg: #002147;
}
:root[data-theme="dark"] {
  --hd-accent: #22b8f0;
  --hd-accent-deep: #0d90c8;
  --hd-accent-ink: #04121d;

  --hd-bg: #05121d;
  --hd-surface: #0b2133;
  --hd-surface-2: #0a1a29;
  --hd-ink: #e9f2f9;
  --hd-ink-soft: #c3d3df;
  --hd-muted: #8aa2b5;
  --hd-hair: #1d3a52;

  --hd-ok: #43cf90;   --hd-ok-bg: #0f3025;
  --hd-warn: #e6b25a; --hd-warn-bg: #33260f;
  --hd-crit: #f0796a; --hd-crit-bg: #331410;

  --hd-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  --hd-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --hd-shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
  --hd-hero-bg: #04182b;
}

/* Motion safety: reduced motion zeroes the shared durations, so every
   transition/animation built on --hd-dur-* is disabled in one place. */
@media (prefers-reduced-motion: reduce) {
  :root { --hd-dur-1: 0ms; --hd-dur-2: 0ms; --hd-dur-3: 0ms; }
}

/*
 * The wordmark. The weight split is not decoration: "Hydive" is read three
 * ways by someone who has only seen it written (HIGH-dive, HY-div, hi-DIVE),
 * and club-to-club referral — one board telling another at a league meeting —
 * is the likely primary channel. If the person saying it hesitates, the
 * recommendation weakens; if they say "high dive" and the listener types
 * "highdive", the referral is lost outright. Splitting the weight shows the
 * seam in the word and puts the stress on "dive".
 */
.hd-wordmark { font-weight: 450; }
.hd-wordmark > span { font-weight: 800; }