/* ============================================================
   base.css — palette (night/dawn), typography, reset, buttons
   ============================================================ */

:root {
  /* type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --maxw: 1100px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- CELESTIAL (default: Midnight Sky) ---- */
[data-realm="celestial"] {
  --grad-1:#0a1733; --grad-2:#102a4d; --grad-3:#123f4f; --grad-4:#16524a;
  --ink:#eaf3ff; --ink-soft:#b9cee0; --ink-faint:#7f97ad;
  --accent:#7fd1c4; --accent-2:#aef0d8; --moon:#fdf6d8;
  --card-bg:rgba(18,38,64,0.45); --card-bg-2:rgba(20,46,60,0.65);
  --card-bd:rgba(127,209,196,0.22); --hairline:rgba(174,240,216,0.16);
  --nav-bg:rgba(8,18,38,0.55); --star:#ffffff;
}

/* ---- OCEAN (lighter, brighter aqua: bubbles + sea life) ---- */
[data-realm="ocean"] {
  --grad-1:#0d4663; --grad-2:#16728c; --grad-3:#2299a0; --grad-4:#46bca4;
  --ink:#f1fefd; --ink-soft:#c2ece9; --ink-faint:#86bdbd;
  --accent:#67e8de; --accent-2:#c2f7ef; --moon:#fff0c4;
  --card-bg:rgba(16,74,92,0.4); --card-bg-2:rgba(22,92,104,0.62);
  --card-bd:rgba(103,232,222,0.26); --hairline:rgba(194,247,239,0.18);
  --nav-bg:rgba(10,52,70,0.5); --star:#d6fffa;
}

/* ---- GREENERY (lighter, softer green fairy woods) ---- */
[data-realm="greenery"] {
  --grad-1:#34562f; --grad-2:#486b39; --grad-3:#5e8141; --grad-4:#7c9e49;
  --ink:#f5faea; --ink-soft:#d9e8c4; --ink-faint:#a3b88a;
  --accent:#c2e478; --accent-2:#ffe49a;       /* accent-2 = warm firefly gold */
  --moon:#f6e29a;
  --card-bg:rgba(40,64,30,0.4); --card-bg-2:rgba(50,76,38,0.62);
  --card-bd:rgba(194,228,120,0.28); --hairline:rgba(220,236,190,0.18);
  --nav-bg:rgba(28,46,22,0.5); --star:#e8f2d6;
}

/* ---- MOUNTAIN (soft golden-hour yellow: clouds, bees, wildflowers) ---- */
[data-realm="mountain"] {
  --grad-1:#fdf3d2; --grad-2:#fbe3a0; --grad-3:#f6cf92; --grad-4:#eeb9a0;
  --ink:#43321c; --ink-soft:#66492c; --ink-faint:#94714c;
  --accent:#dca25a; --accent-2:#ffe7a8; --moon:#fff5d6;
  --card-bg:rgba(255,247,228,0.52); --card-bg-2:rgba(255,247,228,0.76);
  --card-bd:rgba(220,162,90,0.32); --hairline:rgba(160,120,70,0.2);
  --nav-bg:rgba(255,247,228,0.52); --star:#ffe6ad;
}

/* ---- CASTLE (bright daytime sky: fluffy clouds, a castle beyond) ---- */
[data-realm="castle"] {
  --grad-1:#bfe6f7; --grad-2:#d4eefb; --grad-3:#e7f5fc; --grad-4:#f6fbfd;
  --ink:#2a3f52; --ink-soft:#476277; --ink-faint:#7e98ac;
  --accent:#4f9fce; --accent-2:#bfe6f7; --moon:#fff3c4;
  --card-bg:rgba(255,255,255,0.5); --card-bg-2:rgba(255,255,255,0.76);
  --card-bd:rgba(79,159,206,0.3); --hairline:rgba(90,140,180,0.18);
  --nav-bg:rgba(255,255,255,0.5); --star:#cfe8f5;
}

/* ---- accessibility: stronger contrast for muted text in every world ---- */
[data-realm] {
  --ink-soft:  color-mix(in srgb, var(--ink) 84%, var(--grad-1));
  --ink-faint: color-mix(in srgb, var(--ink) 64%, var(--grad-1));
}

/* ---- reset ---- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--grad-1);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:color .6s var(--ease);
}

h1,h2,h3 { font-family:var(--font-display); font-weight:600; line-height:1.1; letter-spacing:-.01em; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

/* ---- shared type helpers ---- */
.eyebrow, .label {
  font-family:var(--font-body);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
}
.label { margin-bottom:.9rem; }

.section__title { font-size:clamp(1.9rem, 4vw, 2.9rem); color:var(--ink); }
.section__lead { color:var(--ink-soft); max-width:56ch; margin-top:1rem; font-size:1.05rem; }

/* ---- buttons ---- */
.btn {
  display:inline-block;
  font-family:var(--font-body);
  font-size:.92rem;
  font-weight:500;
  letter-spacing:.02em;
  padding:.78rem 1.5rem;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn--primary {
  background:linear-gradient(120deg, var(--accent), var(--accent-2));
  color:#06231f;
}
.btn--primary:hover { transform:translateY(-2px); }
.btn--ghost {
  border-color:var(--card-bd);
  color:var(--ink);
  background:var(--card-bg);
}
.btn--ghost:hover { transform:translateY(-2px); border-color:var(--accent); }

@media (prefers-reduced-motion: reduce){
  .btn:hover{ transform:none; }
}