/* ========= base.css ========= */
/* Minimal reset + design tokens + global elements */

:root {
  /* colors */
  --bg: #0b1020;
  --panel: #101625;
  --ink: #ffffff;
  --ink-dim: #d3e2ea;
  --brand-cyan: #35E2FF;
  --link: #b087ff;
  --link-hover: #d0b3ff;

  /* gradients (buttons) */
  --grad-teacher: linear-gradient(135deg, #8a2be2 0%, #3a86ff 100%);
  --grad-journey: linear-gradient(135deg, #34d399 0%, #2563eb 100%);

  /* sizing */
  --maxw: 1200px;
  --r-xl: 999px;
  --r-lg: 24px;

  /* effects */
  --shadow-soft: 0 10px 30px rgba(0,0,0,.35);
}

/* --- modern reset --- */
*, *::before, *::after { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* --- headings --- */
h1, h2, h3, h4 {
  font-family: Rajdhani, system-ui, sans-serif;
  margin: 0 0 .5rem;
}
h1 {
  text-transform: uppercase;
  color: var(--brand-cyan);
}

/* --- layout helpers --- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}
section {
  padding: clamp(48px, 7vw, 96px) 0;
}

/* --- ensure nav overlay sits above content --- */
.nav-panel {
  z-index: 1000;
}

/* --- universal cursor behavior --- */
button,
.nav-toggle,
.btn,
.btn-sunset {
  cursor: pointer !important;
}
button[disabled],
.btn[disabled],
.btn-sunset[disabled] {
  cursor: not-allowed !important;
}


.nav-toggle, button, .btn, .btn-sunset { cursor: pointer; }
button:disabled, .btn:disabled, .btn-sunset:disabled { cursor: not-allowed; }