:root,
[data-bs-theme="light"] {
  --al-primary: #2b2d42;
  --al-secondary: #778da9;
  --al-accent: #edf2f4;
  --al-light: #fff;
  --al-dark: #2b2d42;
  --al-green: #52b788;
  --al-red: #ef233c;

  
  /* Core palette */
  --al-text: #212529;
  --al-muted: #6c757d;
  --al-surface: #ffffff;
  --al-font-family: Arial, Helvetica, Verdana, sans-serif;
  --al-font-size: 1rem;
  --al-font-size-sm: 0.875rem;
  --al-font-size-xs: 0.78rem;
  --al-line-height: 1.5;
  --al-border-color: rgba(0, 0, 0, 0.15);
  --al-border-color-subtle: rgba(0, 0, 0, 0.08);

  /* Radius + shadow */
  --al-radius: 8px;
  --al-radius-lg: 14px;
  --al-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);

  /* Countdown defaults */
  --al-countdown-bg: var(--al-secondary);
  --al-countdown-bg-alpha: 100%;
  --al-countdown-card: #ffffff78;
  --al-countdown-text: var(--al-light);
  --al-countdown-title: var(--al-light);
  --al-countdown-subtitle: var(--al-muted);
  --al-countdown-dot: var(--al-light);
  

  /* Bootstrap variable mapping (CSS-only theming) */
  --bs-white: #fff;
  --bs-black: #000;
  --bs-primary: var(--al-primary);
  --bs-secondary: var(--al-secondary);
  --bs-danger: var(--al-red);
  --bs-success: var(--al-green);
  --bs-light: var(--al-light);
  --bs-dark: var(--al-dark);
  --bs-body-bg: var(--al-surface);
  --bs-body-color: var(--al-text);
  --bs-body-font-size: var(--al-font-size);
  --bs-body-line-height: var(--al-line-height);
  --bs-border-color: var(--al-border-color);
  --bs-small-font-size: var(--al-font-size-xs);
  --bs-border-radius: var(--al-radius);
  --bs-border-radius-lg: var(--al-radius-lg);
  --bs-tertiary-color: var(--al-accent);
  --bs-tertiary-bg: var(--al-accent);
  --bs-body-tertiary-color: var(--al-accent);
  --bs-body-tertiary-bg: var(--al-accent);
}

/* Button palette overrides */
.btn-primary {
  --bs-btn-bg: var(--al-primary);
  --bs-btn-border-color: var(--al-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--al-primary) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--al-primary) 85%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--al-primary) 75%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--al-primary) 75%, #000);
}

.btn-secondary {
  --bs-btn-bg: var(--al-secondary);
  --bs-btn-border-color: var(--al-secondary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--al-secondary) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--al-secondary) 85%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--al-secondary) 75%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--al-secondary) 75%, #000);
}

.btn-outline-primary {
  --bs-btn-color: var(--al-primary);
  --bs-btn-border-color: var(--al-primary);
  --bs-btn-hover-bg: var(--al-primary);
  --bs-btn-hover-border-color: var(--al-primary);
  --bs-btn-active-bg: color-mix(in srgb, var(--al-primary) 85%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--al-primary) 85%, #000);
}

.btn-outline-secondary {
  --bs-btn-color: var(--al-secondary);
  --bs-btn-border-color: var(--al-secondary);
  --bs-btn-hover-bg: var(--al-secondary);
  --bs-btn-hover-border-color: var(--al-secondary);
  --bs-btn-active-bg: color-mix(in srgb, var(--al-secondary) 85%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--al-secondary) 85%, #000);
}

.btn-danger {
  --bs-btn-bg: var(--al-red);
  --bs-btn-border-color: var(--al-red);
  --bs-btn-hover-bg: color-mix(in srgb, var(--al-red) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--al-red) 85%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--al-red) 75%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--al-red) 75%, #000);
}

.btn-success {
  --bs-btn-bg: var(--al-green);
  --bs-btn-border-color: var(--al-green);
  --bs-btn-hover-bg: color-mix(in srgb, var(--al-green) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--al-green) 85%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--al-green) 75%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--al-green) 75%, #000);
}

.btn-info {
  --bs-btn-bg: var(--al-accent);
  --bs-btn-border-color: var(--al-accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--al-accent) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--al-accent) 85%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--al-accent) 75%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--al-accent) 75%, #000);
}

.btn-outline-danger {
  --bs-btn-color: var(--al-red);
  --bs-btn-border-color: var(--al-red);
  --bs-btn-hover-bg: var(--al-red);
  --bs-btn-hover-border-color: var(--al-red);
  --bs-btn-active-bg: color-mix(in srgb, var(--al-red) 85%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--al-red) 85%, #000);
}

.btn-outline-success {
  --bs-btn-color: var(--al-green);
  --bs-btn-border-color: var(--al-green);
  --bs-btn-hover-bg: var(--al-green);
  --bs-btn-hover-border-color: var(--al-green);
  --bs-btn-active-bg: color-mix(in srgb, var(--al-green) 85%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--al-green) 85%, #000);
}

.btn-outline-info {
  --bs-btn-color: var(--al-accent);
  --bs-btn-border-color: var(--al-accent);
  --bs-btn-hover-bg: var(--al-accent);
  --bs-btn-hover-border-color: var(--al-accent);
  --bs-btn-active-bg: color-mix(in srgb, var(--al-accent) 85%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--al-accent) 85%, #000);
}

:root,
[data-bs-theme="light"] {
  --bs-link-color: var(--al-primary);
  --bs-link-hover-color: color-mix(in srgb, var(--al-primary) 80%, #000);
}


.btn-link {
  --bs-btn-color: var(--al-primary);
  --bs-btn-hover-color: color-mix(in srgb, var(--al-primary) 80%, #000);
}