/* ============================================================
   DARK THEME — token overrides only.
   Overrides the base token layer (tokens.css). It must never
   override the semantic alias layer declared in style.css :root
   (--color-accent, --color-primary, …), otherwise the two themes
   drift apart in hue instead of only in lightness.
   ============================================================ */
[data-theme="dark"] {
    --color-surface: #1E293B;
    --color-surface-short: #1E293B;
    --color-background: #0B1220;
    --color-surface-alt: #111827;
    --color-surface-alt-2: #111827;

    --color-text-primary: #F8FAFC;
    --color-text-secondary: #CBD5E1;
    --color-text-disabled: #94A3B8;

    /* Borders carry more weight on dark surfaces — 4–8% white reads
       as no border at all, so cards/inputs lose their edge. */
    --color-border: rgba(255, 255, 255, 0.14);
    --color-border-light: rgba(255, 255, 255, 0.08);

    --color-black: #F8FAFC;
    --color-black-short: #F8FAFC;
    --color-dark-gray: #E2E8F0;
    --color-mid-gray: #94A3B8;
    --color-light-gray: rgba(255, 255, 255, 0.20);

    --color-brand-gold: #D4AF37;

    --color-brand-primary: #F8FAFC;
    --color-brand-secondary: #60A5FA;
    --color-brand-primary-light: #334155;
    --color-brand-primary-dark: #F8FAFC;
    --color-brand-primary-darker: #F8FAFC;

    /* --- Inverted brand surface -----------------------------------
       Stays dark in dark mode, but lifts to a saturated navy so the
       band still separates from both the page background (#0B1220)
       and the card surface (#1E293B), exactly as the navy band does
       against white in the light theme. */
    --color-brand-surface: #14294A;
    --color-brand-surface-2: #0F1F39;
    --color-brand-surface-3: #070F20;
    --color-brand-surface-a80: rgba(10, 22, 40, 0.85);

    /* --color-on-brand-* intentionally NOT overridden: the surface
       beneath them is dark in both themes. */

    /* Primary action inverts with the page: dark pill on light →
       light pill on dark. Softened from pure #F8FAFC to avoid glare. */
    --color-action: #E2E8F0;
    --color-action-hover: #F8FAFC;
    --color-on-action: #0B1220;

    /* Accent + gold both brighten in dark mode, so their labels flip
       from white to near-black to keep AA. */
    --color-on-accent: #0B1220;

    /* --color-on-bright intentionally NOT overridden. */

    --color-well: rgba(0, 0, 0, 0.22);
    --color-hairline: rgba(255, 255, 255, 0.12);

    --color-brand-green: #4ADE80;

    /* --- Elevation -------------------------------------------------
       Every consumer of these tokens is a box-shadow / drop-shadow.
       Shadows must stay black on dark surfaces — inverting them to
       white produced a glow, which flattened every card. Alphas are
       deepened because a 6% black shadow is invisible on #0B1220. */
    --color-brand-primary-alpha-4: rgba(0, 0, 0, 0.20);
    --color-brand-primary-alpha-6: rgba(0, 0, 0, 0.28);
    --color-brand-primary-alpha-8: rgba(0, 0, 0, 0.35);
    --color-brand-primary-alpha-10: rgba(0, 0, 0, 0.42);
    --color-brand-primary-alpha-15: rgba(0, 0, 0, 0.45);
    --color-brand-primary-alpha-20: rgba(0, 0, 0, 0.55);
    --color-brand-primary-alpha-80: rgba(0, 0, 0, 0.80);

    --color-surface-alpha-92: rgba(30, 41, 59, 0.92);
    --color-surface-alpha-8: rgba(30, 41, 59, 0.08);
    --color-surface-alpha-60: rgba(30, 41, 59, 0.6);
    --color-surface-alpha-85: rgba(30, 41, 59, 0.85);
    --color-surface-alpha-75: rgba(30, 41, 59, 0.75);
    --color-surface-alpha-65: rgba(30, 41, 59, 0.65);
    --color-surface-alpha-70: rgba(30, 41, 59, 0.7);
    --color-surface-alpha-10: rgba(30, 41, 59, 0.1);

    --color-black-alpha-2: rgba(0, 0, 0, 0.25);
    --color-black-alpha-5: rgba(0, 0, 0, 0.30);
    --color-black-alpha-8: rgba(0, 0, 0, 0.38);
    --color-black-alpha-10: rgba(0, 0, 0, 0.42);
    --color-black-alpha-15: rgba(0, 0, 0, 0.48);
    --color-black-alpha-20: rgba(0, 0, 0, 0.55);
    --color-black-alpha-10-spaced: rgba(0, 0, 0, 0.42);
}

/* The Clarivate / Web of Science mark ships three unfilled paths, so
   its wordmark renders solid black and disappears on dark surfaces.
   It is loaded via <img>, so CSS cannot reach the paths — a lightness
   inversion (hue preserved) is the only available fix. */
[data-theme="dark"] .social-icons a[href*="webofscience"] img {
    filter: invert(1) hue-rotate(180deg);
}

/* Smooth transition only for colors */
body, header, section, footer, div, span, p, a, h1, h2, h3, h4, h5, h6, button, ul, li {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}