/*
 * ============================================================
 * THEME — DARK MODE SPECIAL CASES
 * Loaded last. Most of the dark theme is produced automatically
 * by the [data-theme="dark"] variable overrides in tokens.css
 * cascading through every existing CSS file. This file only
 * carries the handful of rules that a variable swap alone can't
 * express (multi-color decorative tags, filter-based effects).
 * ============================================================
 */

/* Cinematic-section benefit tags: swap the light pastel chips for
   deep tinted glass so the (fixed) light heading text stays readable. */
[data-theme="dark"] #cinematic-wrapper .clip-title.theme-blue   { background-color: rgba(66, 153, 225, 0.14); border-right-color: #63B3ED; }
[data-theme="dark"] #cinematic-wrapper .clip-title.theme-red    { background-color: rgba(252, 129, 129, 0.14); border-right-color: #FEB2B2; }
[data-theme="dark"] #cinematic-wrapper .clip-title.theme-green  { background-color: rgba(104, 211, 145, 0.14); border-right-color: #9AE6B4; }
[data-theme="dark"] #cinematic-wrapper .clip-title.theme-purple { background-color: rgba(183, 148, 244, 0.14); border-right-color: #D6BCFA; }
[data-theme="dark"] #cinematic-wrapper .ribbon-attachment { background: rgba(27, 37, 64, 0.9); }

/* Interactive background grid: the flag pattern is tuned (via CSS filter)
   to sit faintly on a white page — re-tune it to read on a dark one. */
[data-theme="dark"] .de-flag {
    filter: grayscale(100%) contrast(60%) brightness(55%);
}
[data-theme="dark"] .de-flag.hovered {
    filter: grayscale(0%) saturate(140%) contrast(100%) brightness(105%);
}

/* Placement banner glow accent reads too hot (and, now, mismatched against
   its own now-blue .btn-cta) against the near-black dark-mode card — a
   soft blue glow instead keeps the whole card reading as one lit surface. */
[data-theme="dark"] .placement-card:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 34px rgba(76, 141, 255, 0.22);
}

/* .btn-dark-reserve's light-mode gradient runs var(--primary-navy) →
   var(--primary-navy-dark); in dark mode --primary-navy becomes a pale
   navy-white for legible headings, which turned this button into a
   generic black-to-white gradient. Give it its own on-brand dark
   treatment instead: two already-dark surface tones plus an electric-blue
   rim on hover — the same primary accent every .btn-cta now uses — so it
   reads as another confident "primary-family" action, not a muted gray
   button, and stays consistent with blue being the dominant interactive
   accent. */
[data-theme="dark"] .btn-dark-reserve {
    background: linear-gradient(135deg, var(--color-surface-elevated), var(--bg-base));
    border-color: rgba(76, 141, 255, 0.3);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .btn-dark-reserve:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 15px 35px rgba(76, 141, 255, 0.3), 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* Same var(--primary-navy) repurposing bug as .btn-dark-reserve above,
   here on the student dashboard's "My Exams" placement-test CTA banner
   (.student-cta-banner, css/pages/student-dashboard.css): its gradient
   also runs var(--primary-navy) -> var(--primary-navy-dark), and in dark
   mode that turned into a near-white-to-navy diagonal with the banner's
   own hardcoded white heading text going nearly invisible against the
   near-white half. Same fix family: two already-dark surface tones
   instead of the broken navy/near-white pair. */
[data-theme="dark"] .student-cta-banner {
    background: linear-gradient(135deg, var(--color-surface-elevated), var(--bg-base));
    border: 1px solid rgba(76, 141, 255, 0.2);
}

/* Focus states are a "primary interactive" role (see the Dark Mode color
   system notes in tokens.css) — electric blue rather than the secondary
   burgundy accent every other hover/border cue on the site still uses. */
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .form-select:focus,
[data-theme="dark"] .form-textarea:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 4px rgba(76, 141, 255, 0.18);
}

/* Hero statement box: in Light Mode this is a deliberate dark accent chip
   floating on the light page (same "always-dark" family as the footer and
   placement banner). Leaving it dark in Dark Mode would make it disappear
   against the equally-dark hero card, so it inverts instead — a light,
   warm chip standing out from its dark surroundings, keeping its role as
   the page's one deliberate "accent statement" piece in both themes. The
   two literal colors below are a one-off exception (there is no dark-mode
   token for "dark text on a light surface" — every dark-mode text token is
   necessarily light-on-dark) and intentionally reuse the Light Mode
   palette's own navy/burgundy so the chip still reads as on-brand. */
[data-theme="dark"] .hero-placeholder-box {
    background-color: var(--ink);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .hero-placeholder-icon {
    background-color: rgba(15, 23, 42, 0.07);
    color: #5D0D18;
}
[data-theme="dark"] .hero-placeholder-text {
    color: rgba(15, 23, 42, 0.78);
}

/* SUPERSEDED now that backdrop-filter is gone site-wide (see header.css/
   sections.css/components.css/background.css) — kept as a note, not a
   rule, so the reasoning that produced --header-glass-bg's/--glass-bg's
   current dark-mode opacity (tokens.css) isn't lost:
   .site-header and .hero-visual-card-backdrop used to carry a faint white
   wash (rgba(255,255,255,0.06-0.07)) instead of the navy glass tokens,
   specifically because --header-glass-bg/--glass-bg read as almost the
   same near-black navy as the page canvas in Dark Mode, so a blurred,
   *navy-on-navy* glass had nothing to visually separate from. A faint
   white wash, blurred and saturated, picked up whatever colorful content
   was behind it instead and read as genuine frosted glass "lit from
   in front." That effect is entirely a product of `backdrop-filter:
   blur() saturate()` — a flat, non-blurred 6-7% white wash with nothing
   behind it to sample is just barely-there, which is exactly what made
   the header/hero card nearly invisible in Dark Mode the moment blur was
   removed. The fix wasn't a new override here: --header-glass-bg and
   --glass-bg were both given meaningfully higher solid opacity in
   tokens.css instead (0.75/0.78 → 0.9), which is what those elements now
   render with in Dark Mode, no dark-mode-specific override needed. */

/* This part of the old rule above WASN'T blur-dependent, so it's kept on
   its own: header.css's base box-shadow (0 10px 30px rgba(26, 54, 93,
   0.06)) is tuned for a light page and reads as barely-there — almost too
   subtle to register — against a dark one. --shadow-md's Dark Mode value
   is already calibrated for exactly this (a deeper, more visible shadow
   against a dark canvas). */
[data-theme="dark"] .site-header {
    box-shadow: var(--shadow-md);
}

/* The light-mode ambient glow (base.css) is tuned for a white canvas and
   makes no sense re-tinted alone here — Dark Mode gets its own layered set
   of glows instead: a dominant blue one (the primary accent, doing most of
   the "illuminated from within" work), a fainter secondary blue glow for
   depth, and a touch of burgundy + warm gold so both secondary accents
   still have a quiet ambient presence site-wide, not just on the
   components that use them directly. Deliberately subtle/soft (large
   radii, low opacity, `transparent` well before the edge) — the goal is a
   cinematic backdrop, not a visible colored spotlight. */
[data-theme="dark"] body {
    background-image:
        radial-gradient(circle at 20% 20%, rgba(76, 141, 255, 0.16), transparent 55%),
        radial-gradient(circle at 88% 12%, rgba(76, 141, 255, 0.08), transparent 50%),
        radial-gradient(circle at 85% 78%, rgba(217, 82, 110, 0.07), transparent 50%),
        radial-gradient(circle at 12% 85%, rgba(232, 184, 75, 0.04), transparent 45%);
}