/* ========== THEME TOKENS ========== */
/* Single source of truth for the site's color palette. Change a value
   here and it updates everywhere that color is used — instead of
   hunting through the file for every literal #ffd700 / rgba(...).

   Note: CSS custom properties can't be used inside @media (...) query
   conditions (a real CSS limitation, not something a variable fixes),
   so the mobile breakpoint itself is still a literal number wherever
   it appears. Keep it at 767px/768px (max-width/min-width pair) —
   that mismatch caused a real layout bug once already. */
:root {
    /* Tells the browser this page is already dark-themed on purpose,
       so it stops applying its own "auto dark mode" reinterpretation
       to unstyled/transparent elements. Without this, some real Android
       browsers (Samsung Internet, Chrome's Auto Dark Theme for Web
       Contents) selectively recolor transparent-background buttons and
       their currentColor SVG icons — this is why the search overlay's
       close (X) icon could render invisible on a real device while
       looking fine in any desktop-based phone simulator, which never
       applies this Android-only heuristic. */
    color-scheme: dark;

    /* Primary gold accent — nav highlights, active states, borders */
    --accent: #ffd700;
    --accent-rgb: 255, 215, 0;

    /* Lighter gold — hover states and gradient buttons (Nous soutenir
       etc.), always used together with --accent-hover-2 as a gradient */
    --accent-hover: #fdd835;
    --accent-hover-rgb: 253, 216, 53;
    --accent-hover-2: #f0c828;

    /* Backgrounds */
    --bg: #121212;              /* page background (html + body) */
    --panel-bg: #111;           /* drawer / dropdown / search panel bg,
                                    and dark text-on-gold-button color —
                                    same near-black value, both roles */
    --header-grad-top: #232323;
    --header-grad-bottom: #161616;

    /* The reusable "pill card" language — nav items, Explorer rows,
       footer icons — subtle bg + border on top of the dark background */
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.08);
}