:root {
  --background: #ffffff;
  --surface: #f8fafc;

  --text: #1e293b;
  --text-light: #64748b;
  --text-muted: #6b7280;

  --border: #e2e8f0;

  --primary: #0044ee;
  --primary-hover: #0033cc;
  --secondary: #0a0e17;
  --accent: #2ecc71;

  --success: #10b981;
  --premium-gold: #f59e0b;

  /* Semantic aliases for reusable components */
  --primary-color: var(--primary);
  --text-primary: var(--text);
  --border-color: var(--border);
  --card-bg: var(--background);
  --shadow-soft: var(--shadow-sm);
  --spacing-sm: var(--space-sm);
  --spacing-md: var(--space-md);
  --spacing-lg: var(--space-lg);

  --nav-bg: #ffffff;
  --nav-border: #edf0eb;
  --nav-text: #1a2310;
  --nav-text-muted: #4a5d3a;
  --nav-hover-bg: #f5f7f3;
  --nav-active: #0044ee;
  --nav-shadow: rgba(0, 0, 0, 0.1);
  --nav-backdrop: rgba(255, 255, 255, 0.84);
  --nav-backdrop-border: rgba(74, 93, 58, 0.14);
  --nav-accent: #d4af37;
  --nav-accent-soft: rgba(212, 175, 55, 0.18);
  --nav-link-glow: rgba(74, 93, 58, 0.2);
  --nav-action-bg: #0f172a;
  --nav-action-hover: #1e293b;

  --footer-bg: #0f172a;
  --footer-bg-soft: #111b34;
  --footer-text: #94a3b8;
  --footer-text-strong: #e2e8f0;
  --footer-title: #ffffff;
  --footer-border: rgba(255, 255, 255, 0.14);
  --footer-pill-bg: rgba(255, 255, 255, 0.08);
  --footer-pill-border: rgba(255, 255, 255, 0.16);

  --sticky-bg: rgba(15, 23, 42, 0.88);
  --sticky-border: color-mix(in srgb, var(--primary) 62%, #ffffff 38%);
  --sticky-text: #f8fafc;
  --sticky-height: 74px;

  --card-header-bg: #6b7c5cd1;

  --font-primary: "Inter", sans-serif;

  --fw-regular: 400;
  --fw-bold: 600;
  --fw-extrabold: 800;

  /* Fluid responsive typography */
  --fs-h1: clamp(1.8rem, 4vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.5rem);
  --fs-h3: clamp(1.1rem, 2vw, 1.25rem);
  --fs-body: clamp(0.95rem, 1.2vw, 1rem);

  --lh-h1: 1.15;
  --lh-body: 1.6;

  --ls-h1: -0.02em;
  --ls-h2: -0.01em;

  --space-xs: clamp(4px, 0.5vw, 6px);
  --space-sm: clamp(8px, 1vw, 12px);
  --space-md: clamp(16px, 2vw, 24px);
  --space-lg: clamp(24px, 3vw, 40px);
  --space-xl: clamp(32px, 4vw, 64px);

  --radius-sm: 6px;
  --radius: clamp(8px, 1vw, 12px);
  --radius-lg: clamp(14px, 1.5vw, 20px);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 20px 40px rgba(0, 0, 0, 0.06);

  --shadow-primary: 0 4px 12px rgba(0, 68, 238, 0.3);
  --shadow-primary-hover: 0 6px 18px rgba(0, 68, 238, 0.4);

  --dark-bg: var(--secondary);
  --dark-text: #ffffff;
  --dark-text-muted: rgba(255, 255, 255, 0.7);
  --dark-card-bg: #111827;
  --dark-border-subtle: rgba(255, 255, 255, 0.08);

  --mockup-rotate: rotateY(-5deg) rotateX(2deg);
  --mockup-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  --dot-red: #ff5f56;
  --dot-yellow: #ffbd2e;
  --dot-green: #27c93f;

  --container-max: 1280px;
  --container-padding: clamp(16px, 4vw, 40px);
  --event-layout-padding: clamp(14px, 3vw, 32px);

  /* Events page tokens */
  --event-page-bg: color-mix(in srgb, var(--surface) 72%, var(--background) 28%);
  --event-hero-min-height: clamp(220px, 40vw, 550px);
  --event-hero-overlay-start: color-mix(in srgb, var(--secondary) 88%, transparent);
  --event-hero-overlay-end: color-mix(in srgb, var(--dark-bg) 62%, transparent);
  --event-hero-glow: color-mix(in srgb, var(--primary) 22%, transparent);
  --event-hero-panel-bg: color-mix(in srgb, var(--secondary) 66%, transparent);
  --event-hero-panel-border: color-mix(in srgb, var(--footer-title) 24%, transparent);
  --event-hero-panel-shadow: var(--shadow-md);
  --event-hero-muted: var(--footer-text);
  --event-hero-strong: var(--secondary);
  --event-hero-pill-bg: color-mix(in srgb, var(--accent) 26%, transparent);
  --event-hero-pill-border: color-mix(in srgb, var(--accent) 46%, transparent);
  --event-hero-brand-bg: color-mix(in srgb, var(--background) 92%, transparent);
  --event-hero-brand-border: color-mix(in srgb, var(--footer-title) 36%, transparent);
  --event-hero-brand-shadow: var(--shadow);
  --event-hero-progress-track: color-mix(in srgb, var(--footer-title) 28%, transparent);
  --event-hero-progress-fill: var(--accent);
  --event-hero-dot: color-mix(in srgb, var(--footer-title) 56%, transparent);
  --event-hero-dot-active: var(--footer-title);
  --event-hero-nav-bg: color-mix(in srgb, var(--secondary) 72%, transparent);
  --event-hero-nav-border: color-mix(in srgb, var(--footer-title) 26%, transparent);
  --event-hero-nav-hover-bg: var(--primary);
  --event-hero-nav-hover-border: var(--primary);
  --event-hero-cta-bg: var(--primary);
  --event-hero-cta-hover: var(--primary-hover);
  --event-hero-cta-text: var(--footer-title);
  --event-hero-cta-ghost-bg: rgb(255 255 255 / 0.5);
  --event-hero-cta-ghost-border: rgb(255 255 255 / 0.72);
  --event-hero-cta-ghost-hover: rgb(255 255 255 / 0.68);
  --event-hero-live-dot: var(--footer-title);
  --event-info-bg: linear-gradient(
    130deg,
    color-mix(in srgb, var(--secondary) 90%, transparent),
    color-mix(in srgb, var(--dark-bg) 64%, transparent)
  );
  --event-info-border: color-mix(in srgb, var(--primary) 34%, var(--border) 66%);
  --event-info-shadow: var(--shadow-md);
  --event-info-title: color-mix(in srgb, var(--secondary) 88%, var(--text) 12%);
  --event-info-glow: color-mix(in srgb, var(--primary) 28%, transparent);
  --event-info-accent: color-mix(in srgb, var(--accent) 36%, transparent);

  --event-toolbar-bg: color-mix(in srgb, var(--surface) 84%, var(--background) 16%);
  --event-toolbar-border: color-mix(in srgb, var(--border) 74%, transparent);
  --event-item-hover-border: color-mix(in srgb, var(--primary) 26%, var(--border) 74%);
  --event-item-hover-shadow: var(--shadow-primary);

  /* Home page tokens */
  --home-page-bg: color-mix(in srgb, var(--surface) 78%, var(--background) 22%);
  --home-hero-min-height: clamp(220px, 34vw, 360px);
  --home-hero-overlay-start: color-mix(in srgb, var(--secondary) 86%, transparent);
  --home-hero-overlay-end: color-mix(in srgb, var(--dark-bg) 58%, transparent);
  --home-hero-shadow: var(--shadow-md);
  --home-hero-text: var(--footer-title);
  --home-hero-muted: var(--footer-text-strong);
  --home-hero-chip-bg: color-mix(in srgb, var(--footer-title) 12%, transparent);
  --home-hero-chip-border: color-mix(in srgb, var(--footer-title) 22%, transparent);
  --home-card-bg: var(--background);
  --home-card-border: color-mix(in srgb, var(--border) 86%, transparent);
  --home-card-shadow: var(--shadow-sm);

  /* Participants page tokens */
  --participants-page-bg: color-mix(in srgb, var(--surface) 80%, var(--background) 20%);
  --participants-hero-bg: linear-gradient(
    120deg,
    color-mix(in srgb, var(--secondary) 84%, transparent),
    color-mix(in srgb, var(--dark-bg) 58%, transparent)
  );
  --participants-hero-text: var(--footer-title);
  --participants-hero-muted: var(--footer-text-strong);
  --participants-card-bg: var(--background);
  --participants-card-border: color-mix(in srgb, var(--border) 86%, transparent);
  --participants-card-shadow: var(--shadow-sm);
  --participants-soft-bg: color-mix(in srgb, var(--surface) 86%, var(--background) 14%);
  --participants-stat-head-bg: color-mix(in srgb, var(--secondary) 76%, var(--background) 24%);
  --participants-stat-head-text: var(--footer-title);
  --participants-star-idle: color-mix(in srgb, var(--text-light) 48%, transparent);
  --participants-star-active: var(--premium-gold);
  --participants-ghost-btn-bg: color-mix(in srgb, var(--primary) 10%, var(--background) 90%);
  --participants-ghost-btn-border: color-mix(in srgb, var(--primary) 28%, var(--border) 72%);
  --participants-ghost-btn-text: color-mix(in srgb, var(--secondary) 72%, var(--text) 28%);
  --participants-ghost-btn-hover-bg: color-mix(in srgb, var(--primary) 17%, var(--background) 83%);
  --participants-ghost-btn-hover-text: color-mix(in srgb, var(--secondary) 84%, var(--text) 16%);
  --participants-modal-bg: var(--background);
  --participants-modal-border: color-mix(in srgb, var(--primary) 14%, var(--border) 86%);
  --participants-modal-shadow: var(--shadow-card);
  --participants-modal-header-bg: color-mix(in srgb, var(--secondary) 88%, var(--background) 12%);
  --participants-modal-title: var(--footer-title);
  --participants-modal-label: color-mix(in srgb, var(--secondary) 74%, var(--text) 26%);
  --participants-modal-input-bg: color-mix(in srgb, var(--surface) 92%, var(--background) 8%);
  --participants-modal-input-border: color-mix(in srgb, var(--primary) 20%, var(--border) 80%);
  --participants-modal-input-focus: var(--primary);

  /* Global agegroup component tokens */
  --agegroup-panel-bg: color-mix(in srgb, var(--surface) 88%, var(--background) 12%);
  --agegroup-panel-border: color-mix(in srgb, var(--border) 84%, transparent);
  --agegroup-panel-shadow: var(--shadow-sm);
  --agegroup-select-bg: var(--background);
  --agegroup-select-text: var(--text);
  --agegroup-select-border: color-mix(in srgb, var(--primary) 24%, var(--border) 76%);
  --agegroup-pill-bg: color-mix(in srgb, var(--primary) 11%, var(--background) 89%);
  --agegroup-pill-text: var(--text);
  --agegroup-pill-border: color-mix(in srgb, var(--primary) 22%, transparent);
  --agegroup-pill-hover-bg: color-mix(in srgb, var(--primary) 16%, var(--background) 84%);
  --agegroup-pill-active-bg: var(--primary);
  --agegroup-pill-active-text: var(--footer-title);
  --agegroup-toggle-bg: var(--background);
  --agegroup-toggle-text: var(--text);
  --agegroup-toggle-border: var(--agegroup-panel-border);
  --agegroup-mobile-fab-bg: color-mix(in srgb, var(--secondary) 84%, var(--background) 16%);
  --agegroup-mobile-fab-text: var(--footer-title);
}

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

body {
  margin: 0;
  font-family: var(--font-primary);
  background: var(--background);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  margin-bottom: var(--space-md);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-h2);
  margin-bottom: var(--space-sm);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-xs);
}

p {
  font-size: var(--fs-body);
  color: var(--text-light);
  margin-bottom: var(--space-sm);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.section {
  padding: var(--space-xl) 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);

  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);

  border-radius: var(--radius);
  border: none;
  cursor: pointer;

  transition: all 0.25s ease;
}

.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: var(--shadow-primary-hover);
  transform: translateY(-2px);
}

.btn-dark {
  background: var(--secondary);
  color: white;
}

.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-sm {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--fs-small);
}

.card {
  background: white;
  padding: var(--space-xs);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: var(--shadow-card);
  transition: all 0.3s ease;
}

.card:hover {
  transform: none;
  box-shadow: var(--shadow-card);
  border-color: rgba(0, 0, 0, 0.05);
}

.grid {
  display: grid;
  gap: var(--space-md);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.feature-card {
  text-align: center;
}

.icon-box {
  font-size: 28px;
  margin-bottom: var(--space-sm);
}

.pricing-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

.pricing-card:hover {
  transform: none;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.flex-wrap {
  flex-wrap: wrap;
  gap: var(--space-sm);
}

@media (max-width: 768px) {
  :root {
    --shadow-card: 0 10px 25px rgba(0, 0, 0, 0.05);
  }

  .section {
    padding: var(--space-lg) 0;
  }
}

@media (max-width: 480px) {
  :root {
    --fs-h1: 1.6rem;
    --fs-h2: 1.3rem;
  }
}