/* =============================================================================
   MyBO — WARM ORGANIC THEME OVERLAY   (preview flag: <html data-theme="warm">)
   -----------------------------------------------------------------------------
   Every rule here is scoped under [data-theme="warm"], so this stylesheet is
   COMPLETELY INERT unless the preview flag is set. It turns the dark "space /
   galaxy-glass" grammar into a warm, light, organic biology look:
     • cream paper base + deep-green ink            (no dark navy)
     • soft NEUTRAL shadows                          (no colored glow / nebula)
     • two-tone leaf→gold titles                     (no glow)
     • faint leaf-vein texture behind sections       (no blurred radial blooms)
   Reversible: remove the <link> in layout.blade.php (or the ?theme=warm flag).
   Specificity: [data-theme="warm"] .x  (0,1,1) cleanly beats redesign.css and the
   inline <style> blocks (0,1,0) without !important, except a few pseudo/compound
   rules that need a matching selector (handled inline below).
   ============================================================================= */

/* ---- 1. Token re-point (light values under the flag; names unchanged) -------- */
:root[data-theme="warm"] {
    --bg-950: #f0faf9;  --bg-900: #e6f5f3;  --bg-850: #d9efec;
    --bg-800: #cbe8e4;  --bg-700: #bce0db;

    --surface: rgba(18,72,70, .04);
    --surface-2: rgba(18,72,70, .07);
    --border: rgba(20,120,116, .16);
    --border-strong: rgba(20,120,116, .30);

    /* Light theme: brand turquoise becomes TEXT/icons on aqua-white, so these are deep
       enough to read (buttons keep white text on the deep gradient). */
    --brand: #0d867b;
    --brand-600: #0a6d64;
    --brand-glow: rgba(20,90,85, .14);   /* key lever: every var(--brand-glow) box-shadow becomes a soft neutral shadow */
    --violet: #0e8a80;   /* kept name → deep teal accent */
    --teal: #12a89b;
    --gold: #c8912f;
    --pink: #0e8a80;

    --text: #123b3a;
    --text-soft: #37605e;
    --muted: #4f6e6c;

    --grad-brand: linear-gradient(135deg, #0c7c70 0%, #0a6f84 100%);
    --grad-gold:  linear-gradient(135deg, #e6b552, #c8912f);
    /* The accent word in every page heading ("Biology EXPLORER", "About MYBO"). It
       traverses the palette — deep aqua through bright teal to deep teal-green — the
       way MyESO's runs gold → amber → deep green. The previous value was three
       near-identical dark teals, so the word read as flat colour rather than as a
       gradient. Angle matches the sibling sites' 92deg. */
    --grad-text:  linear-gradient(92deg, #0a7088 0%, #12a89a 45%, #0c5f57 100%);
    --grad-title: linear-gradient(100deg, #0e9184 0%, #0a7088 55%, #0f9a8c 100%);

    /* Footer is the one dark surface in the warm theme: a deep teal ink panel that
       ends the page instead of letting the cream wash trail off. Its own token set,
       so the footer rules in redesign.css need no per-theme duplicates. */
    --footer-bg: linear-gradient(165deg, #0e4a45 0%, #0b3a44 100%);
    --footer-text: #f1fbf9;
    --footer-muted: #a8ccc8;
    --footer-border: rgba(255, 255, 255, .13);
    --footer-accent: #5fdcca;   /* warm's --brand is a dark teal — unreadable on the ink panel */

    --shadow-sm: 0 4px 14px rgba(40, 50, 35, .08);
    --shadow-md: 0 14px 34px rgba(40, 50, 35, .12);
    --shadow-glow: 0 0 0 1px var(--border), 0 16px 40px rgba(40, 50, 35, .10);

    /* faint leaf-vein tile (matte, no blur) — used as a low-opacity texture layer */
    --tex-veins: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'%20viewBox='0%200%20150%20150'%3E%3Cg%20fill='none'%20stroke='%231a8f88'%20stroke-opacity='.55'%20stroke-width='1.1'%20stroke-linecap='round'%3E%3Cpath%20d='M12%20140%20C46%2096%2070%2074%20140%2010'/%3E%3Cpath%20d='M30%20128%20C46%20108%2052%20100%2066%2094'/%3E%3Cpath%20d='M48%20114%20C64%2096%2070%2090%2086%2084'/%3E%3Cpath%20d='M66%20100%20C82%2084%2088%2078%20104%2072'/%3E%3Cpath%20d='M84%2086%20C98%2074%20104%2068%20120%2062'/%3E%3Cpath%20d='M24%20120%20C34%20112%2040%20108%2046%20106'/%3E%3Cpath%20d='M100%2074%20C112%2066%20118%2062%20128%2058'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- 2. Global backdrop: cream wash + faint leaf-vein texture (no nebula) ---- */
[data-theme="warm"] body { background: var(--bg-950); color: var(--text); }
[data-theme="warm"] body::before {
    /* Clean aqua-white backdrop — no leaf-vein texture (it read as scratchy diagonal lines). */
    background: linear-gradient(180deg, #f0faf9 0%, #e6f5f3 55%, #ddf0ee 100%);
    background-repeat: no-repeat;
    opacity: 1;
}

/* ---- 3. Header / nav / footer / dropdown → cream translucent, ink text ------- */
[data-theme="warm"] .site-header { background: rgba(245,252,251, .74); border-bottom-color: var(--border); }
[data-theme="warm"] .site-header.scrolled { background: rgba(245,252,251, .94); box-shadow: var(--shadow-sm); }
[data-theme="warm"] .brand-title { color: var(--text); }
[data-theme="warm"] .brand img { filter: drop-shadow(0 4px 12px rgba(40, 50, 35, .22)); }
/* Mobile nav panel (the burger menu, ≤1024px). redesign.css paints it
   rgba(8,11,30,.98) — a dark-theme value — and only the link COLOURS below were
   re-themed, so on the default light theme the open menu was dark-teal text on
   near-black (3.2:1, fails AA) with the page showing through it. The override has
   to live inside the same max-width query, because that is the only place the
   panel exists as a fixed overlay. */
@media (max-width: 1024px) {
    [data-theme="warm"] .nav-links {
        /* fully opaque: an overlay menu has no reason to be see-through, and the hero
           behind it was still ghosting through the old .98/.99 alpha */
        background: #f6fdfc;
        border-bottom-color: var(--border-strong);
        box-shadow: var(--shadow-md);
    }
}
[data-theme="warm"] .nav-links a { color: var(--text-soft); }
[data-theme="warm"] .nav-links a:hover { color: var(--brand-600); background: var(--surface-2); }
[data-theme="warm"] .nav-links a.active { color: var(--brand-600); }
[data-theme="warm"] .nav-links a.active::before { background: var(--brand); box-shadow: none; }
[data-theme="warm"] .nav-toggle { color: var(--text); background: var(--surface); border-color: var(--border-strong); }
[data-theme="warm"] .dropdown { background: rgba(245,252,251, .98); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
/* footer intentionally NOT cream — it's the deep teal panel defined by the --footer-*
   tokens above; only the accent needs lifting (warm's --brand is too dark on it). */

/* ---- 4. Buttons / floating controls: drop colored glow → soft neutral -------- */
[data-theme="warm"] .btn-gold { box-shadow: var(--shadow-sm); }
/* MyAO's breathing blur-glow (a lit halo) needs a dark backdrop — on cream it just
   muddied the button, so the ::before stays off. Same cue instead, done with a soft
   coloured shadow that does read on a light background: it breathes, nothing moves. */
[data-theme="warm"] .btn-cta::before { display: none; }
[data-theme="warm"] .btn-cta { animation: ctaGlowWarm 2.8s ease-in-out infinite; }
@keyframes ctaGlowWarm {
    0%, 100% { box-shadow: 0 8px 20px rgba(14, 157, 143, .28); }
    50%      { box-shadow: 0 12px 30px rgba(14, 157, 143, .55), 0 0 0 4px rgba(37, 203, 187, .16); }
}
[data-theme="warm"] .btn-cta:hover { box-shadow: 0 14px 34px rgba(14, 157, 143, .55); }
@media (prefers-reduced-motion: reduce) { [data-theme="warm"] .btn-cta { animation: none; } }
[data-theme="warm"] .to-top { background: linear-gradient(140deg, #12a89b, #12a89b);
    border-color: rgba(20,120,116, .35); box-shadow: var(--shadow-md); }
[data-theme="warm"] .to-top:hover { box-shadow: var(--shadow-md); }
[data-theme="warm"] .wa-float { box-shadow: 0 8px 22px rgba(40, 50, 35, .18); }
[data-theme="warm"] .wa-float:hover { box-shadow: 0 12px 30px rgba(40, 50, 35, .24); }

/* ---- 5. Section heads & gradient titles (two-tone leaf→gold via tokens) ------ */
[data-theme="warm"] .gx-head h2 { color: var(--text); }
[data-theme="warm"] .gx-head p { color: var(--text-soft); }
/* warm has no busy animated field behind it → drop the dark-theme legibility shadows */
[data-theme="warm"] :is(.page-hero h1, .section-title, .gx-head h2, .gx-head p, .lead, .gx-glass.prose > h2, .gx-glass.prose > h3) { text-shadow: none; }
[data-theme="warm"] :is(.grad-text, .section-title .grad) { filter: none; }
/* eyebrow chips: the dark theme's mint (#9fe3bd) is illegible on cream → deep green */
[data-theme="warm"] .eyebrow { color: var(--brand-600); background: rgba(18,168,155, .10); border-color: var(--border-strong); }

/* ---- 6. Glass panels: dark→cream, white text→deep-green ink, drop bloom ------ */
[data-theme="warm"] .gx-glass {
    background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(244,251,250, .96));
    border-color: var(--border);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
[data-theme="warm"] .gx-glass:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .7);
}
[data-theme="warm"] .gx-glass h3,
[data-theme="warm"] .gx-glass h4 { color: var(--text); }
[data-theme="warm"] .gx-glass p { color: var(--text-soft); }
[data-theme="warm"] .gx-glass strong { color: var(--text); }
[data-theme="warm"] .gx-glass a:not(.btn) { color: var(--brand-600); }

/* prose (dark-panel light-ink overrides) → ink on cream */
[data-theme="warm"] .gx-glass.prose,
[data-theme="warm"] .gx-glass .prose { color: var(--text-soft); }
[data-theme="warm"] .gx-glass.prose h2, [data-theme="warm"] .gx-glass .prose h2,
[data-theme="warm"] .gx-glass.prose h3, [data-theme="warm"] .gx-glass .prose h3,
[data-theme="warm"] .gx-glass.prose h4, [data-theme="warm"] .gx-glass .prose h4 { color: var(--text); }
[data-theme="warm"] .gx-glass.prose p, [data-theme="warm"] .gx-glass .prose p,
[data-theme="warm"] .gx-glass.prose li, [data-theme="warm"] .gx-glass .prose li { color: var(--text-soft); }
[data-theme="warm"] .gx-glass.prose strong, [data-theme="warm"] .gx-glass .prose strong,
[data-theme="warm"] .gx-glass.prose b, [data-theme="warm"] .gx-glass .prose b { color: var(--text); }
[data-theme="warm"] .gx-glass.prose a:not(.btn), [data-theme="warm"] .gx-glass .prose a:not(.btn) { color: var(--brand-600); }
[data-theme="warm"] .gx-glass.prose th, [data-theme="warm"] .gx-glass .prose th { background: rgba(18,168,155, .14); color: var(--text); }
[data-theme="warm"] .gx-glass.prose th, [data-theme="warm"] .gx-glass .prose th,
[data-theme="warm"] .gx-glass.prose td, [data-theme="warm"] .gx-glass .prose td { border-color: var(--border); }
[data-theme="warm"] .gx-glass.prose img, [data-theme="warm"] .gx-glass .prose img { box-shadow: var(--shadow-sm); }

/* ---- 7. Nebula pseudo-elements & icon "light source" → flat chips ------------ */
[data-theme="warm"] .gx-neb::before,
[data-theme="warm"] .gx-neb::after { display: none; }        /* kill blurred bloom + starfield */
[data-theme="warm"] .gx-neb:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
[data-theme="warm"] .gx-neb .halo,
[data-theme="warm"] .gx-neb .gx-icon,
[data-theme="warm"] .gx-neb .gx-jicon {
    background: linear-gradient(150deg, rgba(18,168,155, .16), rgba(18,168,155, .14));
    border-color: var(--border-strong);
    box-shadow: none;
}
[data-theme="warm"] .gx-neb .gx-emoji,
[data-theme="warm"] .gx-neb .gx-ficon,
[data-theme="warm"] .gx-neb .medal { filter: none; }

/* boxed icon (shared) */
[data-theme="warm"] .gx-icon {
    background: linear-gradient(150deg, rgba(18,168,155, .16), rgba(18,168,155, .14));
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}
[data-theme="warm"] .gx-icon svg { color: var(--brand-600); filter: none; }

/* inner-page hero badge + results mascot: neutral drops */
[data-theme="warm"] .page-hero .badge-mini { filter: drop-shadow(0 12px 26px rgba(40, 50, 35, .20)); }
[data-theme="warm"] .result-hero > img.result-mascot { filter: drop-shadow(0 10px 22px rgba(40, 50, 35, .20)); }

/* =============================================================================
   HOME — inline-block overrides (space residue → cream/leaf; drop every glow)
   ============================================================================= */
/* hero */
[data-theme="warm"] .hero-badge img { filter: drop-shadow(0 20px 40px rgba(40, 50, 35, .22)); }
[data-theme="warm"] .badge-glow { display: none; }                    /* pulsing radial blob */
[data-theme="warm"] .hero-date .dot { box-shadow: none; }

/* quick-fact stat strip */
[data-theme="warm"] .gx-stat { background: none; }
[data-theme="warm"] .gx-stat span { color: var(--muted); }

/* ring counters (blue space gradient → leaf→gold + green ring) */
[data-theme="warm"] .gx-count .ring { background: radial-gradient(circle at 50% 42%, rgba(18,168,155, .12), transparent 62%);
    border-color: rgba(20,120,116, .28); }
[data-theme="warm"] .gx-count .ring::before { border-color: rgba(20,120,116, .16); border-top-color: var(--teal); }
[data-theme="warm"] .gx-count b { background: var(--grad-title); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="warm"] .gx-count span { color: var(--text-soft); }

/* important-dates timeline (navy node → cream/green) */
[data-theme="warm"] .gx-timeline::before { background: linear-gradient(90deg, transparent, var(--brand), var(--teal), transparent); opacity: .5; }
[data-theme="warm"] .gx-tl .node {
    background: linear-gradient(150deg, rgba(18,168,155, .18), rgba(18,168,155, .16));
    box-shadow: 0 0 0 6px rgba(245,252,251, .9), 0 0 0 7px var(--border-strong), var(--shadow-sm);
}
[data-theme="warm"] .gx-tl h3 { color: var(--text); }
[data-theme="warm"] .gx-tl .date { color: var(--text-soft); }
[data-theme="warm"] .gx-tl .node .gx-ico { color: var(--brand-600); }
/* highlighted (competition day): static gold ring, no pulsing glow */
[data-theme="warm"] .gx-tl.is-hl .node { background: linear-gradient(150deg, rgba(230, 181, 82, .30), rgba(200, 145, 47, .22));
    box-shadow: 0 0 0 6px rgba(245,252,251, .9), 0 0 0 8px rgba(200, 145, 47, .5), var(--shadow-sm); animation: none; }
[data-theme="warm"] .gx-tl.is-hl h3 { color: #9a6a10; }
[data-theme="warm"] .gx-tl.is-hl .date { color: var(--text); }

/* objectives feature halos */
[data-theme="warm"] .gx-feature .halo {
    background: linear-gradient(140deg, rgba(18,168,155, .18), rgba(18,168,155, .16));
    border-color: var(--border-strong); box-shadow: var(--shadow-sm);
}
[data-theme="warm"] .gx-feature .halo svg { color: var(--brand-600); filter: none; }

/* categories */
[data-theme="warm"] .gx-cat-body h3 { color: var(--text); }
[data-theme="warm"] .gx-cat-row + .gx-cat-row { border-top-color: var(--border); }
[data-theme="warm"] .gx-cat-row .lbl { color: var(--text); }
[data-theme="warm"] .gx-cat-row .val { color: var(--text-soft); }
[data-theme="warm"] .gx-cat-row .val::before { color: var(--muted); }
[data-theme="warm"] .gx-cat-planet { filter: drop-shadow(0 12px 26px rgba(40, 50, 35, .28)); }
/* .gx-glass above sets border-color on all four sides, which flattens .gx-cat's 3px
   accent stripe to the neutral border token. Put the card's accent back. */
[data-theme="warm"] .gx-cat.gx-glass { border-top-color: var(--c); }
[data-theme="warm"] .gx-cat-mascot { filter: drop-shadow(0 16px 30px rgba(40, 50, 35, .25)); }

/* stages / journey */
[data-theme="warm"] .gx-jstep::before { background: linear-gradient(180deg, var(--brand), var(--teal), var(--brand)); opacity: .5; }
[data-theme="warm"] .jnum { box-shadow: 0 0 0 6px rgba(245,252,251, .92), 0 0 0 7px var(--border-strong), var(--shadow-sm); }
[data-theme="warm"] .gx-jicon {
    background: linear-gradient(140deg, rgba(18,168,155, .18), rgba(18,168,155, .16));
    border-color: var(--border-strong); box-shadow: var(--shadow-sm);
}
[data-theme="warm"] .gx-jicon .gx-ico { color: var(--brand-600); }

/* format cards */
[data-theme="warm"] .gx-ficon { filter: none; }
[data-theme="warm"] .gx-fcard .lbl { color: var(--text); }
[data-theme="warm"] .gx-fcard b { color: var(--brand-600); }

/* prices (blue gradient → leaf→gold; navy → cream) */
[data-theme="warm"] .gx-price { background: linear-gradient(180deg, rgba(18,168,155, .12), rgba(18,168,155, .08));
    border-color: var(--border-strong); }
[data-theme="warm"] .gx-price .tag { color: var(--brand-600); }
[data-theme="warm"] .gx-price .amt { background: var(--grad-title); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="warm"] .gx-price p { color: var(--text-soft); }
[data-theme="warm"] .gx-price .pill { box-shadow: var(--shadow-sm); }
[data-theme="warm"] .gx-price .pill-muted { background: #cfc7b2; color: #4a4636; box-shadow: none; }
[data-theme="warm"] .gx-price.is-active { border-color: rgba(18,168,155, .55); box-shadow: var(--shadow-md); }

/* syllabus chips */
[data-theme="warm"] .gx-chip { color: var(--text); background: rgba(18,168,155, .14); border-color: var(--border-strong); }
[data-theme="warm"] .gx-chip:hover { background: rgba(18,168,155, .24); color: var(--text); }

/* awards */
[data-theme="warm"] .gx-award { box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .6); }
[data-theme="warm"] .gx-award .medal { filter: none; }
[data-theme="warm"] .gx-award .medal .gx-ico { color: var(--c, var(--gold)); }

/* workshop band: royal-purple nebula → warm sage/cream band, gold hairlines */
[data-theme="warm"] .gx-workshop-sec::before {
    background:
        var(--tex-veins),
        linear-gradient(158deg, #e8f6f4 0%, #ddf0ee 46%, #d4ece9 100%);
    background-size: 300px 300px, cover;
    background-repeat: repeat, no-repeat;
    border-top-color: rgba(200, 145, 47, .5);
    border-bottom-color: rgba(200, 145, 47, .32);
}
[data-theme="warm"] .ws-stars { display: none; }                     /* sparkle field is space residue */
[data-theme="warm"] .gx-workshop {
    border-color: var(--border-strong); border-top-color: var(--gold);
    background: linear-gradient(180deg, #ffffff, #eef7f5);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .9);
}
[data-theme="warm"] .gx-workshop::after { display: none; }           /* animated gold LED beam glow */
[data-theme="warm"] .gx-head .eyebrow.gx-eyebrow-gold { color: #9a6a10; background-color: rgba(200, 145, 47, .12); border-color: rgba(200, 145, 47, .34); }
[data-theme="warm"] .section-title .grad.gx-grad-gold { background: linear-gradient(115deg, #d79a2b, #b9791f);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* workshop inner cards: dark navy → soft cream, ink text.
   NOTE: the workshop's own block in home.blade.php ships later in the cascade and wins
   for these boxes — change the workshop there, not here. */
[data-theme="warm"] .gx-workshop .wcard,
[data-theme="warm"] .gx-workshop .gx-info .box { background: linear-gradient(180deg, #f7fcfb, #eef7f5); border-color: var(--border); }
[data-theme="warm"] .wcard, [data-theme="warm"] .gx-info .box { background: #f7fcfb; border-color: var(--border); }
[data-theme="warm"] .gx-workshop .wtabs, [data-theme="warm"] .wtabs { border-bottom-color: var(--border); }
[data-theme="warm"] .gx-workshop .wtab, [data-theme="warm"] .wtab { color: var(--muted); }
[data-theme="warm"] .gx-workshop .wtab:hover, [data-theme="warm"] .wtab:hover { color: var(--text); background: rgba(200, 145, 47, .12); }
[data-theme="warm"] .gx-workshop .wtab[aria-selected="true"], [data-theme="warm"] .wtab[aria-selected="true"] { color: #9a6a10; background: rgba(200, 145, 47, .14); border-bottom-color: var(--gold); }
[data-theme="warm"] .gx-workshop .btn-ghost { background: #e6f4f2; color: var(--text); border-color: var(--border-strong); }
[data-theme="warm"] .gx-workshop .btn-ghost:hover { background: #dbeeeb; border-color: var(--brand); }
[data-theme="warm"] .wcard h3 .gx-ico,
[data-theme="warm"] .gx-info .box h3 .gx-ico,
[data-theme="warm"] .gx-syl h3 .gx-ico,
[data-theme="warm"] .gx-cat-row .lbl .gx-ico,
[data-theme="warm"] .wcard strong .gx-ico { color: var(--brand-600); }

/* posters + info */
[data-theme="warm"] .gx-poster { border-color: var(--border-strong); }
[data-theme="warm"] .gx-poster:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
[data-theme="warm"] .gx-poster .gx-zoom { background: rgba(245,252,251, .9); border-color: var(--border-strong); color: var(--brand-600); }
[data-theme="warm"] .gx-info .box p { color: var(--text-soft); }
[data-theme="warm"] .gx-divider { background: linear-gradient(90deg, transparent, var(--border-strong), transparent); }

/* quick links + final CTA (green radial glow → cream/sage panel) */
[data-theme="warm"] .gx-link:hover { border-color: var(--brand); box-shadow: var(--shadow-md); }
[data-theme="warm"] .gx-launch {
    background: linear-gradient(160deg, #e8f6f4, #ddf0ee);
    border-color: var(--border-strong); box-shadow: var(--shadow-md);
}
[data-theme="warm"] .gx-launch::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: var(--tex-veins); background-size: 300px 300px; opacity: .5; }
[data-theme="warm"] .gx-launch::after { display: none; }
[data-theme="warm"] .gx-launch h2 { color: var(--text); }
[data-theme="warm"] .gx-launch .lead { color: var(--text-soft); }
[data-theme="warm"] .gx-mascot { filter: drop-shadow(0 18px 36px rgba(40, 50, 35, .25)); }

/* popup poster (blue/violet gradient + glow → cream frame) */
[data-theme="warm"] .popup-overlay { background: rgba(18,40,40, .55); }
[data-theme="warm"] .popup-dialog {
    background: linear-gradient(135deg, #12a89b, #12a89b 55%, #c8912f);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), var(--shadow-md);
}
[data-theme="warm"] .popup-close { background: #0e8a80; border-color: rgba(255, 255, 255, .85); }
[data-theme="warm"] .popup-close:hover { background: #123b3a; }

/* =============================================================================
   ABOUT-US — inline overrides
   ============================================================================= */
[data-theme="warm"] .mybo-plate { background: linear-gradient(180deg, #ffffff, #eef7f5);
    box-shadow: var(--shadow-md), inset 0 0 0 1px var(--border); }
[data-theme="warm"] .about-intro p { color: var(--text-soft); }
[data-theme="warm"] .wcp-body h3 { color: var(--text); }
[data-theme="warm"] .wcp-body p { color: var(--text-soft); }
[data-theme="warm"] .wcp-mascot { filter: drop-shadow(0 16px 30px rgba(40, 50, 35, .25)); }

/* =============================================================================
   REGISTRATION — inline overrides
   ============================================================================= */
[data-theme="warm"] .steps::before { background: linear-gradient(180deg, var(--border-strong), rgba(20,120,116, .06)); }
[data-theme="warm"] .step-num { box-shadow: var(--shadow-sm), 0 0 0 5px rgba(245,252,251, .95); }
[data-theme="warm"] .step-row p { color: var(--text-soft); }
[data-theme="warm"] .step-row a { color: var(--brand-600); }
[data-theme="warm"] .vt-list { border-left-color: var(--border); }
[data-theme="warm"] .vt-list, [data-theme="warm"] .vt-head { border-color: var(--border); }
[data-theme="warm"] .vt-head { border-bottom-color: var(--border); }
[data-theme="warm"] .vt-head h3 { color: var(--text); }
[data-theme="warm"] .videos-count { color: var(--brand-600); background: rgba(18,168,155, .14); border-color: var(--border-strong); }
[data-theme="warm"] .vt-item { color: var(--text-soft); border-bottom-color: var(--border); }
[data-theme="warm"] .vt-item:hover { background: rgba(18,168,155, .12); }
[data-theme="warm"] .vt-item.is-active { background: rgba(18,168,155, .22); color: var(--text); }
[data-theme="warm"] .vt-d { color: var(--muted); }

/* =============================================================================
   Botanical illustration chips (used when icons are swapped to <x-bio-illo>)
   ============================================================================= */
[data-theme="warm"] .bio-illo { display: block; }
[data-theme="warm"] .halo .bio-illo,
[data-theme="warm"] .gx-icon .bio-illo,
[data-theme="warm"] .gx-jicon .bio-illo,
[data-theme="warm"] .gx-ficon .bio-illo { width: 60%; height: 60%; }

/* =============================================================================
   Shared components the light theme didn't yet re-theme — these kept a dark
   translucent fill + light text, which went light-on-light on the aqua base.
   ============================================================================= */
/* FAQ accordion (faqs page) */
[data-theme="warm"] .faq-item { background: #ffffff; border-color: var(--border); }
[data-theme="warm"] .faq-item:hover { border-color: var(--border-strong); }
[data-theme="warm"] .faq-item[open] { background: #f4fbfa; border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
[data-theme="warm"] .faq-item summary { color: var(--text); }
[data-theme="warm"] .faq-item summary .chev { color: var(--brand-600); }
[data-theme="warm"] .faq-answer { color: var(--text-soft); }

/* Past-year-question tiles (PYQ page) */
[data-theme="warm"] .pyq-item { background: #ffffff; border-color: var(--border); color: var(--text-soft); }
[data-theme="warm"] .pyq-item:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
[data-theme="warm"] .pyq-item b { color: var(--text); }
[data-theme="warm"] .pyq-item span { color: var(--muted); }

/* Reading-materials book tiles — hover title kept a near-white colour */
[data-theme="warm"] .book-tile:hover h3 { color: var(--brand-600); }

/* =============================================================================
   VIBRANCY LAYER — depth and rhythm for the light theme
   -----------------------------------------------------------------------------
   Diagnosis: every section sat on the same near-white value, every card was the
   same white, and every icon chip the same flat 16% turquoise. With no value and
   no hue contrast anywhere the eye has nothing to hold — THAT is what read as
   "plain", not the lightness itself. The dark theme's colour cues (per-card --a
   accent, hero aura, nebula bloom) were switched OFF in the conversion rather
   than translated to a light key, so all the colour drained out with the dark.

   Four moves, in order of impact:
     1. AMBIENT FIELD — the flat vertical wash becomes a slow-drifting field of
                        soft turquoise / aqua / gold blooms. Depth without dark.
     2. RHYTHM        — alternating full-bleed bands (.gx-band) so the page reads
                        as chapters instead of one continuous scroll.
     3. CARD ENERGY   — --a is honoured again: accent-tinted icon chip, accent
                        top rule, accent corner wash, accent-tinted hover lift.
     4. ACCENT POPS   — hero aura, gradient rule under section titles, richer
                        eyebrows, and teal-tinted (not grey) shadows so white
                        cards actually lift off the field.
   Everything stays scoped under [data-theme="warm"]; dark is untouched. These
   rules sit last on purpose — several of them re-enable something an earlier
   block above switched off, and equal specificity means source order decides.
   ============================================================================= */

/* ---- 0. Shadows: neutral grey → teal-tinted, and deeper -------------------- */
/* A grey shadow on an aqua-white field reads as dirt; the same shadow tinted with
   the background's own hue reads as depth. This one token change lifts every card,
   button and chip on the site, because everything already routes through it. */
:root[data-theme="warm"] {
    --shadow-sm: 0 2px 6px rgba(10, 74, 70, .06), 0 8px 20px rgba(10, 74, 70, .08);
    --shadow-md: 0 4px 10px rgba(10, 74, 70, .06), 0 18px 44px rgba(10, 74, 70, .13);
    --shadow-glow: 0 0 0 1px var(--border), 0 20px 50px rgba(10, 74, 70, .14);
}

/* ---- 1. Ambient colour field ---------------------------------------------- */
/* Four large, very soft blooms — turquoise (brand), aqua-blue (depth), gold
   (warmth), turquoise again — over the aqua-white base. Individually invisible;
   together they give the page a sky instead of a wall. The drift is slow enough
   (40s, ±2%) to never be "an animation" — it just stops the page feeling static. */
[data-theme="warm"] body::before {
    background:
        radial-gradient(900px 700px at 84% -8%,  rgba(37, 203, 187, .30), transparent 62%),
        radial-gradient(780px 640px at  2% 22%,  rgba(31, 159, 184, .22), transparent 60%),
        radial-gradient(860px 660px at 98% 56%,  rgba(230, 181,  82, .20), transparent 62%),
        radial-gradient(900px 720px at 10% 88%,  rgba(37, 203, 187, .24), transparent 62%),
        linear-gradient(180deg, #f5fdfc 0%, #e9f7f5 48%, #dff2ef 100%);
    background-repeat: no-repeat;
    opacity: 1;
    animation: fieldDrift 40s ease-in-out infinite alternate;
}
/* scale > 1 so the drift never exposes a bare edge */
@keyframes fieldDrift {
    from { transform: translate3d(0, 0, 0) scale(1.04); }
    to   { transform: translate3d(-2.2%, -1.6%, 0) scale(1.10); }
}
@media (prefers-reduced-motion: reduce) { [data-theme="warm"] body::before { animation: none; } }

/* ---- 2. Section rhythm: alternating full-bleed bands ----------------------- */
/* .section is already position:relative and its .container already sits at z-index 1,
   so the band is just an inset:0 pseudo-element — no wrapper markup needed. The
   hairlines matter as much as the fill: they are what makes it read as a deliberate
   band rather than a smudge. */
[data-theme="warm"] .gx-band { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
[data-theme="warm"] .gx-band::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    /* deliberately DARKER than the field, not lighter — a band lighter than its
       surroundings on an already-pale page is invisible */
    background: linear-gradient(180deg, #eefaf8 0%, #d6edea 100%);
    border-top: 1px solid rgba(20, 120, 116, .22);
    border-bottom: 1px solid rgba(20, 120, 116, .22);
}
/* warm variant, so consecutive bands don't read as one repeated stripe */
[data-theme="warm"] .gx-band.gx-band-gold::before {
    background: linear-gradient(180deg, #fffaf0 0%, #f7ead2 100%);
    border-top-color: rgba(200, 145, 47, .34);
    border-bottom-color: rgba(200, 145, 47, .28);
}

/* ---- 2b. Deep band — the page's second value anchor ------------------------ */
/* The workshop band is the one place on the page with real value contrast, and it
   is the one place that never read as plain. A light page needs at least two of
   those or the single dark section reads as an island. Awards takes the second:
   it is late enough to break the long pale run, and white award cards on deep teal
   are the strongest thing on the lower half of the page. Same teal recipe as the
   workshop band so the two read as a pair rather than two unrelated dark blocks. */
[data-theme="warm"] .gx-band.gx-band-deep::before {
    background:
        radial-gradient(90% 70% at 50% -8%,  rgba(60, 220, 205, .20), transparent 60%),
        radial-gradient(60% 62% at 90% 108%, rgba(255, 207, 106, .16), transparent 62%),
        linear-gradient(158deg, #0c6b66 0%, #0a5a5c 46%, #084f52 100%);
    border-top: 2px solid rgba(255, 207, 106, .45);
    border-bottom: 2px solid rgba(12, 120, 116, .55);
}
/* copy sitting directly ON the deep band flips to light ink */
[data-theme="warm"] .gx-band-deep .gx-head h2,
[data-theme="warm"] .gx-band-deep .section-title { color: #eafaf8; }
[data-theme="warm"] .gx-band-deep .section-title .grad {
    background: linear-gradient(100deg, #7fe8db 0%, #ffcf6a 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
[data-theme="warm"] .gx-band-deep .gx-head p,
[data-theme="warm"] .gx-band-deep .gx-head .lead { color: #c2e7e2; }
[data-theme="warm"] .gx-band-deep .gx-head .lead strong { color: #ffe0a0; }
[data-theme="warm"] .gx-band-deep .eyebrow {
    color: #ffe0a0; background: rgba(255, 255, 255, .12); border-color: rgba(255, 207, 106, .42);
    box-shadow: none;
}
[data-theme="warm"] .gx-band-deep .gx-head .section-title::after {
    background: linear-gradient(90deg, #7fe8db, var(--gold));
}
/* cards on a dark band need their own edge, or they bleed into it */
[data-theme="warm"] .gx-band-deep .gx-glass {
    box-shadow: 0 24px 52px rgba(2, 34, 32, .38), 0 0 0 1px rgba(255, 255, 255, .5);
}

/* ---- 3. Card energy: give --a back to the light theme ---------------------- */
/* Base card: white top → faint aqua bottom. The gradient is small (4%) but it stops
   the card being one dead fill and gives the shadow something to sit against. */
[data-theme="warm"] .gx-glass {
    background: linear-gradient(180deg, #ffffff 0%, #f6fcfb 100%);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .9);
}
/* Accent top rule — 3px of the card's own colour. Cheapest possible way to make a
   row of white cards read as three different things. */
[data-theme="warm"] .gx-neb.gx-glass {
    border-top: 3px solid var(--a, var(--brand));
}
/* Accent corner wash (the dark theme's nebula bloom, re-keyed for light): a tinted
   radial in the top-right at low opacity instead of a blurred glow. */
[data-theme="warm"] .gx-neb::before {
    content: ""; display: block; position: absolute; top: -40%; right: -28%;
    width: 78%; aspect-ratio: 1; border-radius: 50%; z-index: 0; pointer-events: none;
    background: radial-gradient(circle, var(--a, var(--brand)), transparent 68%);
    opacity: .13; filter: blur(20px);
    transition: opacity .4s ease, transform .4s ease;
}
[data-theme="warm"] .gx-neb:hover::before { opacity: .22; transform: scale(1.16); }
[data-theme="warm"] .gx-neb:hover {
    border-color: var(--border-strong);
    border-top-color: var(--a, var(--brand));
    box-shadow: var(--shadow-md), 0 22px 46px -18px var(--a, var(--brand));
}
/* Icon chip picks up the card accent instead of being turquoise on every card.
   Plain-value fallback first for engines without color-mix(). */
[data-theme="warm"] .gx-neb .halo,
[data-theme="warm"] .gx-neb .gx-icon,
[data-theme="warm"] .gx-neb .gx-jicon {
    background: linear-gradient(150deg, rgba(18, 168, 155, .18), rgba(18, 168, 155, .10));
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}
@supports (background: color-mix(in srgb, red, blue)) {
    [data-theme="warm"] .gx-neb .halo,
    [data-theme="warm"] .gx-neb .gx-icon,
    [data-theme="warm"] .gx-neb .gx-jicon {
        background: linear-gradient(150deg,
            color-mix(in srgb, var(--a, var(--brand)) 26%, #fff),
            color-mix(in srgb, var(--a, var(--brand)) 10%, #fff));
        border-color: color-mix(in srgb, var(--a, var(--brand)) 38%, transparent);
        box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--a, var(--brand)) 55%, transparent);
    }
}

/* ---- 4a. Hero aura -------------------------------------------------------- */
/* The badge was floating on nothing once the dark theme's glow was killed. Same
   idea re-keyed for light: a turquoise core fading through gold, low opacity, no
   hard edge. It anchors the badge and puts colour at the top of the page. */
[data-theme="warm"] .badge-glow {
    display: block;
    /* turquoise-led: an even turquoise/gold split went muddy-yellow behind the badge,
       so gold is only a thin warm rim at the outside */
    background: radial-gradient(circle,
        rgba(37, 203, 187, .52) 0%,
        rgba(63, 214, 192, .30) 42%,
        rgba(255, 207, 106, .12) 64%,
        transparent 74%);
    filter: blur(26px);
}
[data-theme="warm"] .hero-badge img { filter: drop-shadow(0 22px 44px rgba(10, 90, 85, .28)); }
/* the date chip was the one grey element in an otherwise branded hero */
[data-theme="warm"] .hero-date {
    color: var(--text);
    background: linear-gradient(135deg, rgba(37, 203, 187, .16), rgba(255, 207, 106, .12));
    border: 1px solid rgba(20, 120, 116, .26);
    box-shadow: 0 2px 10px rgba(10, 74, 70, .07);
}
[data-theme="warm"] .hero-date strong { color: var(--brand-600); }
[data-theme="warm"] .hero-date .dot { background: var(--teal); box-shadow: 0 0 0 4px rgba(37, 203, 187, .18); }

/* ---- 4b. Section titles get a gradient rule -------------------------------- */
/* .gx-head is centred already, so the rule centres with it. Only inside .gx-head:
   in-card titles keep their plain treatment. */
[data-theme="warm"] .gx-head .section-title::after {
    content: ""; display: block; width: 68px; height: 4px; border-radius: 999px;
    margin: 16px auto 0;
    background: linear-gradient(90deg, var(--teal), var(--gold));
}
[data-theme="warm"] .gx-workshop-sec .gx-head .section-title::after {
    background: linear-gradient(90deg, var(--gold), #e6b552);
}

/* ---- 4c. Eyebrow chips: flat tint → gradient pill -------------------------- */
[data-theme="warm"] .eyebrow {
    color: var(--brand-600);
    background: linear-gradient(135deg, rgba(37, 203, 187, .18), rgba(31, 159, 184, .12));
    border-color: rgba(20, 120, 116, .28);
    box-shadow: 0 2px 8px rgba(10, 74, 70, .06);
}
[data-theme="warm"] .gx-head .eyebrow.gx-eyebrow-gold {
    background: linear-gradient(135deg, rgba(230, 181, 82, .24), rgba(200, 145, 47, .14));
}

/* ---- 4d. Quick-facts strip: the one thing above the fold that stayed grey --- */
[data-theme="warm"] .gx-stats {
    background: linear-gradient(120deg, rgba(37, 203, 187, .12), rgba(255, 255, 255, .96) 42%, rgba(230, 181, 82, .12));
}
[data-theme="warm"] .gx-stat b { background: var(--grad-title); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- 4e. Counter rings: give the ring real colour -------------------------- */
[data-theme="warm"] .gx-count .ring {
    background: radial-gradient(circle at 50% 42%, rgba(37, 203, 187, .20), rgba(255, 255, 255, .85) 66%);
    border-color: rgba(20, 120, 116, .30);
    box-shadow: var(--shadow-sm);
}
[data-theme="warm"] .gx-count .ring::before { border-top-color: var(--gold); }

/* ---- 4f. Final CTA: the page's last beat should be its brightest ----------- */
/* Was a pale sage panel carrying the leaf-vein tile — the same tile that was pulled
   off the backdrop for reading as scratches. It reads the same way here, so it goes,
   and the panel becomes a turquoise→cream wash inside a gold ring instead. Kept light
   on purpose: the footer directly below is the dark note, and two dark blocks in a
   row would swallow the call to action. */
[data-theme="warm"] .gx-launch {
    background:
        radial-gradient(120% 100% at 50% -20%, rgba(255, 255, 255, .85), transparent 62%),
        linear-gradient(150deg, #d3efeb 0%, #eaf8f6 44%, #fbf1dc 100%);
    border: 2px solid rgba(200, 145, 47, .38);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .9);
}
[data-theme="warm"] .gx-launch::before { display: none; }   /* leaf-vein tile → scratches */
[data-theme="warm"] .gx-launch h2 { color: #0b4a45; }

/* ---- 4g. Timeline + journey nodes: flat tint → brand gradient -------------- */
[data-theme="warm"] .gx-tl .node,
[data-theme="warm"] .gx-jicon {
    background: linear-gradient(150deg, rgba(37, 203, 187, .26), rgba(31, 159, 184, .16));
    border-color: rgba(20, 120, 116, .30);
}
[data-theme="warm"] .gx-timeline::before,
[data-theme="warm"] .gx-jstep::before { opacity: .8; }
