/* HYP Yoga — content-surface contrast and depth
   Loaded after page-local styles. This deliberately excludes navigation and
   Sparkbar controls: it only gives reading and list surfaces a shared, legible
   glass material in Sun and Moon. */

/* Reflect workspaces: a blue outer pane, with quieter inset writing surfaces. */
body[data-content-page] { --content-tint: #1e88b4; }
body[data-content-page] :is(.compose-section, .profile-section, .font-preview, .reflect-view-group) {
  border: 1px solid var(--content-rim);
  border-radius: 20px;
  background:
    radial-gradient(120% 95% at 0% 0%, var(--content-specular), transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--color-white) 95%, #1e88b4),
      color-mix(in srgb, var(--color-white) 86%, #1e88b4));
  box-shadow: inset 0 1px var(--content-specular),
    inset 0 -2px color-mix(in srgb, #1e88b4 38%, transparent),
    0 16px 32px var(--content-shadow);
}
body[data-content-page="settings"] .profile-section { padding: 1.5rem; margin-bottom: 1.25rem; }
body[data-content-page] :is(.page-title, .profile-section-title, .font-pref-label) { color: var(--content-ink); }
body[data-content-page] :is(.page-subtitle, .profile-section-desc, .font-pref-desc, .visibility-note, .notification-desc) {
  color: var(--content-muted);
}
body[data-content-page="compose"] :is(.form-group input, .form-group textarea, .md-preview-pane) {
  color: var(--content-ink);
  background: color-mix(in srgb, var(--color-bg) 94%, #1e88b4);
  border-color: color-mix(in srgb, #1e88b4 40%, var(--content-rim));
  box-shadow: inset 0 2px 6px var(--content-shadow);
}
body[data-content-page="compose"] :is(input, textarea)::placeholder { color: var(--content-caption); opacity: 1; }
body[data-content-page="compose"] .md-toolbar {
  background: color-mix(in srgb, var(--color-white) 84%, #1e88b4);
  border-color: var(--content-rim);
}
body[data-content-page="compose"] .md-toolbar button { color: var(--content-ink); min-height: 44px; }
body[data-content-page="compose"] :is(.image-upload-zone, .voice-spark-zone) {
  border-color: color-mix(in srgb, #1e88b4 60%, var(--content-rim));
  background: color-mix(in srgb, var(--color-white) 92%, #1e88b4);
}
body[data-content-page="compose"] .voice-spark-zone { border-color: #c55361; }
body[data-content-page] :is(input, textarea, select, button, a):focus-visible {
  outline: 3px solid #1e88b4;
  outline-offset: 3px;
}
body[data-content-page="settings"] .settings-tab { min-height: 44px; }
body[data-content-page="settings"] .settings-tab.active {
  color: var(--content-ink);
  border-color: #1e88b4;
  background: color-mix(in srgb, var(--color-white) 80%, #1e88b4);
}
body[data-content-page="compose"] .form-submit {
  color: #fff;
  background: linear-gradient(135deg, #177aa5, #126086);
  border: 1px solid #145a79;
  box-shadow: inset 0 1px #ffffff60, 0 7px 18px #12608630;
}

:root {
  --content-ink: #24201b;
  --content-muted: #625a50;
  --content-caption: #746a5e;
  --content-rim: rgba(105, 82, 43, 0.30);
  --content-specular: rgba(255, 255, 255, 0.92);
  --content-shadow: rgba(67, 46, 13, 0.12);
  --content-tint: var(--color-accent, #b8860b);
  --content-tint-soft: rgba(184, 134, 11, 0.10);
}

/* The text hierarchy needs to change with the material, not merely invert.
   These tokens are intentionally brighter than the original muted palette. */
[data-lexicon="moon"] {
  --color-bg: #101419;
  --color-bg-deep: #171d24;
  --color-white: #1b222b;
  --color-text: #fffaf2;
  --color-text-muted: #e2d8cd;
  --color-text-light: #c8bdaf;
  --color-border: #7890a5;
  --content-ink: #fffaf2;
  --content-muted: #e2d8cd;
  --content-caption: #d6cabd;
  --content-rim: rgba(194, 218, 239, 0.56);
  --content-specular: rgba(255, 255, 255, 0.26);
  --content-shadow: rgba(0, 0, 0, 0.62);
}

[data-lexicon="moon"] body {
  background:
    radial-gradient(90% 65% at 0% 0%, rgba(30, 136, 180, 0.13), transparent 62%),
    radial-gradient(85% 60% at 100% 100%, rgba(184, 134, 11, 0.12), transparent 64%),
    var(--color-bg);
  color: var(--content-ink);
}

/* Detail surfaces. The tint is a low-frequency light source; the brighter
   rim and inset shadow make the pane feel placed above the page. */
.verse-display,
.sutra-display,
.term-display,
.glx-filters,
.glx-letter-section,
.chapter-card,
.entry-card,
.toc-section,
.toc,
.verse,
.sutra,
.term-content-card {
  --content-tint-soft: color-mix(in srgb, var(--content-tint) 12%, transparent);
  position: relative;
  border-color: var(--content-rim);
  background:
    radial-gradient(130% 105% at 8% 0%, var(--content-specular), transparent 52%),
    radial-gradient(95% 95% at 100% 110%, var(--content-tint-soft), transparent 68%),
    color-mix(in srgb, var(--color-white) 92%, var(--content-tint));
  box-shadow:
    inset 0 1px 0 var(--content-specular),
    inset 0 -1px 0 color-mix(in srgb, var(--content-tint) 34%, transparent),
    0 1px 0 rgba(255, 255, 255, 0.22),
    0 14px 30px var(--content-shadow);
}

.verse-display { --content-tint: #bd820d; }
.sutra-display,
.chapter-card { --content-tint: #4a9e52; }
.term-display,
.glx-filters,
.glx-letter-section { --content-tint: #1e88b4; }
.entry-card { --content-tint: #1e88b4; }
.toc-section,
.toc,
.verse { --content-tint: #bd820d; }
.sutra { --content-tint: #4a9e52; }
.term-content-card { --content-tint: #1e88b4; }

/* List rows are a quieter, still-visible second layer. */
.glx-term,
.chapter-card a.chapter-link {
  border-color: color-mix(in srgb, var(--content-tint) 28%, var(--content-rim));
  box-shadow:
    inset 0 1px 0 var(--content-specular),
    inset 0 -1px 0 color-mix(in srgb, var(--content-tint) 18%, transparent);
}

/* Page-local styles still choose the typography; this restores a consistently
   readable foreground when those styles refer to their old generic tokens. */
.verse-display,
.sutra-display,
.term-display,
.glx-filters,
.glx-letter-section,
.chapter-card,
.entry-card,
.glx-term,
.toc-section,
.toc,
.verse,
.sutra,
.term-content-card {
  color: var(--content-ink);
}

.verse-display .verse-label,
.sutra-display .sutra-label,
.term-display .term-label,
.glx-eyebrow,
.glx-filter-label,
.entry-meta,
.glx-stats,
.glx-letter-section-count {
  color: var(--content-caption);
}

.verse-display .verse-transliteration,
.sutra-display .sutra-transliteration,
.term-display .term-transliteration,
.entry-body,
.glx-sub,
.glx-term-gloss {
  color: var(--content-muted);
}

@media (hover: hover) {
  .verse-display:hover,
  .sutra-display:hover,
  .term-display:hover,
  .glx-filters:hover,
  .glx-letter-section:hover,
  .chapter-card:hover,
  .entry-card:hover,
  .toc-section:hover,
  .toc:hover,
  .verse:hover,
  .sutra:hover,
  .term-content-card:hover {
    border-color: color-mix(in srgb, var(--content-tint) 62%, var(--content-rim));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      inset 0 -1px 0 color-mix(in srgb, var(--content-tint) 45%, transparent),
      0 18px 38px var(--content-shadow),
      0 0 24px color-mix(in srgb, var(--content-tint) 16%, transparent);
  }
}

/* Keyboard focus stays obvious against both the cream and Moon surfaces. */
.entry-card:focus-within,
.chapter-card:focus-within,
.glx-term:focus-within {
  outline: 2px solid color-mix(in srgb, var(--content-tint) 82%, white);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .verse-display,
  .sutra-display,
  .term-display,
  .glx-filters,
  .glx-letter-section,
  .chapter-card,
  .entry-card,
  .toc-section,
  .toc,
  .verse,
  .sutra,
  .term-content-card { transition: none; }
}

@media (pointer: coarse) {
  .verse-display,
  .sutra-display,
  .term-display,
  .glx-filters,
  .glx-letter-section,
  .chapter-card,
  .entry-card,
  .toc-section,
  .toc,
  .verse,
  .sutra,
  .term-content-card {
    box-shadow:
      inset 0 1px 0 var(--content-specular),
      inset 0 -1px 0 color-mix(in srgb, var(--content-tint) 28%, transparent),
      0 8px 18px var(--content-shadow);
  }
}