:root {
  --color-surface: #121414;
  --color-surface-dim: #121414;
  --color-surface-bright: #37393a;
  --color-surface-container-lowest: #0c0f0f;
  --color-surface-container-low: #1a1c1c;
  --color-surface-container: #1e2020;
  --color-surface-container-high: #282a2b;
  --color-surface-container-highest: #333535;
  --color-surface-variant: #333535;
  --color-on-surface: #e2e2e2;
  --color-on-surface-variant: #c5c6d0;
  --color-inverse-surface: #e2e2e2;
  --color-inverse-on-surface: #2f3131;
  --color-outline: #8e9099;
  --color-outline-variant: #44474f;
  --color-surface-tint: #b1c6f9;
  --color-background: #000c32;
  --color-on-background: #e2e2e2;
  --color-primary: #b1c6f9;
  --color-on-primary: #192f59;
  --color-primary-container: #003678;
  --color-on-primary-container: #7084b3;
  --color-inverse-primary: #495e8a;
  --color-primary-fixed: #d8e2ff;
  --color-primary-fixed-dim: #b1c6f9;
  --color-on-primary-fixed: #001a42;
  --color-on-primary-fixed-variant: #314671;
  --color-secondary: #4ee248;
  --color-on-secondary: #003a03;
  --color-secondary-container: #00b419;
  --color-on-secondary-container: #003d03;
  --color-secondary-fixed: #75ff68;
  --color-secondary-fixed-dim: #4ee248;
  --color-on-secondary-fixed: #002201;
  --color-on-secondary-fixed-variant: #005306;
  --color-tertiary: #ffb77d;
  --color-on-tertiary: #4d2600;
  --color-tertiary-container: #301600;
  --color-on-tertiary-container: #c96d00;
  --color-tertiary-fixed: #ffdcc3;
  --color-tertiary-fixed-dim: #ffb77d;
  --color-on-tertiary-fixed: #2f1500;
  --color-on-tertiary-fixed-variant: #6e3900;
  --color-error: #ffb4ab;
  --color-on-error: #690005;
  --color-error-container: #93000a;
  --color-on-error-container: #ffdad6;
  --color-accent-green: #33cc33;
  --color-accent-green-light: #4ee248;
  --color-accent-green-hover: #75ff68;
  --color-accent-orange: #ff8c00;
  --color-accent-orange-light: #ffb77d;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-label: 'JetBrains Mono', monospace;
  --navbar-bg: rgba(18, 20, 20, 0.7);
}

/* Light theme token overrides */
:root[data-theme="light"] {
  --color-surface: #ffffff;
  --color-surface-dim: #d8dadc;
  --color-surface-bright: #f7f9fb;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f2f4f6;
  --color-surface-container: #eceef0;
  --color-surface-container-high: #e6e8ea;
  --color-surface-container-highest: #e0e3e5;
  --color-surface-variant: #e0e3e5;
  --color-on-surface: #0f172a;
  --color-on-surface-variant: #475569;
  --color-inverse-surface: #2d3133;
  --color-inverse-on-surface: #eff1f3;
  --color-outline: #757780;
  --color-outline-variant: #c5c6d0;
  --color-surface-tint: #495e8b;
  --color-background: #f7f9fb;
  --color-on-background: #191c1e;
  --color-primary: #495e8b;
  --color-on-primary: #ffffff;
  --color-primary-container: #b1c6f9;
  --color-on-primary-container: #3d527e;
  --color-inverse-primary: #b1c6f9;
  --color-secondary: #006e0b;
  --color-on-secondary: #0f172a;
  --color-secondary-container: #6afd5f;
  --color-on-secondary-container: #00730c;
  --color-tertiary: #78591a;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #e9c077;
  --color-on-tertiary-container: #6a4d0e;
  --color-tertiary-fixed: #ffdea7;
  --color-tertiary-fixed-dim: #eac177;
  --color-on-tertiary-fixed: #271900;
  --color-on-tertiary-fixed-variant: #5e4202;
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-accent-green: #4ee248;
  --color-text-bright: #000c32;
  --color-border-subtle: rgba(15, 23, 42, 0.12);
  --color-border-hover: rgba(15, 23, 42, 0.25);
  --color-overlay-light: rgba(15, 23, 42, 0.04);
  --color-border-divider: rgba(15, 23, 42, 0.08);
  --color-divider-accent: rgba(0, 110, 11, 0.35);
  --navbar-bg: rgba(255, 255, 255, 0.85);
}

:root[data-theme="light"] .atmospheric-glow {
  opacity: 0.08;
}

:root:not([data-theme="light"]) .atmospheric-glow {
  opacity: 0;
}

.btn-primary {
  box-shadow: 0 0 15px rgba(51, 204, 51, 0.4);
}

.btn-primary:hover {
  background-color: var(--color-accent-green-hover);
  box-shadow: 0 0 30px rgba(51, 204, 51, 0.5);
}

:root[data-theme="light"] .btn-primary {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

:root[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
}

@keyframes slowRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.hero-graphic img {
  filter: drop-shadow(0 0 40px rgba(78, 226, 72, 0.3));
}

:root[data-theme="light"] .hero-graphic img {
  filter: drop-shadow(0 4px 16px rgba(15, 23, 42, 0.15));
}

.hero-title {
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] .hero-title {
  text-shadow: none;
}

.hero-title .accent {
  color: var(--color-secondary);
  text-shadow: 0 0 30px rgba(51, 204, 51, 0.4);
}

:root[data-theme="light"] .hero-title .accent {
  text-shadow: none;
}

:root[data-theme="light"] .about-body a,
:root[data-theme="light"] .program-link {
  color: var(--color-text-bright);
}

.btn-outline .icon-svg {
  color: var(--color-accent-orange);
}

.section-centered h2 {
  font-family: var(--font-display);
  color: var(--color-text-bright);
  margin-bottom: 24px;
}

.section-centered p {
  color: var(--color-on-surface-variant);
  opacity: 0.8;
}

.petal-container {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto;
  animation: slowRotate 30s linear infinite;
}

.petal {
  position: absolute;
  width: 80px;
  height: 160px;
  left: 100px;
  top: 60px;
  transform-origin: 50% 100%;
  border-radius: 50% 50% 0 0;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: rgba(0, 27, 68, 0.6);
  backdrop-filter: blur(4px);
}

.petal-accent {
  position: absolute;
  width: 70px;
  height: 150px;
  left: 105px;
  top: 65px;
  transform-origin: 50% 100%;
  border-radius: 50% 50% 0 0;
  opacity: 0.8;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.p-1 { transform: rotate(0deg) translateY(-40px); background: #33cc33; }
.p-2 { transform: rotate(45deg) translateY(-40px); background: #4ee248; }
.p-3 { transform: rotate(90deg) translateY(-40px); background: #ff8c00; }
.p-4 { transform: rotate(135deg) translateY(-40px); background: #ffb77d; }
.p-5 { transform: rotate(180deg) translateY(-40px); background: #d8e2ff; }
.p-6 { transform: rotate(225deg) translateY(-40px); background: #c5c6d0; }
.p-7 { transform: rotate(270deg) translateY(-40px); background: #ffb4ab; }
.p-8 { transform: rotate(315deg) translateY(-40px); background: #314671; }

.center-doc {
  position: absolute;
  width: 100px;
  height: 130px;
  background: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 6px solid #121414;
  border-radius: 4px;
  clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
  z-index: 10;
}

.center-doc::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 35px 35px 0;
  border-color: transparent #121414 transparent transparent;
}