/* ============================================================
   CoursePlanner.ai — "Athena Aether" cosmic dark theme
   Layered over styles.css. Dark is the default (html[data-theme=dark]);
   light theme is the original :root in styles.css (html[data-theme=light]).
   Token remaps recolor most of the site; panel-specific fixes follow.
   ============================================================ */

/* ---------- dark token remap ---------- */
[data-theme="dark"] {
  --paper:   #080b14;
  --paper-2: #0a0e1b;
  --card:    #0e1426;
  --ink:     #e9edf8;
  --ink-soft:#aeb8cc;
  --ink-mute:#717c93;

  /* brand green becomes the cosmic accent (text, links, em, CTAs) */
  --ivy:    #8b7bff;
  --ivy-2:  #a79bff;
  --ivy-ink:#05070f;
  --amber:  #e6a24c;
  --amber-2:#f0b86a;
  --highlight: #2b2456;

  --line:   rgba(255,255,255,.09);
  --line-2: rgba(255,255,255,.17);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
  --shadow-md: 0 10px 30px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 64px rgba(0,0,0,.62);

  /* cosmic extras */
  --cyan:   #38e0ff;
  --violet: #8b7bff;
  --grad-accent: linear-gradient(120deg, #8b7bff 0%, #38e0ff 100%);
  --glow: 0 0 0 1px rgba(139,123,255,.28), 0 12px 36px rgba(56,224,255,.20);
  color-scheme: dark;
}

/* ---------- atmosphere ---------- */
[data-theme="dark"] body {
  background:
    radial-gradient(72% 55% at 82% -8%, rgba(123,108,246,.20), transparent 60%),
    radial-gradient(60% 50% at -5% 10%, rgba(56,224,255,.12), transparent 55%),
    radial-gradient(55% 65% at 50% 118%, rgba(123,108,246,.14), transparent 60%),
    var(--paper);
  background-attachment: fixed;
}
/* faint star dust */
[data-theme="dark"] body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.4px 1.4px at 47% 18%, rgba(180,200,255,.5), transparent),
    radial-gradient(1px 1px at 63% 78%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.2px 1.2px at 78% 34%, rgba(200,180,255,.5), transparent),
    radial-gradient(1px 1px at 88% 60%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 38% 88%, rgba(255,255,255,.3), transparent),
    radial-gradient(1.3px 1.3px at 92% 12%, rgba(255,255,255,.45), transparent);
}
[data-theme="dark"] .grain::before { mix-blend-mode: screen; opacity: .05; }

/* ---------- header / nav ---------- */
[data-theme="dark"] .site-header { background: color-mix(in srgb, var(--paper) 72%, transparent); }
[data-theme="dark"] .site-header[data-scrolled] { background: color-mix(in srgb, var(--paper) 88%, transparent); border-bottom-color: var(--line); }
[data-theme="dark"] .brand-mark { box-shadow: 0 0 0 1px rgba(139,123,255,.25), 0 8px 24px rgba(56,224,255,.18); }
[data-theme="dark"] .nav-burger span { background: var(--ink); }

/* ---------- buttons ---------- */
[data-theme="dark"] .btn-primary { background: var(--grad-accent); color: var(--ivy-ink); box-shadow: var(--glow); }
[data-theme="dark"] .btn-primary:hover { filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(139,123,255,.5), 0 16px 44px rgba(56,224,255,.32); }
[data-theme="dark"] .btn-ghost { color: var(--ink); border-color: var(--line-2); }
[data-theme="dark"] .btn-ghost:hover { color: #fff; border-color: var(--violet); background: rgba(139,123,255,.08); }

/* ---------- theme toggle ---------- */
.theme-toggle {
  display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 11px; border: 1.5px solid var(--line-2); background: transparent;
  color: var(--ink-soft); transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ivy); background: color-mix(in srgb, var(--ivy) 10%, transparent); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .ic-sun { display: none; }
.theme-toggle .ic-moon { display: block; }
[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

/* ---------- hero: value pills ---------- */
.hero-pills {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--line);
}
.pill {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--card);
  box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.pill:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-md); }
.pill-ic {
  flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ivy) 15%, transparent); color: var(--ivy);
}
[data-theme="dark"] .pill-ic { background: rgba(139,123,255,.14); color: #c7bcff; box-shadow: inset 0 0 18px rgba(56,224,255,.12); }
.pill-ic svg { width: 19px; height: 19px; }
.pill-tx { font-size: .85rem; color: var(--ink-soft); line-height: 1.35; }
.pill-tx strong { display: block; font-family: var(--font-body); font-weight: 600; font-size: .95rem; color: var(--ink); margin-bottom: 1px; }

/* ---------- hero: Athena stage ---------- */
.athena-stage {
  position: relative; height: 100%; min-height: 420px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 95% at 50% 26%, #0c1228 0%, #060812 64%, #04050c 100%);
  border: 1px solid rgba(139,123,255,.24);
  box-shadow: 0 40px 100px -40px rgba(56,224,255,.32), inset 0 0 80px rgba(123,108,246,.14);
}
.athena-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.athena-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
  align-items: center; padding: 20px; pointer-events: none;
}
.athena-top { display: flex; justify-content: center; width: 100%; }
.athena-bottom { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.athena-state {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #d6deff; background: rgba(10,14,28,.55); border: 1px solid rgba(139,123,255,.3);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.athena-state::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #8b7bff; box-shadow: 0 0 12px #8b7bff; transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
[data-athena][data-state="listening"] .athena-state::before { background: #38e0ff; box-shadow: 0 0 14px #38e0ff; }
[data-athena][data-state="thinking"]  .athena-state::before { background: #b693ff; box-shadow: 0 0 14px #b693ff; animation: athenaPulse 1s ease-in-out infinite; }
[data-athena][data-state="speaking"]  .athena-state::before { background: #ffffff; box-shadow: 0 0 16px #ffffff; }
@keyframes athenaPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .65; } }
.athena-ask {
  pointer-events: auto; min-height: 46px; padding: 0 22px; gap: 10px;
  color: #eaf1ff; background: rgba(255,255,255,.07); border: 1px solid rgba(139,123,255,.45);
  border-radius: 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(56,224,255,.18);
}
.athena-ask:hover { background: rgba(139,123,255,.16); border-color: var(--cyan); transform: translateY(-2px); }
.athena-ask:disabled { opacity: .6; cursor: default; transform: none; }
.athena-ask svg { width: 18px; height: 18px; }
.athena-cap { font-size: .76rem; color: rgba(214,222,255,.6); letter-spacing: .01em; }

/* the stage is a cosmic viewport in BOTH themes; keep a faint light-theme frame */
[data-theme="light"] .athena-stage { box-shadow: 0 30px 80px -34px rgba(20,30,70,.5); border-color: rgba(123,108,246,.3); }

/* ---------- planner / syllabus panels (dark fixes) ---------- */
[data-theme="dark"] .term-col.is-target { border-color: var(--violet); background: rgba(139,123,255,.12); box-shadow: inset 0 0 0 2px rgba(139,123,255,.3); }
[data-theme="dark"] .course-chip.has-error { border-color: #ff7a6b; background: rgba(255,90,70,.12); }
[data-theme="dark"] .course-chip.has-error::before { background: #ff6a52; color: #1a0805; }
[data-theme="dark"] .cc-tag.req  { background: rgba(139,123,255,.18); color: #c7bcff; }
[data-theme="dark"] .cc-tag.elec { background: rgba(240,184,106,.16); color: var(--amber-2); }
[data-theme="dark"] .cc-tag.gen  { background: rgba(255,255,255,.08); color: var(--ink-soft); }
[data-theme="dark"] .conflicts-empty { background: rgba(56,224,255,.08); color: #bfe9ff; border-color: rgba(56,224,255,.24); }
[data-theme="dark"] .conflicts-empty svg { color: var(--cyan); }
[data-theme="dark"] .conflict { background: rgba(255,110,80,.12); color: #ffc9bb; border-color: rgba(255,110,80,.3); }
[data-theme="dark"] .conflict strong { color: #ffd9cf; }
[data-theme="dark"] .term-col-credits.is-over { color: #ff8a6b; }
[data-theme="dark"] .syllabus-doc { background: rgba(255,255,255,.03); background-image: repeating-linear-gradient(transparent, transparent 31px, rgba(255,255,255,.05) 32px); }
[data-theme="dark"] .doc-corner { background: linear-gradient(225deg, rgba(255,255,255,.08) 50%, transparent 50%); }
[data-theme="dark"] .task-check { background: rgba(255,255,255,.05); }
[data-theme="dark"] .task.is-overdue { border-color: rgba(255,110,80,.4); }
[data-theme="dark"] .task.is-overdue .task-status { background: rgba(255,110,80,.18); color: #ffb09c; }
[data-theme="dark"] .task.is-next { border-color: rgba(139,123,255,.5); box-shadow: 0 0 0 2px rgba(139,123,255,.2), var(--shadow-sm); }
[data-theme="dark"] .task.is-next .task-status { background: rgba(139,123,255,.2); color: #c7bcff; }
[data-theme="dark"] .task.is-upcoming .task-status { background: rgba(240,184,106,.16); color: var(--amber-2); }
[data-theme="dark"] .chip-warn { background: rgba(240,184,106,.12); border-color: rgba(240,184,106,.4); color: #f3c78f; }
[data-theme="dark"] .chip-warn em { color: var(--amber-2); }

/* hero leftover decorative cards (if present) */
[data-theme="dark"] .float-badge { background: var(--grad-accent); color: var(--ivy-ink); }
[data-theme="dark"] .float-badge svg { background: #eaf1ff; }
[data-theme="dark"] .fb-2 { background: var(--card); color: var(--ink); border: 1px solid var(--line-2); }

/* ---------- capabilities ---------- */
[data-theme="dark"] .cap:hover { border-color: rgba(139,123,255,.45); box-shadow: 0 14px 40px rgba(56,224,255,.12); }
[data-theme="dark"] .cap-tag { background: var(--grad-accent); color: var(--ivy-ink); }
[data-theme="dark"] .cap-tag.pro { background: rgba(240,184,106,.18); color: var(--amber-2); }

/* ---------- privacy section (was solid ivy bg) ---------- */
[data-theme="dark"] .privacy-section { background: linear-gradient(180deg, #0b1124 0%, #080b16 100%); color: var(--ink); }
[data-theme="dark"] .privacy-section .section-title { color: var(--ink); }
[data-theme="dark"] .privacy-section .section-title em { color: var(--cyan); }
[data-theme="dark"] .privacy-section .section-lede { color: var(--ink-soft); }
[data-theme="dark"] .principles { background: rgba(139,123,255,.16); border-color: rgba(139,123,255,.16); }
[data-theme="dark"] .principle { background: rgba(255,255,255,.025); }
[data-theme="dark"] .principle:hover { background: rgba(139,123,255,.08); }
[data-theme="dark"] .principle-num { color: var(--cyan); }
[data-theme="dark"] .principle h3 { color: var(--ink); }
[data-theme="dark"] .principle p { color: var(--ink-soft); }
[data-theme="dark"] .principle p em { color: #fff; }

/* ---------- roadmap ---------- */
[data-theme="dark"] .phase-now { border-color: rgba(139,123,255,.45); box-shadow: 0 14px 40px rgba(56,224,255,.12); }
[data-theme="dark"] .phase-now .phase-tag { background: var(--grad-accent); color: var(--ivy-ink); }
[data-theme="dark"] .phase-next .phase-tag { background: rgba(240,184,106,.2); color: var(--amber-2); }
[data-theme="dark"] .phase-later .phase-tag { background: rgba(255,255,255,.08); color: var(--ink-soft); }
[data-theme="dark"] .phase-next ul li::before { border-color: var(--amber-2); }

/* ---------- pricing ---------- */
[data-theme="dark"] .price-card-feature {
  background: linear-gradient(180deg, rgba(139,123,255,.16) 0%, rgba(56,224,255,.06) 100%);
  border-color: rgba(139,123,255,.42); color: var(--ink); box-shadow: 0 24px 64px rgba(56,224,255,.16);
}
[data-theme="dark"] .price-card-feature .price-name { color: var(--ink-soft); }
[data-theme="dark"] .price-card-feature .price-per,
[data-theme="dark"] .price-card-feature .price-sub { color: var(--ink-soft); }
[data-theme="dark"] .price-card-feature .price-feats li { color: var(--ink); }
[data-theme="dark"] .price-card-feature .price-feats li::before { border-color: var(--cyan); }
[data-theme="dark"] .price-badge { background: var(--grad-accent); color: var(--ivy-ink); }
[data-theme="dark"] .price-feats li::before { border-color: var(--violet); }

/* ---------- waitlist (was solid ivy bg) ---------- */
[data-theme="dark"] .waitlist-card {
  background: linear-gradient(150deg, #0d1430 0%, #0a0e1f 100%); color: var(--ink);
  border: 1px solid rgba(139,123,255,.3);
}
[data-theme="dark"] .waitlist-card::before { background: radial-gradient(50% 60% at 100% 0%, rgba(56,224,255,.18), transparent 70%); }
[data-theme="dark"] .waitlist-copy .section-title { color: var(--ink); }
[data-theme="dark"] .waitlist-copy .section-lede { color: var(--ink-soft); }
[data-theme="dark"] .field label { color: var(--ink-soft); }
[data-theme="dark"] .field input, [data-theme="dark"] .field select { color: var(--ink); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.05); }
[data-theme="dark"] .field input::placeholder { color: rgba(255,255,255,.35); }
[data-theme="dark"] .field input:focus, [data-theme="dark"] .field select:focus { border-color: var(--cyan); background: rgba(255,255,255,.08); }
[data-theme="dark"] .waitlist-form .btn-primary { background: var(--grad-accent); color: var(--ivy-ink); }
[data-theme="dark"] .waitlist-form .btn-primary:hover { filter: brightness(1.08); }
[data-theme="dark"] .form-status.is-ok { color: #9af5c0; }
[data-theme="dark"] .form-status.is-err { color: #ffb09c; }

/* ---------- footer / consent (were var(--ink) bg) ---------- */
[data-theme="dark"] .site-footer { background: #070a13; border-top: 1px solid var(--line); }
[data-theme="dark"] .site-footer .brand-word { color: var(--ink); }
[data-theme="dark"] .consent { background: #11162a; color: #e9edf8; border: 1px solid rgba(139,123,255,.28); }

/* selection */
[data-theme="dark"] ::selection { background: rgba(139,123,255,.4); color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .athena-stage { min-height: 360px; }
}
@media (max-width: 520px) {
  .hero-pills { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  [data-athena][data-state="thinking"] .athena-state::before { animation: none; }
}