/* ============================================================================
   RunCoach Design System — "Refined Athletic"
   Bricolage Grotesque (display) + DM Sans (body) + JetBrains Mono (data)
   Cobalt blue primary, warm coral accent, warm off-white light theme
   ========================================================================= */

:root {
  /* ---- Color Tokens ----
     Single-accent system: one emerald carries primary actions and highlights,
     used sparingly. Everything else is a calm near-neutral grey so the accent
     never competes. Light surfaces, restrained. */
  --color-primary: #0E7C5A;          /* emerald — the one accent */
  --color-primary-light: #15976E;
  --color-primary-dark: #0A5F45;
  --color-primary-subtle: rgba(14, 124, 90, 0.10);
  --color-primary-ghost: rgba(14, 124, 90, 0.05);

  /* Accent maps to the same emerald — kept as its own token so the many
     components referencing --color-accent stay single-accent automatically. */
  --color-accent: #0E7C5A;
  --color-accent-light: #15976E;
  --color-accent-dark: #0A5F45;
  --color-accent-subtle: rgba(14, 124, 90, 0.10);

  /* Secondary neutralized to graphite — no longer a third brand hue. */
  --color-secondary: #1C1E21;
  --color-secondary-light: #3A3D42;
  --color-secondary-dark: #111315;

  /* Interactive text/links use ink on light surfaces; the emerald is dark
     enough to also work as text where a hint of the brand is wanted. */
  --color-link: #111315;
  --color-link-hover: #000000;
  --color-accent-strong: #0A5F45;     /* emerald, AA on white as text */

  /* Neutrals — cool-neutral grey (light mode) */
  --color-bg: #FBFBFA;
  --color-bg-elevated: #FFFFFF;
  --color-bg-sunken: #F4F4F2;
  --color-bg-overlay: rgba(16, 18, 20, 0.55);
  --color-surface: #EFEFED;
  --color-border: #E6E6E2;
  --color-border-subtle: #F0F0ED;

  /* Text */
  --color-text: #111315;
  --color-text-secondary: #5E6166;
  --color-text-muted: #9A9DA2;
  --color-text-on-primary: #FFFFFF;   /* white reads on emerald */
  --color-text-on-accent: #FFFFFF;

  /* Semantic */
  --color-error: #DC2626;
  --color-error-subtle: #FEF2F2;
  --color-error-border: #FECACA;
  --color-success: #16A34A;
  --color-success-dark: #15803D;
  --color-success-subtle: #F0FDF4;
  --color-success-border: #BBF7D0;
  --color-warning: #D97706;
  --color-warning-subtle: #FFFBEB;
  --color-warning-border: #FDE68A;
  --color-info: #0284C7;
  --color-info-subtle: #F0F9FF;
  --color-info-border: #BAE6FD;

  /* ---- Workout-type color vocabulary ----
     One color = one kind of effort. Muted, desaturated hues so they read as
     quiet category tags beside the single lime accent rather than competing
     brand colors. The accent (lime) is reserved for actions, not categories. */
  --wt-easy: #3FA9A0;                         /* muted teal — go easy */
  --wt-recovery: #7FC4BD;
  --wt-long: #4A72C4;                          /* slate blue — the big day */
  --wt-tempo: #C98A2E;                         /* ochre — comfortably hard */
  --wt-interval: #C25B47;                       /* clay — hard reps */
  --wt-hill: #8467C4;                          /* muted violet — climbing */
  --wt-strength: #5B9E5B;
  --wt-rest: var(--color-text-muted);

  /* ---- Trail / terrain palette ----
     An earthy supporting cast for the "trail running" identity: deep pine for
     depth, clay/ochre dirt tones, alpine stone, and a faint contour-line color
     used for the topographic texture. These never replace the emerald accent —
     they give the surfaces a sense of terrain underfoot. */
  --color-pine: #14533B;            /* deep forest — hero depth, ridgelines */
  --color-pine-deep: #0C3A29;
  --color-moss: #3F6B43;
  --color-clay: #B5612F;            /* trail dirt */
  --color-ochre: #C98A2E;           /* dusty sun */
  --color-stone: #8A8780;           /* alpine rock */
  --color-sky: #2E6E7E;             /* high-altitude teal */
  --terrain-line: rgba(14, 83, 59, 0.07);   /* contour stroke on light */
  --terrain-line-strong: rgba(14, 83, 59, 0.13);
  --terrain-wash: linear-gradient(180deg, rgba(14, 124, 90, 0.04), transparent 55%);

  /* ---- Road palette ----
     The app coaches road races (5K → Marathon) as well as trail, so the
     identity pairs the earthy terrain set with a cooler, urban "road" set:
     asphalt greys, a slate-cobalt route line, and the dashed centerline that
     reads instantly as tarmac. Ridgelines = trail; dashed lines = road. */
  --color-route: #4A72C4;           /* slate-cobalt — the road line */
  --color-route-deep: #2F4F8F;
  --color-asphalt: #5E6166;         /* mid tarmac */
  --color-tarmac: #3A3D42;          /* dark asphalt */
  --color-lane: #D9A23A;            /* road centerline, used sparingly */
  --road-dash: rgba(74, 114, 196, 0.16);    /* dashed stroke on light */
  --road-dash-strong: rgba(74, 114, 196, 0.28);

  /* ---- Typography ---- */
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md: 1rem;        /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.5rem;     /* 40px */
  --text-5xl: 3.25rem;    /* 52px */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.06em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ---- Spacing ---- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* Aliases for backward compatibility */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
  --space-2xl: var(--space-12);
  --space-3xl: var(--space-16);

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ---- Shadows ----
     Minimal: surfaces rely on hairline borders, not stacked shadows. Only
     genuine overlays (modals, popovers) get a soft, single-layer shadow.
     Token names are preserved so components don't need to change. */
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-lg: 0 6px 20px -8px rgba(28, 25, 23, 0.10);
  --shadow-xl: 0 12px 32px -10px rgba(28, 25, 23, 0.12);
  --shadow-glow: 0 0 0 1px var(--color-primary-subtle);
  --shadow-accent-glow: 0 0 0 1px var(--color-accent-subtle);

  /* ---- Transitions ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
  --duration-slower: 500ms;

  /* Aliases for backward compat */
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-base: var(--duration-base) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* ---- Z-index scale ---- */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;

  /* Backward compat */
  --z-fixed: var(--z-sticky);

  /* ---- Misc ---- */
  --container-max: 1120px;
  --container-narrow: 640px;

  /* Backward compat color aliases */
  --color-background: var(--color-bg);
  --color-background-alt: var(--color-bg-sunken);
  --font-primary: var(--font-body);
  --font-heading: var(--font-display);
  --font-size-xs: var(--text-xs);
  --font-size-sm: var(--text-sm);
  --font-size-base: var(--text-base);
  --font-size-lg: var(--text-lg);
  --font-size-xl: var(--text-xl);
  --font-size-2xl: var(--text-2xl);
  --font-size-3xl: var(--text-3xl);
  --font-size-4xl: var(--text-4xl);
  --font-weight-normal: var(--weight-normal);
  --font-weight-medium: var(--weight-medium);
  --font-weight-semibold: var(--weight-semibold);
  --font-weight-bold: var(--weight-bold);
  --line-height-tight: var(--leading-tight);
  --line-height-normal: var(--leading-normal);
  --line-height-relaxed: var(--leading-relaxed);
  --color-surface: var(--color-surface);
  --color-border-light: var(--color-border-subtle);
  --color-error-light: var(--color-error-subtle);
  --color-success-light: var(--color-success-subtle);
  --color-warning-light: var(--color-warning-subtle);
  --color-info-light: var(--color-info-subtle);
}

/* ============================================================================
   Reset
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  touch-action: manipulation;
}

button {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ============================================================================
   Typography
   ========================================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text);
  letter-spacing: 0.03em;
  margin-block-end: var(--space-4);
}

h1 {
  font-size: var(--text-4xl);
  font-weight: 900;
  letter-spacing: 0.01em;
  margin-block-end: var(--space-6);
}

h2 {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: 0.02em;
}

h3 {
  font-size: var(--text-2xl);
}

h4 {
  font-size: var(--text-xl);
}

h5 {
  font-size: var(--text-lg);
}

h6 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

p {
  margin-block-end: var(--space-4);
  line-height: var(--leading-relaxed);
}

p:last-child {
  margin-block-end: 0;
}

a {
  color: var(--color-link);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

strong, b {
  font-weight: var(--weight-bold);
}

small {
  font-size: var(--text-sm);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

code {
  padding: 2px 6px;
  background-color: var(--color-surface);
  border-radius: var(--radius-xs);
}

pre {
  padding: var(--space-4);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-block-end: var(--space-4);
}

pre code {
  padding: 0;
  background: none;
}

/* Overline / label style */
.overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ============================================================================
   Layout
   ========================================================================= */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.container-narrow {
  max-width: var(--container-narrow);
}

/* ============================================================================
   Utility Classes
   ========================================================================= */

/* Spacing */
.mt-xs { margin-block-start: var(--space-1); }
.mt-sm { margin-block-start: var(--space-2); }
.mt-md { margin-block-start: var(--space-4); }
.mt-lg { margin-block-start: var(--space-6); }
.mt-xl { margin-block-start: var(--space-8); }

.mb-xs { margin-block-end: var(--space-1); }
.mb-sm { margin-block-end: var(--space-2); }
.mb-md { margin-block-end: var(--space-4); }
.mb-lg { margin-block-end: var(--space-6); }
.mb-xl { margin-block-end: var(--space-8); }

.ml-xs { margin-inline-start: var(--space-1); }
.ml-sm { margin-inline-start: var(--space-2); }
.ml-md { margin-inline-start: var(--space-4); }
.ml-lg { margin-inline-start: var(--space-6); }
.ml-xl { margin-inline-start: var(--space-8); }

.mr-xs { margin-inline-end: var(--space-1); }
.mr-sm { margin-inline-end: var(--space-2); }
.mr-md { margin-inline-end: var(--space-4); }
.mr-lg { margin-inline-end: var(--space-6); }
.mr-xl { margin-inline-end: var(--space-8); }

.p-xs { padding: var(--space-1); }
.p-sm { padding: var(--space-2); }
.p-md { padding: var(--space-4); }
.p-lg { padding: var(--space-6); }
.p-xl { padding: var(--space-8); }

.px-xs { padding-inline: var(--space-1); }
.px-sm { padding-inline: var(--space-2); }
.px-md { padding-inline: var(--space-4); }
.px-lg { padding-inline: var(--space-6); }
.px-xl { padding-inline: var(--space-8); }

.py-xs { padding-block: var(--space-1); }
.py-sm { padding-block: var(--space-2); }
.py-md { padding-block: var(--space-4); }
.py-lg { padding-block: var(--space-6); }
.py-xl { padding-block: var(--space-8); }

/* Text */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

.text-primary { color: var(--color-link); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-error { color: var(--color-error); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-accent { color: var(--color-accent); }

.text-center { text-align: center; }
.text-start { text-align: start; }
.text-end { text-align: end; }

.font-normal { font-weight: var(--weight-normal); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
.font-display { font-family: var(--font-display); }

/* Flex / Grid */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.gap-xs { gap: var(--space-1); }
.gap-sm { gap: var(--space-2); }
.gap-md { gap: var(--space-4); }
.gap-lg { gap: var(--space-6); }
.gap-xl { gap: var(--space-8); }

/* Borders & Shadows */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

.border { border: 1px solid var(--color-border); }
.border-light { border: 1px solid var(--color-border-subtle); }

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Footer
   ========================================================================= */

.site-footer {
  margin-top: var(--space-16);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-border);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-link {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
}

.footer-link:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

/* ============================================================================
   Animations
   ========================================================================= */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Stagger animation utility */
.stagger > * {
  animation: slideUp var(--duration-slow) var(--ease-out) both;
}
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 300ms; }
.stagger > *:nth-child(7) { animation-delay: 360ms; }
.stagger > *:nth-child(8) { animation-delay: 420ms; }

/* ============================================================================
   Responsive Utilities
   ========================================================================= */

@media (min-width: 640px) {
  .sm\:hidden { display: none; }
  .sm\:block { display: block; }
  .sm\:flex { display: flex; }
}

@media (min-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block { display: block; }
  .md\:flex { display: flex; }
}

@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:block { display: block; }
  .lg\:flex { display: flex; }
}

/* ============================================================================
   Mobile Optimizations
   ========================================================================= */

@media (max-width: 768px) {
  :root {
    --text-4xl: 2rem;
    --text-5xl: 2.5rem;
  }

  .container {
    padding-inline: var(--space-4);
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }

  button,
  input[type="button"],
  input[type="submit"],
  .btn {
    min-height: 48px;
    min-width: 48px;
  }
}

@media (max-width: 480px) {
  :root {
    --text-4xl: 1.75rem;
    --text-3xl: 1.5rem;
  }

  .container {
    padding-inline: var(--space-4);
  }
}

/* ============================================================================
   Dark Mode — applied via [data-theme="dark"] on <html> element
   ========================================================================= */

[data-theme="dark"] {
  --color-primary: #2BB888;
  --color-primary-light: #4ECCA0;
  --color-primary-dark: #1E9C72;
  --color-primary-subtle: rgba(43, 184, 136, 0.16);
  --color-primary-ghost: rgba(43, 184, 136, 0.08);

  --color-accent: #2BB888;
  --color-accent-light: #4ECCA0;
  --color-accent-dark: #1E9C72;
  --color-accent-subtle: rgba(43, 184, 136, 0.16);

  --color-secondary: #F0EDE8;
  --color-secondary-light: #FFFFFF;
  --color-secondary-dark: #C9C6C0;

  --color-link: #F0EDE8;
  --color-link-hover: #FFFFFF;
  --color-accent-strong: #4ECCA0;     /* brighter emerald reads as text on dark */

  --color-bg: #0F0E13;
  --color-bg-elevated: #1A1920;
  --color-bg-sunken: #0A090E;
  --color-bg-overlay: rgba(0, 0, 0, 0.7);
  --color-surface: #242330;
  --color-border: #2E2D3A;
  --color-border-subtle: #1F1E28;

  --color-text: #F0EDE8;
  --color-text-secondary: #9B978F;
  --color-text-muted: #6B6862;
  --color-text-on-primary: #08130E;   /* near-black on bright emerald */
  --color-text-on-accent: #08130E;

  --color-error: #FF6B6B;
  --color-error-subtle: rgba(255, 107, 107, 0.12);
  --color-error-border: rgba(255, 107, 107, 0.25);
  --color-success: #34D46A;
  --color-success-dark: #22C55E;
  --color-success-subtle: rgba(52, 212, 106, 0.12);
  --color-success-border: rgba(52, 212, 106, 0.25);
  --color-warning: #FFBA2E;
  --color-warning-subtle: rgba(255, 186, 46, 0.12);
  --color-warning-border: rgba(255, 186, 46, 0.25);
  --color-info: #4BA8FF;
  --color-info-subtle: rgba(75, 168, 255, 0.12);
  --color-info-border: rgba(75, 168, 255, 0.25);

  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 6px 20px -8px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 12px 32px -10px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 1px var(--color-primary-subtle);
  --shadow-accent-glow: 0 0 0 1px var(--color-accent-subtle);

  /* Trail palette — brighter, cooler under the dark theme */
  --color-pine: #1E9C72;
  --color-pine-deep: #0C3A29;
  --color-moss: #5BA86A;
  --color-clay: #D08A4F;
  --color-ochre: #E0A94B;
  --color-stone: #6B6862;
  --color-sky: #5BB3C4;
  --terrain-line: rgba(78, 204, 160, 0.06);
  --terrain-line-strong: rgba(78, 204, 160, 0.11);
  --terrain-wash: linear-gradient(180deg, rgba(43, 184, 136, 0.06), transparent 55%);

  /* Road palette — cooler, brighter under the dark theme */
  --color-route: #6E92E0;
  --color-route-deep: #4A72C4;
  --color-asphalt: #9B978F;
  --color-tarmac: #C9C6C0;
  --color-lane: #E0B45A;
  --road-dash: rgba(110, 146, 224, 0.14);
  --road-dash-strong: rgba(110, 146, 224, 0.26);
}

/* ---- Cookie Consent Banner ---- */
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  padding: 1rem;
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}
.cookie-consent-inner {
  max-width: 48rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}
.cookie-consent-inner a {
  color: var(--color-link);
  text-decoration: underline;
}
.cookie-consent-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .cookie-consent-inner {
    flex-direction: column;
    text-align: center;
  }
}