:root {
  /* typography */
  --wl-font-family-primary: "Inter Tight", system-ui, sans-serif;
  --wl-font-size-base: 16px;
  --wl-font-size-sm: 14px;
  --wl-font-size-xs: 12px;

  /* color — chip */
  --wl-color-chip-bg-default: #EFF6FF;        /* blue-50 */
  --wl-color-chip-bg-hover: #DBEAFE;          /* blue-100 */
  --wl-color-chip-bg-selected: #2563EB;       /* blue-600 — Radzen primary */
  --wl-color-chip-text-default: #1D4ED8;      /* blue-700 (location name) */
  --wl-color-chip-text-distance: #4B5563;     /* gray-600 (distance) — DR8 */
  --wl-color-chip-text-selected: #FFFFFF;
  --wl-color-chip-border-default: #BFDBFE;    /* blue-200 */

  /* color — text */
  --wl-color-text-primary: #111827;           /* gray-900 (sport+date+duration) */
  --wl-color-text-secondary: #6B7280;         /* gray-500 (admin label) */
  --wl-color-text-tertiary: #9CA3AF;          /* gray-400 (bullet separators) */
  --wl-color-text-muted: #4B5563;             /* gray-600 (distance, truncation) */

  /* color — surfaces */
  --wl-color-surface-card: #FFFFFF;
  --wl-color-surface-thumbnail-fallback: #F3F4F6;  /* gray-100 */
  --wl-color-border-subtle: #E5E7EB;          /* gray-200 */
  --wl-color-border-divider: #F3F4F6;         /* gray-100 */

  /* radii */
  --wl-radius-card: 8px;
  --wl-radius-pill: 9999px;
  --wl-radius-button: 4px;
  --wl-radius-thumbnail: 6px;

  /* motion */
  --wl-motion-row-drain-duration: 300ms;
  --wl-motion-widget-collapse-duration: 200ms;
  --wl-motion-saved-pulse-duration: 1500ms;
  --wl-motion-easing: ease-out;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --wl-motion-row-drain-duration: 0ms;
    --wl-motion-widget-collapse-duration: 0ms;
    --wl-motion-saved-pulse-duration: 0ms;
  }
}

/* DR6 — override Radzen's font to use the Inter Tight stack everywhere.
   Radzen reads --rz-text-font-family for body via `:root:has(.rz-layout) body`,
   which has higher specificity than a plain `body { font-family: ... }`, so the
   override has to flow through Radzen's own variable. --rz-font-family-sans-serif
   is kept for any code path that reads it directly. */
:root {
  --rz-font-family-sans-serif: var(--wl-font-family-primary);
  --rz-text-font-family: var(--wl-font-family-primary);

  /* Heading weight contrast: Radzen's defaults are all 400. .rz-text-h{1..6}
     selectors win over plain h1/h2 selectors in app.css, so we have to set the
     weights through Radzen's own design tokens. */
  --rz-text-h1-font-weight: 700;
  --rz-text-h2-font-weight: 700;
  --rz-text-h3-font-weight: 600;
  --rz-text-h4-font-weight: 600;
  --rz-text-h5-font-weight: 500;
  /* --rz-text-h6-font-weight already 500 by Radzen default */

  /* Brand re-key: Wave (#2E86AB), a mid-tone sea blue replacing the original
     indigo (#4340D2). Cascades through Radzen's --rz-primary chain to the top
     app bar (--rz-header-background-color = var(--rz-primary)), primary CTA
     buttons, .rz-color-primary text, and the active nav-item highlight. The
     four derived shades match Radzen's naming convention:
       light/lighter -> tints (lighter = 12% alpha for hover/wash backgrounds)
       dark/darker  -> shades (used for hover/active states on solid surfaces)
     --rz-on-primary stays #ffffff (white) — Wave at this saturation has
     enough contrast for readable white text per WCAG AA. */
  --rz-primary: #2E86AB;
  --rz-primary-light: #5BA8C9;
  --rz-primary-lighter: rgba(46, 134, 171, 0.12);
  --rz-primary-dark: #266E8E;
  --rz-primary-darker: #1F5870;

  /* Link color: route through the brand primary so breadcrumbs, body links,
     and Radzen .rz-link pick up Wave instead of the default magenta secondary
     (#e31c65). Keeps single-accent discipline; --rz-secondary is still
     available for places that explicitly want a complementary accent. */
  --rz-link-color: var(--rz-primary);
  --rz-link-hover-color: var(--rz-primary-dark);

  /* Brand re-key follow-up: --rz-on-primary-lighter is the text/foreground
     color for elements sitting on a --rz-primary-lighter (12% alpha primary)
     tint. Radzen Material defaults this to the OLD indigo (#4340D2) — a
     hardcoded literal, NOT a var(--rz-primary) reference. The pilot brand
     re-key didn't reach it, leaving indigo leaks on every active sidebar
     nav item, dropdown selected highlight, switch toggle, and any other
     surface that uses .rz-state-highlight or panel-menu-item-active. This
     points it at the brand so all those surfaces match Wave. */
  --rz-on-primary-lighter: var(--rz-primary);
}

/* Restraint pass (partial): page H1/H2 use Wave through Class="rz-color-primary"
   in markup. That gave the page-top heading the same color as primary CTAs and
   active nav, flattening hierarchy. Override Wave → near-black ONLY when the
   class lands on the page-top heading sizes (rz-text-h3/h4 = the H1/H2 we
   render). Card-section H5 titles keep Wave so they still read as section
   anchors. Standalone .rz-color-primary on links, badges, breadcrumb anchors
   keeps Wave too — only the heading combo is restrained.
   !important matches the precedent: Radzen's own .rz-color-primary uses
   !important in material-base.css, so without it the brand color wins
   regardless of source order or specificity.
   NOTE: the top-bar half of the restraint pass (white header + neutral
   wordmark) was reverted post-visual-review — the page read as bland
   without the Wave header anchoring brand identity. H1 desaturation alone
   gives enough hierarchy contrast against the Wave-colored CTAs. */
:root:has(.rz-layout) .rz-text-h3.rz-color-primary,
:root:has(.rz-layout) .rz-text-h4.rz-color-primary {
  color: var(--wl-color-text-primary) !important;
}

body {
  font-family: var(--wl-font-family-primary);
}