/* ════════════════════════════════════════════════════════════════════
   SymposiON — identity.css   (brand tokens + logo lockup)
   Load AFTER main.css and main-upgrade.css via a single <link>.
   All values from the SymposiON Identity System spec.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Brand surfaces (Hearth palette · dark default) ────────────── */
  --sym-bg-dark:    #0D0A06;
  --sym-bg-panel:   #1A130C;
  --sym-bg-light:   #F6F2EB;
  --sym-bg-stone:   #FAF7F0;

  /* ─── Brand ink ─────────────────────────────────────────────────── */
  --sym-ink:        #221B10;
  --sym-cream:      #F0EBE0;
  --sym-stone:      #867660;

  /* ─── The "on-switch" accent · brand pivot ──────────────────────── */
  --sym-terra:      #D97B5C;   /* default terra · the lit ON            */
  --sym-terra-dk:   #C05535;   /* hover / pressed                       */
  --sym-terra-lt:   #C5572F;   /* deeper variant for light surfaces     */

  /* ─── Supporting subject accents ────────────────────────────────── */
  --sym-gold:       #C4A448;
  --sym-sage:       #6A8752;
  --sym-aegean:     #5E8B96;

  /* ─── Type stack ────────────────────────────────────────────────── */
  --sym-font-serif:    'Cormorant Garamond', Georgia, serif;
  --sym-font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sym-font-mono:     'JetBrains Mono', ui-monospace, monospace;
  --sym-font-display:  'Cinzel', 'Trajan Pro', Georgia, serif;  /* all-caps decorative UI */
}


/* ─── .brand-mark — inline Σ + power-button SVG ─────────────────────
   The Σ strokes inherit currentColor; the power-button group is
   hard-coded #D97B5C in the SVG, so it always stays terra.
─────────────────────────────────────────────────────────────────────── */
.brand-mark {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
  vertical-align: -0.32em;
  color: currentColor;
}
.brand-mark--glow .brand-mark__power {
  filter: drop-shadow(0 0 4px var(--sym-terra));
}


/* ─── .logo — wordmark in nav, footer, auth modal ───────────────────
   Works with BOTH markup patterns:
     a) text-only:   <div class="logo">Symposi<span>ON</span></div>
     b) SVG lockup:  <a class="logo"><svg class="brand-mark">…</svg>
                       <span class="logo__wordmark">Symposi<span>ON</span></span></a>
─────────────────────────────────────────────────────────────────────── */
.logo {
  font-family: var(--sym-font-serif);
  font-weight: 600;
  letter-spacing: -0.3px;
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.logo:hover { opacity: 0.78; }

/* Innermost <span> lights up terra — never the wrapper span */
.logo > span,
.logo .logo__wordmark > span,
.footer-logo > span,
.auth-modal-logo > span,
.gp-logo > span,
.hwk-loading-logo > span {
  color: var(--sym-terra);
  font-weight: 700;
  text-shadow:
    0 0 14px rgba(217, 123, 92, 0.55),
    0 0 28px rgba(217, 123, 92, 0.25);
}

/* Wrapper spans keep normal colour */
.logo .logo__wordmark {
  color: inherit;
  font-weight: inherit;
  text-shadow: none;
}

/* Light-surface variant — soften the glow */
[data-theme="light"] .logo > span,
[data-theme="light"] .logo .logo__wordmark > span,
.logo--on-light > span,
.logo--on-light .logo__wordmark > span {
  color: var(--sym-terra-lt);
  text-shadow: none;
}


/* ─── Showcase card SVG illustrations ───────────────────────────────
   Replace the emoji .showcase-icon with the line-art SVG version.
─────────────────────────────────────────────────────────────────────── */
.showcase-illu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 0;          /* hide any fallback text */
}
.showcase-illu svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* ─── Home page nav — gold hero treatment ───────────────────────────*/
#page-home .logo > span,
#page-home .logo .logo__wordmark > span {
  color: var(--sym-gold);
  text-shadow: 0 0 12px rgba(196, 164, 72, 0.45);
}


/* ════════════════════════════════════════════════════════════════════
   Grade level row — visibility fix
   main-upgrade.css / main.css render these very faint; boost them.
   ════════════════════════════════════════════════════════════════════ */
.hero-level-label {
  color: var(--sym-stone, #867660) !important;
  opacity: 1 !important;
  font-family: var(--sym-font-mono, monospace);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.grade-btn {
  color: var(--sym-cream, #F0EBE0) !important;
  opacity: 1 !important;
  border: 1px solid rgba(240,235,224,0.22) !important;
  background: rgba(240,235,224,0.06) !important;
  transition: border-color .18s, background .18s;
}
.grade-btn:hover:not(.locked) {
  border-color: rgba(240,235,224,0.5) !important;
  background: rgba(240,235,224,0.12) !important;
}
.grade-btn.locked {
  color: rgba(240,235,224,0.3) !important;
  border-color: rgba(240,235,224,0.08) !important;
}
.dd-item {
  color: var(--sym-cream, #F0EBE0) !important;
}
.dd-item:hover {
  color: var(--sym-terra, #D97B5C) !important;
  background: rgba(217,123,92,0.08) !important;
}

/* Alabaster (light) theme overrides */
.theme-alabaster .grade-btn {
  color: var(--sym-ink, #221B10) !important;
  border-color: rgba(34,27,16,0.2) !important;
  background: rgba(34,27,16,0.04) !important;
}
.theme-alabaster .hero-level-label {
  color: var(--sym-stone, #8A7E6B) !important;
}


/* ════════════════════════════════════════════════════════════════════
   Game card contrast fix for dark themes
   The .game-card background was set to --alabaster (light cream) in
   main.css. Override to the dark panel colour + cream text.
   ════════════════════════════════════════════════════════════════════ */
.theme-hearth .game-card,
.theme-marble .game-card,
.theme-amphora .game-card,
.theme-aegean .game-card {
  background: var(--sym-bg-panel, #1A130C) !important;
  color: var(--sym-cream, #F0EBE0) !important;
  border-color: color-mix(in srgb, var(--sym-terra, #D97B5C) 18%, transparent) !important;
}
.theme-hearth .game-card h3,
.theme-marble .game-card h3,
.theme-amphora .game-card h3,
.theme-aegean .game-card h3 {
  color: var(--sym-cream, #F0EBE0) !important;
}
.theme-hearth .game-card .card-tag,
.theme-marble .game-card .card-tag,
.theme-amphora .game-card .card-tag,
.theme-aegean .game-card .card-tag {
  color: var(--sym-stone, #867660) !important;
}
/* Showcase cards same fix */
.theme-hearth .showcase-card,
.theme-marble .showcase-card,
.theme-amphora .showcase-card,
.theme-aegean .showcase-card {
  color: var(--sym-cream, #F0EBE0) !important;
}
/* Section heads */
.theme-hearth .section-head h2,
.theme-marble .section-head h2,
.theme-amphora .section-head h2,
.theme-aegean .section-head h2 {
  color: var(--sym-cream, #F0EBE0) !important;
}


/* ════════════════════════════════════════════════════════════════════
   Theme picker UI
   ════════════════════════════════════════════════════════════════════ */
.theme-picker {
  position: relative;
}

.theme-picker__btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

.theme-picker__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D97B5C;
  flex-shrink: 0;
  transition: background .25s;
}

.theme-picker__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--sym-bg-panel, #1A130C);
  border: 1px solid rgba(196,164,72,0.18);
  padding: 10px 8px;
  min-width: 200px;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}

.theme-picker__label {
  font-family: var(--sym-font-mono, monospace);
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sym-stone, #867660);
  padding: 4px 8px 10px;
}

.theme-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  color: var(--sym-cream, #F0EBE0);
  font-family: var(--sym-font-sans, 'Inter', sans-serif);
  font-size: 12px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background .15s;
  text-align: left;
}
.theme-opt:hover,
.theme-opt--active {
  background: rgba(240,235,224,0.06);
}
.theme-opt--active {
  color: var(--sym-terra, #D97B5C);
}

.theme-opt__swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12);
}

.theme-opt__desc {
  font-size: 10px;
  color: var(--sym-stone, #867660);
  margin-left: auto;
}

/* Light theme adjustments for picker */
.theme-alabaster .theme-picker__panel {
  background: #FFFFFF;
  border-color: rgba(34,27,16,0.12);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.theme-alabaster .theme-opt {
  color: var(--sym-ink, #221B10);
}
.theme-alabaster .theme-opt:hover,
.theme-alabaster .theme-opt--active {
  background: rgba(34,27,16,0.04);
}


/* ════════════════════════════════════════════════════════════════════
   Nav z-index fix — ensure nav + its dropdowns paint above hero content
   ════════════════════════════════════════════════════════════════════ */
nav.nav {
  z-index: 200 !important;
  position: relative !important;
}
.theme-picker__panel {
  z-index: 10000 !important;
}


/* ════════════════════════════════════════════════════════════════════
   Font corrections — replace Raleway with SymposiON identity stack
   Raleway is not part of the brand spec; these rules override it.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Nav buttons → Cinzel (all-caps decorative) ─────────────────── */
.nav-btn {
  font-family: var(--sym-font-display) !important;
  letter-spacing: 0.06em;
}
/* Keep theme-picker label as-is (already mono) */
.theme-picker__btn.nav-btn {
  font-family: var(--sym-font-sans) !important;
  letter-spacing: 0;
}

/* ─── Subject pills (hero) → Cinzel ──────────────────────────────── */
.subject-pill,
.cat-pill {
  font-family: var(--sym-font-display) !important;
  letter-spacing: 0.08em;
}

/* ─── Grade selector buttons → Inter ─────────────────────────────── */
.grade-btn {
  font-family: var(--sym-font-sans) !important;
}
.dd-item {
  font-family: var(--sym-font-sans) !important;
}

/* ─── Game card base → Inter ──────────────────────────────────────── */
.game-card {
  font-family: var(--sym-font-sans) !important;
}

/* ─── Game card title → Cormorant Garamond ───────────────────────── */
.game-card h3,
.game-card .card-title {
  font-family: var(--sym-font-serif) !important;
  font-weight: 600;
}

/* ─── Card sub-label, tags, badges → JetBrains Mono ─────────────── */
.game-card .card-sub,
.game-card .card-tag,
.game-card .card-badge,
.card-badge,
.tag-g {
  font-family: var(--sym-font-mono) !important;
  letter-spacing: 0.02em;
}

/* ─── Section headings / category labels → Cormorant Garamond ────── */
.section-head h2,
.cat-section h2,
.home-carousel h2 {
  font-family: var(--sym-font-serif) !important;
}