/* ============================================================
   Battle24 theme engine — semantic tokens
   STREET defaults (current public Battle24). Theme files override
   these on html[data-theme="..."]. Compatibility aliases keep
   existing --scb-* / --bb-* rules working.
   ============================================================ */

:root {
    --color-bg: #0A0A0F;
    --color-surface: #12121A;
    --color-surface-2: #1A1A28;
    --color-surface-3: #222233;
    --color-accent: #D43030;
    /* Wordmark / logo lockup: the brand red, never the theme or operator accent.
       #1148: the nav "24" is 22.4px at weight 400, which is not large text, so it
       needs 4.5:1. #D43030 was 3.1-4.45:1 there (and 2.7-3.0:1 in the 24px footer
       on semidark and studio), so each theme sets the brand red's own shade that
       reads on its surfaces: same hue, lighter on dark themes, darker on light.
       A Site Settings background override reshades it for the generated surfaces. */
    --color-brand: #D43030;
    --color-accent-hot: #E85535;
    /* #1155: the hot accent as a fill under --color-on-accent ("Watch Live",
       primary hovers). Street and studio darken it: white on #E85535 is 3.6:1. */
    --color-accent-hot-fill: var(--color-accent-hot);
    --color-accent-glow: rgba(212, 48, 48, 0.3);
    /* The accent as text on the theme's own surfaces (active nav, guide links). */
    --color-accent-text: var(--color-accent);
    /* #1155: Bootstrap's danger red as text (.text-danger, outline-danger,
       Factory Reset) was 2.8-4.3:1 on the dark themes. Each theme sets the shade
       that reads at 4.5:1 on its surfaces and on a 15% danger tint; fills
       (.btn-danger, .bg-danger) keep Bootstrap's #DC3545. */
    --color-danger-text: #E77681;
    /* #1194: Bootstrap's success green as text (.text-success, .link-success,
       outline-success: "Vote submitted", "Pick winner") was 2.9-4.1:1 on the
       dark themes and 4.0-4.2:1 on the light themes' page. Each theme sets the
       shade that reads on its surfaces, a 15% success tint and an 11% accent
       tint; fills (.btn-success, .bg-success, the outline hover) keep #198754. */
    --color-ok-text: #3DB87F;
    /* #1169/#1173: Bootstrap's warning and info as text on a light page. The
       light themes and a background override set the shade; the dark themes
       keep Bootstrap's own. */
    --color-warn-text: #FFC107;
    --color-info-text: #0DCAF0;
    --color-on-accent: #F5F0E8;
    --color-on-surface: #E8DCC8;
    --color-text: #E8DCC8;
    --color-muted: #8090A6;
    --color-border: #2B3A50;
    --color-warn: #D4A030;
    --color-warn-glow: rgba(212, 160, 48, 0.2);

    --font-display: 'Anton', 'Impact', sans-serif;
    --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

    --radius: 4px;
    --radius-sm: 6px;

    --layout-sidebar-w: 260px;
    --layout-sidebar-collapsed-w: 56px;
    --container-max: 1200px;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;

    --transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-snap: 150ms cubic-bezier(0.77, 0, 0.175, 1);

    /* Bootstrap mapping */
    --bs-primary: var(--color-accent);
    --bs-primary-rgb: 212, 48, 48;
    /* #1146: links and nav links are the accent as text. Bootstrap's own <a>
       rule reads the -rgb pair, so every theme sets it to its accent text. */
    --bs-link-color: var(--color-accent-text);
    --bs-link-hover-color: var(--color-accent-text);
    --bs-link-color-rgb: 212, 48, 48;
    --bs-link-hover-color-rgb: 212, 48, 48;
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-border-color: var(--color-border);
    --bs-secondary-color: var(--color-muted);

    /* Public Battle24 aliases */
    --scb-void: var(--color-bg);
    --scb-surface: var(--color-surface);
    --scb-surface-2: var(--color-surface-2);
    --scb-surface-3: var(--color-surface-3);
    --scb-slate: var(--color-border);
    --scb-steel: var(--color-muted);
    --scb-red: var(--color-accent);
    --scb-red-hot: var(--color-accent-hot);
    --scb-red-glow: var(--color-accent-glow);
    --scb-amber: var(--color-warn);
    --scb-amber-glow: var(--color-warn-glow);
    --scb-cream: var(--color-text);
    --scb-chalk: var(--color-on-accent);
    --scb-font-display: var(--font-display);
    --scb-font-body: var(--font-body);
    --scb-radius: var(--radius);
    --scb-transition: var(--transition);
    --scb-transition-snap: var(--transition-snap);

    /* Guide palette aliases (no third hardcoded palette) */
    --scb-bg: var(--color-bg);
    --scb-sidebar: var(--color-surface);
    --scb-accent: var(--color-accent-text);
    --scb-card: var(--color-surface-2);
    --scb-text: var(--color-text);
    --scb-muted: var(--color-muted);
    --scb-border: var(--color-border);

    /* App/admin aliases */
    --bb-bg: var(--color-bg);
    --bb-card: var(--color-surface);
    --bb-primary: var(--color-accent);
    --bb-primary-soft: color-mix(in srgb, var(--color-accent) 15%, transparent);
    --bb-text: var(--color-text);
    --bb-text-secondary: var(--color-muted);
    --bb-border: var(--color-border);
    --bb-border-soft: color-mix(in srgb, var(--color-text) 6%, transparent);
    --bb-muted: var(--color-muted);
    --bb-sidebar-w: var(--layout-sidebar-w);
    --bb-sidebar-collapsed-w: var(--layout-sidebar-collapsed-w);
    --bb-sidebar-bg: var(--color-surface-2);
    --bb-hover: color-mix(in srgb, var(--color-text) 4%, transparent);
    --bb-active: color-mix(in srgb, var(--color-accent) 18%, transparent);
    --bb-radius: var(--radius);
    --bb-radius-sm: var(--radius-sm);
}