@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Outfit:wght@400;500;600&display=swap");

/* =========================================================
   Theme graphics — same layout, different visual language
   mist | dusk | orchard | magic
   ========================================================= */

.hero-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 1;
}
.hero-spark { display: none; position: absolute; pointer-events: none; }

/* ——— Shared hero base overridden per theme ——— */
.hero-visual {
  background: var(--hero-base, linear-gradient(135deg, var(--hero-a), var(--hero-c)));
}
.hero-visual::after { content: none; } /* art lives in .hero-art now */

/* =========================================================
   MIST — soft fog + watercolor book spines
   ========================================================= */
[data-theme="mist"] {
  --btn-radius: 999px;
  --panel-radius: 1.35rem;
  --hero-base: linear-gradient(165deg, #b9d0c8 0%, #7fa896 42%, #5e8fa3 100%);
}

[data-theme="mist"] .hero {
  border-radius: 0;
}

[data-theme="mist"] .hero-art {
  background:
    linear-gradient(180deg, rgba(30, 50, 45, 0.25) 0%, rgba(20, 40, 35, 0.62) 100%),
    url("../img/themes/mist.jpg") center/cover no-repeat;
}

[data-theme="mist"] .hero-orb {
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.65), transparent 70%);
  filter: blur(8px);
}
[data-theme="mist"] .btn { border-radius: var(--btn-radius); }
[data-theme="mist"] .book,
[data-theme="mist"] .compass-panel,
[data-theme="mist"] .feature,
[data-theme="mist"] .sample-card,
[data-theme="mist"] .tip-box,
[data-theme="mist"] .about-panel,
[data-theme="mist"] .modal-panel {
  border-radius: var(--panel-radius);
  backdrop-filter: blur(12px);
}
[data-theme="mist"] .book-spine,
[data-theme="mist"] body::before {
  /* soft paper grain overlay */
}
[data-theme="mist"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
[data-theme="mist"] .shell,
[data-theme="mist"] .hero,
[data-theme="mist"] footer,
[data-theme="mist"] .modal { position: relative; z-index: 1; }
[data-theme="mist"] .hero { z-index: 0; }

/* =========================================================
   DUSK — night window, hard geometry, lamp pool
   ========================================================= */
[data-theme="dusk"] {
  --btn-radius: 0.35rem;
  --panel-radius: 0.4rem;
  --hero-base: #0b1218;
  --font-display: "Literata", Georgia, serif;
  --font-body: "Figtree", system-ui, sans-serif;
}

[data-theme="dusk"] .hero {
  border-radius: 0;
  min-height: min(70dvh, 560px);
}

[data-theme="dusk"] .hero-art {
  background:
    linear-gradient(180deg, rgba(8,14,20,0.35) 0%, rgba(8,14,20,0.72) 100%),
    url("../img/themes/dusk.jpg") center/cover no-repeat;
}

[data-theme="dusk"] .hero-orb { display: none; }

[data-theme="dusk"] .btn,
[data-theme="dusk"] .chip,
[data-theme="dusk"] .seg,
[data-theme="dusk"] .seg button {
  border-radius: var(--btn-radius);
}
[data-theme="dusk"] .book,
[data-theme="dusk"] .compass-panel,
[data-theme="dusk"] .feature,
[data-theme="dusk"] .sample-card,
[data-theme="dusk"] .tip-box,
[data-theme="dusk"] .about-panel,
[data-theme="dusk"] .modal-panel,
[data-theme="dusk"] .token,
[data-theme="dusk"] .slot {
  border-radius: var(--panel-radius);
  border-width: 1px;
  box-shadow: none;
  border-color: rgba(126, 182, 201, 0.22);
}
[data-theme="dusk"] .book {
  background: linear-gradient(180deg, rgba(30, 42, 54, 0.95), rgba(18, 28, 38, 0.95));
}
[data-theme="dusk"] .cover {
  border-radius: 0.2rem;
  box-shadow: 4px 4px 0 rgba(126, 182, 201, 0.25);
}
[data-theme="dusk"] .progress > span {
  background: linear-gradient(90deg, #7eb6c9, #c4b49a);
}
[data-theme="dusk"] .hero-brand {
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 650;
}
[data-theme="dusk"] body {
  background-image:
    linear-gradient(rgba(126,182,201,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,182,201,0.04) 1px, transparent 1px),
    var(--page-bg);
  background-size: 48px 48px, 48px 48px, auto;
}

/* =========================================================
   ORCHARD — botanical line art, leaf stamps, soft earth
   ========================================================= */
[data-theme="orchard"] {
  --btn-radius: 1.1rem;
  --panel-radius: 1.5rem 0.4rem 1.5rem 0.4rem;
  --hero-base: #d7e2d4;
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Karla", system-ui, sans-serif;
}

[data-theme="orchard"] .hero {
  border-radius: 0 0 50% 50% / 0 0 6.5rem 6.5rem;
}

[data-theme="orchard"] .hero-art {
  background:
    linear-gradient(180deg, rgba(36,48,40,0.2) 0%, rgba(36,48,40,0.58) 100%),
    url("../img/themes/orchard-path.jpg") center/cover no-repeat;
}

[data-theme="orchard"] .hero-orb {
  background: radial-gradient(circle, rgba(183,196,168,0.55), transparent 70%);
  border-radius: 40% 60% 55% 45%;
  filter: blur(2px);
}

[data-theme="orchard"] .btn { border-radius: 1.15rem 0.35rem; }
[data-theme="orchard"] .chip { border-radius: 0.85rem 0.25rem; }
[data-theme="orchard"] .seg { border-radius: 1rem 0.3rem; }
[data-theme="orchard"] .seg button { border-radius: 0.85rem 0.25rem; }
[data-theme="orchard"] .book,
[data-theme="orchard"] .compass-panel,
[data-theme="orchard"] .feature,
[data-theme="orchard"] .sample-card,
[data-theme="orchard"] .tip-box,
[data-theme="orchard"] .about-panel,
[data-theme="orchard"] .modal-panel {
  border-radius: 1.4rem 0.45rem 1.4rem 0.45rem;
  border: 1px solid rgba(79, 125, 98, 0.22);
  box-shadow: 0 12px 0 rgba(79, 125, 98, 0.06);
}
[data-theme="orchard"] .feature img,
[data-theme="orchard"] .cover {
  border-radius: 1.1rem 0.35rem;
}
[data-theme="orchard"] body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%234f7d62' stroke-width='1.2' opacity='0.07'%3E%3Cpath d='M30 40c20-28 48-28 58 0-18 6-38 6-58 0z'/%3E%3Cpath d='M110 120c18-24 44-22 52 6-16 4-34 4-52-6z'/%3E%3C/g%3E%3C/svg%3E"),
    var(--page-bg);
}

/* =========================================================
   MAGIC — aurora photo + soft gold accents
   ========================================================= */
[data-theme="magic"] {
  --ink: #e8f4ef;
  --ink-soft: #9dc0b4;
  --foam: #0c1620;
  --panel: rgba(14, 28, 36, 0.82);
  --accent: #6fd3b0;
  --accent-deep: #3fa88a;
  --secondary: #e2c37a;
  --sand: #8fd0e0;
  --hero-a: #0a1520;
  --hero-b: #123248;
  --hero-c: #1a4a45;
  --glow: rgba(111, 211, 176, 0.35);
  --page-bg:
    radial-gradient(900px 500px at 20% -10%, rgba(111, 211, 176, 0.14), transparent 55%),
    radial-gradient(700px 420px at 90% 5%, rgba(226, 195, 122, 0.1), transparent 50%),
    radial-gradient(600px 400px at 50% 80%, rgba(143, 208, 224, 0.08), transparent 55%),
    linear-gradient(180deg, #070e16 0%, #0c1620 50%, #102028 100%);
  --font-display: "Cinzel", Georgia, serif;
  --font-body: "Outfit", system-ui, sans-serif;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --hero-ink: #eefaf4;
  --chip-on: #1f5c4d;
  --btn-radius: 999px;
  --panel-radius: 1.25rem;
  --hero-base: #071018;
}

[data-theme="magic"] .hero {
  border-radius: 0;
}

[data-theme="magic"] .hero-art {
  background:
    linear-gradient(180deg, rgba(7,16,24,0.25) 0%, rgba(7,16,24,0.7) 100%),
    url("../img/themes/magic.jpg") center/cover no-repeat;
}

@keyframes auroraShift {
  from { filter: hue-rotate(0deg) saturate(1); }
  to { filter: hue-rotate(12deg) saturate(1.15); }
}

[data-theme="magic"] .hero-orb {
  background: radial-gradient(circle, rgba(111,211,176,0.35), transparent 70%);
  mix-blend-mode: screen;
}
[data-theme="magic"] .hero-orb.a { animation-duration: 9s; }
[data-theme="magic"] .hero-orb.b {
  background: radial-gradient(circle, rgba(226,195,122,0.3), transparent 70%);
  animation-duration: 13s;
}

[data-theme="magic"] .hero-spark {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e2c37a;
  box-shadow: 0 0 12px #e2c37a, 0 0 24px rgba(111, 211, 176, 0.6);
  animation: sparkle 3.5s ease-in-out infinite;
}
[data-theme="magic"] .hero-spark.s1 { top: 18%; left: 22%; animation-delay: 0s; }
[data-theme="magic"] .hero-spark.s2 { top: 32%; right: 28%; width: 4px; height: 4px; animation-delay: 1.1s; }
[data-theme="magic"] .hero-spark.s3 { top: 48%; left: 48%; width: 5px; height: 5px; animation-delay: 2s; }

@keyframes sparkle {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.25); }
}

[data-theme="magic"] .btn-primary {
  background: linear-gradient(135deg, #e2c37a, #f0dfb0);
  color: #123028;
  border: 0;
}
[data-theme="magic"] .btn-soft {
  background: linear-gradient(135deg, #3fa88a, #6fd3b0);
  box-shadow: 0 0 24px rgba(111, 211, 176, 0.25);
}
[data-theme="magic"] .btn-ghost {
  border-color: rgba(226, 195, 122, 0.45);
  color: #eefaf4;
}
[data-theme="magic"] .book,
[data-theme="magic"] .compass-panel,
[data-theme="magic"] .feature,
[data-theme="magic"] .sample-card,
[data-theme="magic"] .tip-box,
[data-theme="magic"] .about-panel,
[data-theme="magic"] .modal-panel {
  border: 1px solid rgba(111, 211, 176, 0.22);
  box-shadow: 0 0 0 1px rgba(226, 195, 122, 0.06), 0 18px 50px rgba(0,0,0,0.35);
  background:
    linear-gradient(160deg, rgba(111,211,176,0.06), transparent 40%),
    var(--panel);
}
[data-theme="magic"] .chip[aria-pressed="true"],
[data-theme="magic"] .seg button[aria-pressed="true"] {
  background: linear-gradient(135deg, #1f5c4d, #3fa88a);
  box-shadow: 0 0 16px rgba(111, 211, 176, 0.3);
}
[data-theme="magic"] .hero-brand {
  text-shadow: 0 0 28px rgba(111, 211, 176, 0.35), 0 0 48px rgba(226, 195, 122, 0.15);
}
[data-theme="magic"] .progress > span {
  background: linear-gradient(90deg, #6fd3b0, #e2c37a);
  box-shadow: 0 0 12px rgba(111, 211, 176, 0.45);
}
[data-theme="magic"] .stars-bar { color: #e2c37a; }
[data-theme="magic"] a { color: #6fd3b0; }
[data-theme="magic"] .btn-outline {
  color: #6fd3b0;
  border-color: rgba(111, 211, 176, 0.4);
}

/* Keep content above grain overlays */
body > * { position: relative; z-index: 1; }