/* Design tokens + font faces — loaded FIRST by every page. */
/* Padel Scorer TV — Padel Invitational brand rebuild
 * Palette: Black #000000 · White #FFFFFF · Invitational Red #981B32
 * Type:    Bebas Neue (display) · Barlow Condensed (headlines) · Poppins (body)
 * Source:  Padel Invitational Brand Guidelines PDF
 *
 * For official Adobe fonts, replace the @import below with your Adobe Fonts
 * project embed code from fonts.adobe.com (Norman VF + Borax VF).
 */

/* Self-hosted woff2 faces (regenerate via scripts/vendor/fetch-fonts.mjs). */
@import url('fonts.css');
/* Typekit (norman-variable + borax-variable) is licensed and must stay an
 * Adobe-hosted kit — the self-hosted families above are its fallback stack,
 * so a Typekit outage degrades the look instead of blanking the boards. */
@import url("https://use.typekit.net/vcg8tgu.css");

:root {
  /* ─── Brand palette ───────────────────────────────────── */
  --black:         #000000;
  --white:         #FFFFFF;
  --red:           #981B32;
  --red-bright:    #b52040;
  --red-glow:      rgba(152, 27, 50, 0.18);
  --red-dim:       rgba(152, 27, 50, 0.10);
  --red-border:    rgba(152, 27, 50, 0.55);

  /* ─── Functional tokens ───────────────────────────────── */
  --bg:            var(--black);
  --text:          var(--white);
  --muted:         rgba(255, 255, 255, 0.50);
  --stone:         rgba(255, 255, 255, 0.34);
  --panel:         rgba(255, 255, 255, 0.04);
  --panel-hover:   rgba(255, 255, 255, 0.08);
  --border:        rgba(255, 255, 255, 0.13);
  --border-strong: rgba(255, 255, 255, 0.26);
  --danger:        #c0392b;

  /* ─── Type stacks ─────────────────────────────────────── */
  --hero:    "norman-variable", 'Bebas Neue', 'Arial Narrow', sans-serif;
  --head:    "borax-variable", 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Poppins', 'Helvetica Neue', Arial, sans-serif;

  /* ─── Geometry ────────────────────────────────────────── */
  --radius:    10px;
  --radius-lg: 16px;
  --shadow:    0 8px 32px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 70px rgba(0, 0, 0, 0.70);

  /* ─── Motion (PR 12 animation system reads these) ─────── */
  --motion-fast: 300ms;
  --motion-slow: 500ms;

  /* ─── Serve indicator — THE dot (six resizes in one day in V1;
         now it changes here, once) ─────────────────────────── */
  --serve-dot: 1.0em;       /* 16:9 board */
  --serve-dot-vert: 0.5em;  /* portrait board */

  /* ─── Viewer type scales ──────────────────────────────── */
  --team-fs:    clamp(22px, 4.2vw, 60px);
  --players-fs: clamp(10px, 1.2vw, 16px);
  --players-mt: 8px;
}