/* ============================================================================
 * lumen-themes.css — Yousef 2026-06-16:
 * "حابب يكون في لمشة ايمانية مدموجة بلمسة عصرية بلمسة تكنولوجية
 *  بالوان فرحة و بنيون كلرز ... لكل صفحة ثيم مخصص الها ومختلف عن التاني"
 *
 * One theme per page family. Faith + modern + tech. Joyful + neon hints.
 * All themes use the same 28-color palette plus a neon-glow layer.
 * ========================================================================== */

/* ─── 1. Neon glow utilities ─────────────────────────────────────────────── */
:root {
  --neon-cyan:   #00E0E0;
  --neon-teal:   #00D4A0;
  --neon-mint:   #50FFB6;
  --neon-lime:   #C8FF50;
  --neon-amber:  #FFC850;
  --neon-coral:  #FF9075;
  --neon-rose:   #FF7AA8;
  --neon-violet: #BE7FFF;
  --neon-blue:   #6B9CFF;
  --neon-gold:   #FFD976;

  --glow-soft:  0 0 16px 0;
  --glow-mid:   0 0 28px 2px;
  --glow-loud:  0 0 40px 4px;
}

/* Shared per-page surface — each theme will override accent + glow */
body[data-section] .section__kicker,
body[data-section] .card__kicker,
body[data-section] .saint-card__day,
body[data-section] .word-card__original,
body[data-section] .hfh-card__kicker {
  transition: text-shadow var(--dur-fast, 200ms) var(--cb-ease, ease);
}
body[data-section] .card:hover,
body[data-section] .saint-card:hover,
body[data-section] .icon-card:hover,
body[data-section] .prayer-card:hover,
body[data-section] .hfh-card:hover,
body[data-section] .walk-stop:hover,
body[data-section] .glossary-card:hover,
body[data-section] .discern-card:hover,
body[data-section] .prompt-card:hover,
body[data-section] .workflow-card:hover,
body[data-section] .ethics-card:hover {
  box-shadow: var(--glow-soft) var(--page-glow, transparent),
              0 6px 18px rgba(0,0,0,0.08);
}

/* Subtle dot-grid background — gives "modern + tech" feel without weight */
body[data-section] {
  background-image:
    radial-gradient(circle at 1px 1px, var(--page-dot, rgba(212,168,67,0.08)) 1px, transparent 0);
  background-size: 28px 28px;
  background-attachment: fixed;
}

/* ─── 2. Per-page themes ────────────────────────────────────────────────── */

/* ★ HOME — aurora (gold + rose + sage), the family hearth */
body[data-section="home"] {
  --page-accent: #D4A843;       /* gold */
  --page-secondary: #F09BA1;    /* rose */
  --page-glow: rgba(255, 217, 118, 0.45);
  --page-dot: rgba(212, 168, 67, 0.10);
}
body[data-section="home"] .section__title {
  background: linear-gradient(120deg, #D4A843, #F09BA1, #87A862);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 📜 LETTERS — twilight cream, intimate */
body[data-section="letters"] {
  --page-accent: #B8703F;       /* warm earth */
  --page-secondary: #D4C9E8;    /* lav */
  --page-glow: rgba(255, 201, 118, 0.40);
  --page-dot: rgba(184, 112, 63, 0.06);
}
body[data-section="letters"] .letter-body p::first-line { letter-spacing: 0.02em; }

/* ✨ SAINTS — halo gold, sanctity */
body[data-section="saint"] {
  --page-accent: #D4A843;
  --page-secondary: #E8C067;
  --page-glow: rgba(255, 217, 118, 0.55);
  --page-dot: rgba(212, 168, 67, 0.12);
}
body[data-section="saint"] .saint-card { position: relative; overflow: hidden; }
body[data-section="saint"] .saint-card::before {
  content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255, 217, 118, 0.10), transparent 50%);
  pointer-events: none;
}

/* 🙏 PRAYERS — sage quiet, contemplation */
body[data-section="prayers"] {
  --page-accent: #87A862;       /* sage */
  --page-secondary: #B5E4CA;    /* mint */
  --page-glow: rgba(80, 255, 182, 0.30);
  --page-dot: rgba(135, 168, 98, 0.08);
}
body[data-section="prayers"] .section__kicker {
  color: var(--page-accent) !important;
  text-shadow: 0 0 12px rgba(80, 255, 182, 0.4);
}

/* ☩ ICONOGRAPHY — Byzantine gold + mid-blue */
body[data-section="iconography"] {
  --page-accent: #D4A843;
  --page-secondary: #4477A0;
  --page-glow: rgba(255, 217, 118, 0.50);
  --page-dot: rgba(68, 119, 160, 0.07);
}
body[data-section="iconography"] .icon-card__svg {
  background: radial-gradient(circle, var(--jp-cream-100) 60%, rgba(212, 168, 67, 0.15));
  box-shadow: var(--glow-soft) rgba(255, 217, 118, 0.30);
}

/* 🌍 LORD'S PRAYER — universal sky */
body[data-section="lords-prayer"] {
  --page-accent: #4477A0;       /* deep sky */
  --page-secondary: #BDD9F2;    /* light sky */
  --page-glow: rgba(107, 156, 255, 0.40);
  --page-dot: rgba(68, 119, 160, 0.08);
}
body[data-section="lords-prayer"] .section__title {
  background: linear-gradient(120deg, #4477A0, #BDD9F2, #D4A843);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 🌅 WALK WITH CHRIST — pilgrim path */
body[data-section="walk-with-christ"] {
  --page-accent: #B8703F;       /* sand */
  --page-secondary: #87A862;    /* sage */
  --page-glow: rgba(255, 200, 80, 0.35);
  --page-dot: rgba(184, 112, 63, 0.07);
}
body[data-section="walk-with-christ"] .walk-stop__num {
  background: var(--jp-gold-200);
  color: var(--jp-ink);
  padding: 4px 10px;
  border-radius: var(--r-pill, 999px);
  box-shadow: var(--glow-soft) rgba(255, 200, 80, 0.4);
}

/* 🎵 HYMNS FOR THE HEART — emotional rainbow */
body[data-section="hymns-for-the-heart"] {
  --page-accent: #DB7A82;       /* rose */
  --page-secondary: #BE7FFF;    /* violet */
  --page-glow: rgba(255, 122, 168, 0.45);
  --page-dot: rgba(219, 122, 130, 0.07);
}
body[data-section="hymns-for-the-heart"] .hfh-card:nth-of-type(8n+1) { --page-glow: rgba(255, 217, 118, 0.5); }
body[data-section="hymns-for-the-heart"] .hfh-card:nth-of-type(8n+2) { --page-glow: rgba(80, 255, 182, 0.4); }
body[data-section="hymns-for-the-heart"] .hfh-card:nth-of-type(8n+3) { --page-glow: rgba(107, 156, 255, 0.4); }
body[data-section="hymns-for-the-heart"] .hfh-card:nth-of-type(8n+4) { --page-glow: rgba(200, 255, 80, 0.4); }
body[data-section="hymns-for-the-heart"] .hfh-card:nth-of-type(8n+5) { --page-glow: rgba(255, 144, 117, 0.5); }
body[data-section="hymns-for-the-heart"] .hfh-card:nth-of-type(8n+6) { --page-glow: rgba(255, 122, 168, 0.5); }
body[data-section="hymns-for-the-heart"] .hfh-card:nth-of-type(8n+7) { --page-glow: rgba(190, 127, 255, 0.45); }
body[data-section="hymns-for-the-heart"] .hfh-card:nth-of-type(8n+8) { --page-glow: rgba(0, 224, 224, 0.4); }
body[data-section="hymns-for-the-heart"] .hfh-card { box-shadow: var(--glow-soft) var(--page-glow); }
body[data-section="hymns-for-the-heart"] .hfh-card:hover { box-shadow: var(--glow-mid) var(--page-glow), 0 6px 18px rgba(0,0,0,0.08); }

/* 📖 HYMNAL — velvet cream catalogue */
body[data-section="hymnal"] {
  --page-accent: #D4A843;
  --page-secondary: #B6A4D6;    /* lav */
  --page-glow: rgba(255, 217, 118, 0.35);
  --page-dot: rgba(182, 164, 214, 0.06);
}

/* 📚 STORIES (kids) — storybook peach */
body[data-section="stories"] {
  --page-accent: #F4A78B;       /* coral */
  --page-secondary: #F09BA1;    /* rose */
  --page-glow: rgba(255, 144, 117, 0.40);
  --page-dot: rgba(244, 167, 139, 0.08);
}
body[data-section="stories"] .story-card__coloring {
  box-shadow: var(--glow-soft) rgba(255, 144, 117, 0.4);
  background: linear-gradient(135deg, #FFEDDD, #FFD4B8) !important;
}
body[data-section="stories"] .story-card__coloring-label {
  text-shadow: 0 0 6px rgba(255, 144, 117, 0.5);
}

/* 👶 CHILDREN'S PRAYER BOOK — sunshine butter */
body[data-section="childrens-prayer-book"] {
  --page-accent: #FFD976;       /* butter */
  --page-secondary: #F09BA1;
  --page-glow: rgba(255, 217, 118, 0.50);
  --page-dot: rgba(255, 217, 118, 0.10);
}
body[data-section="childrens-prayer-book"] .cpb-cat-title {
  background: linear-gradient(90deg, #FFD976, #F4A78B);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 🏠 FAMILY ALTAR — hearth warm */
body[data-section="altar"] {
  --page-accent: #E8C067;
  --page-secondary: #B8703F;
  --page-glow: rgba(255, 200, 80, 0.40);
  --page-dot: rgba(232, 192, 103, 0.08);
}

/* 📿 LECTIO DIVINA — manuscript gold + ink */
body[data-section="lectio"] {
  --page-accent: #B97F1A;       /* deep gold */
  --page-secondary: #5A6173;    /* ink soft */
  --page-glow: rgba(255, 217, 118, 0.35);
  --page-dot: rgba(185, 127, 26, 0.07);
}
body[data-section="lectio"] .lectio-step__num {
  background: linear-gradient(180deg, var(--neon-gold), var(--jp-gold-400));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 4rem !important;
}

/* 📅 CALENDAR — liturgical color (changes with season via JS) */
body[data-section="calendar"] {
  --page-accent: #87A862;       /* green default; JS may swap */
  --page-secondary: #D4A843;
  --page-glow: rgba(80, 255, 182, 0.30);
  --page-dot: rgba(135, 168, 98, 0.06);
}

/* 🧒 CATECHISM — slate bright */
body[data-section="catechism"] {
  --page-accent: #4477A0;
  --page-secondary: #87A862;
  --page-glow: rgba(0, 224, 224, 0.30);
  --page-dot: rgba(68, 119, 160, 0.07);
}
body[data-section="catechism"] .cat-card__num {
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(0, 224, 224, 0.5);
}

/* 📖 WORD OF THE DAY — Greek manuscript */
body[data-section="word"] {
  --page-accent: #B97F1A;
  --page-secondary: #B8703F;
  --page-glow: rgba(255, 217, 118, 0.35);
  --page-dot: rgba(185, 127, 26, 0.06);
}
body[data-section="word"] .word-card__original {
  font-family: var(--ff-mono, 'JetBrains Mono', monospace) !important;
  background: var(--jp-cream-200);
  padding: 6px 10px;
  border-radius: 6px;
  display: inline-block;
}

/* 🪶 FATHERS — library amber */
body[data-section="fathers"] {
  --page-accent: #B97F1A;
  --page-secondary: #B6A4D6;
  --page-glow: rgba(255, 217, 118, 0.30);
  --page-dot: rgba(185, 127, 26, 0.06);
}

/* 🕯️ CANDLES — vigil dark + warm flame */
body[data-section="candles"] {
  --page-accent: #FFC850;       /* candle gold */
  --page-secondary: #F4A78B;    /* coral */
  --page-glow: rgba(255, 200, 80, 0.55);
  --page-dot: rgba(255, 200, 80, 0.10);
  background-color: var(--jp-cream-200);
}
body[data-section="candles"] .scripture-frame {
  box-shadow: var(--glow-mid) rgba(255, 200, 80, 0.30);
}

/* 🙏 PRAYER WALL — rose vigil */
body[data-section="prayer-wall"] {
  --page-accent: #DB7A82;
  --page-secondary: #B8703F;
  --page-glow: rgba(255, 122, 168, 0.35);
  --page-dot: rgba(219, 122, 130, 0.07);
}
body[data-section="prayer-wall"] .prayer-wall-card {
  box-shadow: 0 0 0 1px rgba(219, 122, 130, 0.12), 0 4px 14px rgba(0,0,0,0.04);
}

/* 🕊️ IN MEMORIAM — twilight lav */
body[data-section="in-memoriam"] {
  --page-accent: #B6A4D6;
  --page-secondary: #92BFE6;
  --page-glow: rgba(190, 127, 255, 0.35);
  --page-dot: rgba(182, 164, 214, 0.08);
}

/* 🤲 CONFESSION COMPANION — hush */
body[data-section="confession-companion"] {
  --page-accent: #B6A4D6;
  --page-secondary: #87A862;
  --page-glow: rgba(190, 127, 255, 0.30);
  --page-dot: rgba(182, 164, 214, 0.06);
}

/* 🎨 GALLERY — stained glass jewel */
body[data-section="gallery"] {
  --page-accent: #DB7A82;
  --page-secondary: #4477A0;
  --page-glow: rgba(255, 217, 118, 0.40);
  --page-dot: rgba(244, 167, 139, 0.07);
}
body[data-section="gallery"] .gallery-card { position: relative; overflow: hidden; }
body[data-section="gallery"] .gallery-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #DB7A82, #D4A843, #87A862, #4477A0, #B6A4D6);
  opacity: 0.6;
}

/* 💌 SUBSCRIBE — welcome */
body[data-section="subscribe"] {
  --page-accent: #87A862;
  --page-secondary: #D4A843;
  --page-glow: rgba(80, 255, 182, 0.35);
  --page-dot: rgba(135, 168, 98, 0.06);
}

/* ─── 3. AI SECTION — Tech aesthetic (cream + neon cyan/teal + mono) ─────── */

body[data-section="ai-ethics"],
body[data-section="ai-glossary"],
body[data-section="ai-discernment"],
body[data-section="ai-workflows"],
body[data-section="ai-tools"],
body[data-section="ai-checker"],
body[data-section="prompts"],
body[data-section="tech-stack"],
body[data-section="how-we-use-ai"],
body[data-section="why-crossaihub"],
body[data-section="kids-ai-quiz"] {
  --page-accent: #00D4A0;       /* neon teal */
  --page-secondary: #6B9CFF;    /* neon blue */
  --page-glow: rgba(0, 224, 224, 0.40);
  --page-dot: rgba(0, 212, 160, 0.08);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0, 224, 224, 0.06) 1px, transparent 0),
    linear-gradient(135deg, transparent 0%, rgba(107, 156, 255, 0.02) 100%);
  background-size: 28px 28px, 100% 100%;
}
body[data-section="ai-ethics"] .section__title,
body[data-section="why-crossaihub"] .section__title,
body[data-section="tech-stack"] .section__title,
body[data-section="how-we-use-ai"] .section__title {
  background: linear-gradient(120deg, #00D4A0, #6B9CFF, #BE7FFF);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
body[data-section="ai-ethics"] .section__kicker,
body[data-section="ai-glossary"] .section__kicker,
body[data-section="ai-discernment"] .section__kicker,
body[data-section="ai-workflows"] .section__kicker,
body[data-section="ai-tools"] .section__kicker,
body[data-section="ai-checker"] .section__kicker,
body[data-section="prompts"] .section__kicker,
body[data-section="tech-stack"] .section__kicker,
body[data-section="how-we-use-ai"] .section__kicker,
body[data-section="why-crossaihub"] .section__kicker {
  color: var(--neon-teal) !important;
  letter-spacing: 0.20em !important;
  text-shadow: 0 0 12px rgba(0, 224, 224, 0.5);
  font-family: var(--ff-mono, 'JetBrains Mono', monospace) !important;
}
body[data-section="ai-ethics"] .ethics-card--yes,
body[data-section="how-we-use-ai"] .how-h3 {
  box-shadow: 0 0 0 1px rgba(0, 212, 160, 0.2), var(--glow-soft) rgba(0, 224, 224, 0.25);
}
body[data-section="ai-ethics"] .ethics-card--no {
  box-shadow: 0 0 0 1px rgba(219, 122, 130, 0.2), var(--glow-soft) rgba(255, 122, 168, 0.25);
}
body[data-section="prompts"] .prompt-card__text,
body[data-section="ai-glossary"] .glossary-card__plain,
body[data-section="tech-stack"] .stack-card code {
  font-family: var(--ff-mono, 'JetBrains Mono', monospace) !important;
}
body[data-section="prompts"] .prompt-card__copy {
  background: linear-gradient(90deg, var(--neon-teal), var(--neon-mint)) !important;
  color: #0D1117 !important;
  box-shadow: 0 0 0 1px rgba(0, 212, 160, 0.4), var(--glow-soft) rgba(0, 224, 224, 0.4);
}
body[data-section="ai-glossary"] .glossary-card__term {
  position: relative;
}
body[data-section="ai-glossary"] .glossary-card__term::before {
  content: '> ';
  font-family: var(--ff-mono, 'JetBrains Mono', monospace);
  color: var(--neon-teal);
  text-shadow: 0 0 10px rgba(0, 224, 224, 0.5);
}
body[data-section="ai-discernment"] .discern-card__cat {
  color: var(--neon-coral) !important;
  text-shadow: 0 0 10px rgba(255, 144, 117, 0.5);
  font-family: var(--ff-mono, 'JetBrains Mono', monospace) !important;
}
body[data-section="ai-checker"] .checker__list strong {
  color: var(--neon-teal) !important;
  text-shadow: 0 0 8px rgba(0, 224, 224, 0.4);
}
body[data-section="ai-checker"] .checker__score [data-score] {
  background: linear-gradient(90deg, var(--neon-teal), var(--neon-amber)) !important;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--ff-mono, 'JetBrains Mono', monospace) !important;
}
body[data-section="kids-ai-quiz"] {
  --page-accent: #C8FF50;       /* neon lime */
  --page-secondary: #FF7AA8;    /* neon rose */
  --page-glow: rgba(200, 255, 80, 0.40);
}
body[data-section="kids-ai-quiz"] .quiz-card__num {
  color: var(--neon-rose) !important;
  text-shadow: 0 0 8px rgba(255, 122, 168, 0.4);
  font-family: var(--ff-mono, 'JetBrains Mono', monospace) !important;
}

/* ─── 4. Original pages — refresh with brighter palettes ─────────────────── */

body[data-section="learn"] {
  --page-accent: #00D4A0;
  --page-secondary: #6B9CFF;
  --page-glow: rgba(0, 224, 224, 0.30);
}
body[data-section="devotionals"] {
  --page-accent: #B97F1A;
  --page-secondary: #B6A4D6;
  --page-glow: rgba(255, 217, 118, 0.30);
}
body[data-section="sanctuary"] {
  --page-accent: #87A862;
  --page-secondary: #B6A4D6;
  --page-glow: rgba(190, 127, 255, 0.25);
}
body[data-section="verse-map"] {
  --page-accent: #4477A0;
  --page-secondary: #D4A843;
  --page-glow: rgba(107, 156, 255, 0.35);
}
body[data-section="year"] {
  --page-accent: #D4A843;
  --page-secondary: #87A862;
  --page-glow: rgba(255, 217, 118, 0.30);
}
body[data-section="store"], body[data-section="shop"] {
  --page-accent: #DB7A82;
  --page-secondary: #D4A843;
  --page-glow: rgba(255, 122, 168, 0.30);
}
body[data-section="safety"] {
  --page-accent: #4477A0;
  --page-secondary: #87A862;
  --page-glow: rgba(0, 224, 224, 0.30);
}
body[data-section="path"] {
  --page-accent: #B6A4D6;
  --page-secondary: #D4A843;
  --page-glow: rgba(190, 127, 255, 0.30);
}
body[data-section="reflect"] {
  --page-accent: #B6A4D6;
  --page-secondary: #92BFE6;
  --page-glow: rgba(190, 127, 255, 0.30);
}

/* ─── 5. Universal — soft glow on titles + accent-coloured kickers ──────── */

body[data-section] .section__title {
  letter-spacing: -0.02em;
}
body[data-section] h1, body[data-section] h2 {
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.02));
}

/* Accent the active nav-icon glow per page */
body[data-section] .nav-icon[aria-current="page"] {
  color: var(--page-accent) !important;
  text-shadow: 0 0 12px var(--page-glow);
}

/* Scripture frame — universal neon-soft halo */
body[data-section] .scripture-frame {
  position: relative;
}
body[data-section] .scripture-frame::after {
  content: ''; position: absolute; inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--page-accent), var(--page-secondary, var(--page-accent)));
  opacity: 0.15;
  z-index: -1;
  filter: blur(8px);
  pointer-events: none;
}

/* Honor reduced-motion: drop glow animations only, keep static color */
@media (prefers-reduced-motion: reduce) {
  body[data-section] * { transition: none !important; }
}

/* Honor dark mode: don't fight the dark-hardened layer; just soften dot grid */
html[data-theme="dark"] body[data-section] {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
}