/* ==================== Design Tokens ==================== */

:root {
    /* Brand colors (repeated 3+ times verbatim across page files before this cleanup) */
    --color-radiant: #63ff9c;
    --color-dire: #ff5c5c;
    --color-gold: #ffd700;
    --color-accent-blue: #4C7DFF;
    --color-accent-purple: #8B5CF6;

    /* Navigation */
    --nav-bg: rgba(10, 14, 39, 0.78);
    --nav-surface: rgba(255, 255, 255, 0.055);
    --nav-surface-hover: rgba(255, 255, 255, 0.09);
    --nav-surface-active: rgba(91, 115, 220, 0.18);
    --nav-border: rgba(255, 255, 255, 0.10);
    --nav-border-active: rgba(115, 140, 255, 0.45);
    --nav-text: rgba(255, 255, 255, 0.68);
    --nav-text-muted: rgba(255, 255, 255, 0.42);
    --nav-text-strong: #ffffff;
    --nav-radius: 14px;
    --nav-control-height: 42px;
    --nav-shadow:
        0 18px 45px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    /* Dropdowns — single source of truth for every dropdown panel in the app
       (navbar user menu and timezone selector, page filter selects, coupons tab
       switcher), so they cannot drift apart. Values derived from the original
       .userMenu__dropdown, which is the reference look. Consumed by
       components/dropdown.css; only panel width and trigger sizing are left to
       each context, since those depend on where the control sits. */
    --dd-gap: 9px;
    /* Above .plotTooltip (100), which shares the page's root stacking context on
       match_details and would otherwise cover the coupons switcher's panel.
       Still far below .siteHeader (900) and .toast (1050). */
    --dd-z-index: 200;
    --dd-width: 190px;
    --dd-max-height: 300px;
    --dd-padding: 7px;
    --dd-radius: 13px;
    --dd-bg: rgba(15, 20, 48, 0.98);
    --dd-border: var(--nav-border);
    --dd-shadow:
        0 20px 50px rgba(0, 0, 0, 0.44),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --dd-item-height: 40px;
    /* The vertical half only shows on items long enough to wrap — a single line
       is spaced by --dd-item-height instead, and stays 40px tall as before. */
    --dd-item-padding: 8px 12px;
    --dd-item-radius: 9px;
    --dd-item-font-size: 12px;
    --dd-item-font-weight: 600;
    --dd-item-color: rgba(255, 255, 255, 0.66);
    --dd-item-color-hover: #ffffff;
    --dd-item-bg-hover: var(--nav-surface-hover);
}