/*
 * 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/ — Fraunces for display headlines, Inter for UI/body.
 * @font-face here costs nothing on surfaces that never use the family name;
 * surfaces opt in via --hd-font-display / --hd-font-sans.
 */
@font-face {
  font-family: "Fraunces";
  src: url("/shared/fonts/fraunces-latin-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/shared/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  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;

  --hd-shadow: 0 1px 2px rgba(0, 33, 71, .04), 0 12px 32px rgba(0, 33, 71, .07);
  --hd-radius: 14px;

  /* Type — brand faces + a fluid scale. Display = Fraunces (serif, editorial),
     sans = Inter (UI/body). Fallbacks are metric-close system faces. */
  --hd-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --hd-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --hd-text-xs: .75rem;      /* kickers, micro-labels — pair w/ uppercase + tracking */
  --hd-text-sm: .875rem;
  --hd-text-md: 1rem;
  --hd-text-lg: 1.125rem;    /* ledes */
  --hd-text-xl: clamp(1.35rem, 1.15rem + .9vw, 1.6rem);   /* card headings */
  --hd-text-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);     /* section h2 */
  --hd-text-hero: clamp(3.2rem, 2rem + 6.5vw, 6.4rem);    /* 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) */
  --hd-radius-sm: 10px; --hd-radius-lg: 22px; --hd-radius-pill: 999px;

  /* Shadow steps around the base --hd-shadow */
  --hd-shadow-sm: 0 1px 2px rgba(0, 33, 71, .05), 0 3px 10px rgba(0, 33, 71, .05);
  --hd-shadow-lg: 0 2px 4px rgba(0, 33, 71, .05), 0 24px 60px rgba(0, 33, 71, .12);

  /* Hero surface — the one dramatic navy moment per page */
  --hd-hero-bg: linear-gradient(168deg, #002448 0%, #012a52 45%, #013a63 78%, #01517c 100%);
  --hd-hero-ink: #eaf6fd;
  --hd-hero-ink-soft: #c9e2f2;

  /* Motion — every surface transition rides these; reduced-motion zeroes them */
  --hd-ease: cubic-bezier(.22, 1, .36, 1);
  --hd-dur-1: 160ms; --hd-dur-2: 320ms; --hd-dur-3: 640ms;
}
@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: #173247;

    --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, .4), 0 12px 34px rgba(0, 0, 0, .4);
    --hd-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 10px rgba(0, 0, 0, .3);
    --hd-shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 24px 60px rgba(0, 0, 0, .5);
    --hd-hero-bg: linear-gradient(168deg, #03101d 0%, #04182b 50%, #062a44 100%);
  }
}
: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(0, 33, 71, .04), 0 12px 32px rgba(0, 33, 71, .07);
  --hd-shadow-sm: 0 1px 2px rgba(0, 33, 71, .05), 0 3px 10px rgba(0, 33, 71, .05);
  --hd-shadow-lg: 0 2px 4px rgba(0, 33, 71, .05), 0 24px 60px rgba(0, 33, 71, .12);
  --hd-hero-bg: linear-gradient(168deg, #002448 0%, #012a52 45%, #013a63 78%, #01517c 100%);
}
: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: #173247;

  --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, .4), 0 12px 34px rgba(0, 0, 0, .4);
  --hd-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 3px 10px rgba(0, 0, 0, .3);
  --hd-shadow-lg: 0 2px 4px rgba(0, 0, 0, .4), 0 24px 60px rgba(0, 0, 0, .5);
  --hd-hero-bg: linear-gradient(168deg, #03101d 0%, #04182b 50%, #062a44 100%);
}

/* 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; }
}