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

:root {
  /* Light mode (default) */
  --primary-color: oklch(0.623 0.188 255.1); /* #3b82f6 */
  --complementary-color: oklch(0.769 0.156 70.7); /* #f59e0b */
  --contrast-color: oklch(1 0 0); /* white */
  --background-color: oklch(0.935 0.01 95); /* #ebe5e5 */
  --light-text-color: oklch(0.96 0.01 105); /* #f2f3eb */
  --dark-text-color: oklch(0.28 0.025 260); /* #1f2937 */
  --heading-color: oklch(100% 0.03 93 / 100%);
  --hero-overlay: oklch(0% 0 0 / 30%);
  --text-shadow: 0 4px 14px oklch(0 0 0 / 0.8);
}
/* Dark mode */
[data-theme='dark'],
.dark {
  --primary-color: oklch(0.72 0.145 250); /* #60a5fa */
  --complementary-color: oklch(0.835 0.14 80); /* #fbbf24 */
  --contrast-color: oklch(0.21 0.03 260); /* #0f172a */
  --background-color: oklch(0.21 0.03 260); /* #0f172a */
  --dark-text-color: oklch(0.96 0.01 100); /* #f1f5f9 */
  --heading-color: oklch(70% 0.03 93 / 100%);
  --hero-overlay: oklch(0% 0 0 / 50%);
  --text-shadow: 0 4px 14px oklch(0 0 0 / 0.85);
}

@font-face {
  font-family: 'Cookie';
  src: url('../fonts/Cookie-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  background: var(--background-color);
  color: var(--dark-text-color);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* ────────────────────────────────────────
   Theme Toggle Button - HIGH VISIBILITY
──────────────────────────────────────── */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;

  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;

  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  font-size: 1.5rem;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: all 0.25s ease;
}

.theme-toggle:hover {
  background: rgba(0, 0, 0, 0.75);
  transform: scale(1.1);
  border-color: rgba(255, 255, 255, 0.7);
}

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

/* Dark mode version of the button */
[data-theme='dark'] .theme-toggle {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
  color: #994e4e;
}

[data-theme='dark'] .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ────────────────────────────────────────
   Hero Section
──────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #111;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#video-landscape {
  display: block;
}

#video-portrait {
  display: none;
}

@media (max-width: 768px) {
  #video-landscape {
    display: none;
  }
  #video-portrait {
    display: block;
  }
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--hero-overlay);
  padding: 20px;
  z-index: 2;
  transition: background 0.3s ease;
}

h1 {
  font-family: 'Cookie', cursive;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(4rem, 8vw, 6.5rem);
  margin-bottom: 1rem;
  color: var(--heading-color);
  text-shadow: var(--text-shadow);
  transition:
    color 0.3s ease,
    text-shadow 0.3s ease;
}

p {
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  max-width: 680px;
  color: var(--light-text-color);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

@media (max-width: 480px) {
  .hero-content {
    padding: 16px;
  }
}