/*
 * Walton Raceway theme (customer layer), after https://www.waltonraceway.ca/: a black header and footer with the white
 * WLTN logo, white pages, light-gray (#d9d9d9) buttons, Manrope headings and Poppins text (Google Fonts, linked in every
 * page head). Light is the default theme (js/site.js, storedTheme); dark is black with the same grays.
 * The colour tokens come first: .tools/generate-public.mjs reads --primary and --foreground from the first :root and
 * .dark blocks to derive the racing pages' theme (css/public.css).
 */
:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --card: #ffffff;
  --card-foreground: #0a0a0a;
  --popover: #ffffff;
  --popover-foreground: #0a0a0a;
  --primary: #111111;
  --primary-foreground: #ffffff;
  --secondary: #f2f2f2;
  --secondary-foreground: #0a0a0a;
  --muted: #f2f2f2;
  --muted-foreground: #525252;
  --accent: #d9d9d9;
  --accent-foreground: #0a0a0a;
  --destructive: #c4122f;
  --destructive-foreground: #ffffff;
  --border: #d9d9d9;
  --input: #d9d9d9;
  --ring: #111111;
  --chart-1: #111111;
  --chart-2: #7d7d7d;
  --chart-3: #1f9d6b;
  --chart-4: #e8590c;
  --chart-5: #2563eb;
  --sidebar: #f2f2f2;
  --sidebar-foreground: #0a0a0a;
  --sidebar-primary: #111111;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #d9d9d9;
  --sidebar-accent-foreground: #0a0a0a;
  --sidebar-border: #d9d9d9;
  --sidebar-ring: #111111;
  --font-sans: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Manrope', 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --tracking-normal: 0em;
  --radius: 0;
  --spacing: 0.25rem;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.12);
  --shadow: 0 2px 8px rgb(0 0 0 / 0.14);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.16);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.2);
}

.dark {
  --background: #000000;
  --foreground: #f5f5f5;
  --card: #111111;
  --card-foreground: #f5f5f5;
  --popover: #141414;
  --popover-foreground: #f5f5f5;
  --primary: #d9d9d9;
  --primary-foreground: #000000;
  --secondary: #1f1f1f;
  --secondary-foreground: #f5f5f5;
  --muted: #1a1a1a;
  --muted-foreground: #b3b3b3;
  --accent: #2a2a2a;
  --accent-foreground: #f5f5f5;
  --destructive: #ff6b81;
  --destructive-foreground: #1c0309;
  --border: #2e2e2e;
  --input: #2e2e2e;
  --ring: #d9d9d9;
  --chart-1: #d9d9d9;
  --chart-2: #9a9a9a;
  --chart-3: #3ddc97;
  --chart-4: #ff8a3d;
  --chart-5: #6b9bff;
  --sidebar: #0a0a0a;
  --sidebar-foreground: #f5f5f5;
  --sidebar-primary: #d9d9d9;
  --sidebar-primary-foreground: #000000;
  --sidebar-accent: #2a2a2a;
  --sidebar-accent-foreground: #f5f5f5;
  --sidebar-border: #2e2e2e;
  --sidebar-ring: #d9d9d9;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow: 0 2px 8px rgb(0 0 0 / 0.55);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.65);
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  background: var(--background);
}
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
[data-site-header] :focus-visible,
[data-theme-region='footer'] :focus-visible { outline-color: #ffffff; }
::selection { background: #111111; color: #ffffff; }
.dark ::selection { background: #d9d9d9; color: #000000; }

/* Headings: Manrope, upper case, as on waltonraceway.ca. The racing data pages ([data-live-page]) keep their own. */
main h1:not([data-live-page] *),
main h2:not([data-live-page] *),
main h3:not([data-live-page] *) {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
main h1:not([data-live-page] *) { text-transform: uppercase; font-size: clamp(2.25rem, 1.5rem + 3.6vw, 4rem); }
main h2:not([data-live-page] *) { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
main h3:not([data-live-page] *) { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem); }
.prose { font-size: 1.0625rem; line-height: 1.7; }
.prose :where(a) { text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 600; }
.prose :where(img) { height: auto; max-width: 100%; }
.prose :where(h2) { margin-top: 1.75em; }

/* Header and footer: always black with white text, like waltonraceway.ca. */
[data-site-header],
[data-theme-region='footer'] {
  --background: #000000;
  --foreground: #ffffff;
  --card: #111111;
  --muted: rgb(255 255 255 / 0.12);
  --muted-foreground: #bfbfbf;
  --accent: rgb(255 255 255 / 0.16);
  --accent-foreground: #ffffff;
  --border: #2e2e2e;
  --primary: #d9d9d9;
  --ring: #ffffff;
  background: #000000;
  color: #ffffff;
}
[data-site-header] { border-bottom: 1px solid #2e2e2e; }
[data-site-header] [data-nav-item] > a,
[data-site-header] [data-nav-item] > button,
[data-site-header] [data-more-item] > button,
[data-site-header] [data-probe-item] > span,
[data-site-header] [data-probe-more] > span {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  color: #ffffff;
  background: transparent;
}
[data-site-header] [data-nav-item] > a:hover,
[data-site-header] [data-nav-item] > button:hover,
[data-site-header] [data-more-item] > button:hover { background: rgb(255 255 255 / 0.14); }
[data-site-header] button { color: #ffffff; }
[data-site-header] button:hover:not(:disabled) { background: rgb(255 255 255 / 0.14); }
/* Login is a plain white link; Get Started is the light-gray button (waltonraceway.ca buttons are #d9d9d9 on black). */
[data-site-header] [data-header-actions] a,
[data-site-header] [data-probe-actions] > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding: 0 1.25rem;
  border-radius: 0;
  background: #d9d9d9;
  color: #000000;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background-color 0.15s;
}
[data-site-header] [data-header-actions] a:hover { background: #ffffff; color: #000000; }
[data-site-header] [data-header-actions] a:not(:last-child),
[data-site-header] [data-probe-actions] > span:not(:last-child) {
  gap: 0.35rem;
  padding: 0 0.6rem;
  background: transparent;
  color: #ffffff;
}
[data-site-header] [data-header-actions] a:not(:last-child):hover { background: rgb(255 255 255 / 0.14); color: #ffffff; }
[data-site-header] [data-header-actions] a:not(:last-child) svg { width: 1rem; height: 1rem; }
[data-theme-region='footer'] a:hover { text-decoration: underline; }
[data-theme-region='footer'] [data-cms^='footer-en-1'] span {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
[data-theme-region='footer'] ul a,
[data-theme-region='footer'] ul span { font-size: 0.9rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

/* Home banner: the white logo on black, as the top of waltonraceway.ca. */
.wr-banner { display: flex; justify-content: center; padding: clamp(1.5rem, 4vw, 3rem) 1rem; background: #000000; }
.wr-banner img { width: min(100%, 26rem); height: auto; }

main { overflow-x: clip; }
main > section.border-b { border-color: var(--border); }