/* Reset & Box Sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Color Scheme & Design Tokens */
:root {
  /* MANDATORY: declare base color-scheme */
  color-scheme: light dark;

  /* Reflect meta override in author CSS */
  &:has(> head > meta[name="color-scheme"][content="dark"]) {
    color-scheme: dark;
  }
  &:has(> head > meta[name="color-scheme"][content="light"]) {
    color-scheme: light;
  }

  /* Color tokens using modern light-dark() */
  --bg-color: light-dark(oklch(98.5% 0.005 260), oklch(14% 0.015 260));
  --text-color: light-dark(oklch(16% 0.015 260), oklch(96% 0.005 260));
  
  --toggle-bg: light-dark(oklch(92% 0.01 260 / 60%), oklch(24% 0.015 260 / 60%));
  --toggle-bg-hover: light-dark(oklch(88% 0.015 260 / 80%), oklch(30% 0.02 260 / 80%));
  --toggle-border: light-dark(oklch(80% 0.015 260 / 70%), oklch(32% 0.02 260 / 70%));
  --toggle-color: light-dark(oklch(20% 0.02 260), oklch(92% 0.01 260));
  --focus-ring: light-dark(oklch(50% 0.2 260), oklch(75% 0.15 260));
}

html,
body {
  min-height: 100dvh;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif;
  transition: background-color 0.25s ease, color 0.25s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Header & Toggle Position */
.header {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 10;
}

/* Theme Toggle Button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--toggle-border);
  background-color: var(--toggle-bg);
  color: var(--toggle-color);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, color 0.2s ease;
}

.theme-toggle:hover {
  background-color: var(--toggle-bg-hover);
  transform: scale(1.06);
}

.theme-toggle:active {
  transform: scale(0.96);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Theme Toggle Icon Display Branching */
/* Default (System light): Show moon to switch to dark */
.theme-toggle .icon-moon {
  display: block;
}
.theme-toggle .icon-sun {
  display: none;
}

/* System dark */
@media (prefers-color-scheme: dark) {
  .theme-toggle .icon-moon {
    display: none;
  }
  .theme-toggle .icon-sun {
    display: block;
  }
}

/* Override: Explicitly forced dark */
:root:has(> head > meta[name="color-scheme"][content="dark"]) .theme-toggle .icon-moon {
  display: none;
}
:root:has(> head > meta[name="color-scheme"][content="dark"]) .theme-toggle .icon-sun {
  display: block;
}

/* Override: Explicitly forced light */
:root:has(> head > meta[name="color-scheme"][content="light"]) .theme-toggle .icon-moon {
  display: block;
}
:root:has(> head > meta[name="color-scheme"][content="light"]) .theme-toggle .icon-sun {
  display: none;
}

/* Centered Main Content */
.container {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1.5rem;
}

/* Hero Typography */
.hero-text {
  font-size: clamp(2.5rem, 6vw + 0.5rem, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.12;
  text-align: center;
  text-wrap: balance;
  max-width: 18ch;
  user-select: none;
}