/**
 * IndexLobby site tokens — light / dark / system.
 *
 * Mirrors chatroom-portal `lib/theme/app_theme.dart` after the website-orange
 * pin (#40 / #41): primary stays `#ff8c00` in both schemes (Material fromSeed
 * must not mute chrome to brown/amber). Dark surfaces match the existing
 * marketing site; light surfaces stay neutral grey (not peach).
 *
 * Resolution
 *   - :root                         → light scheme
 *   - @media prefers-color-scheme   → dark when no explicit data-theme
 *   - :root[data-theme="dark"]      → explicit dark
 *   - :root[data-theme="light"]     → explicit light (wins over media)
 *
 * theme.js + the head boot script keep `data-theme` and `data-bs-theme` in
 * lockstep. Navbar chrome stays the `#ff8c00`→`#f07d00` wash in both themes.
 */

:root {
    /* Brand — pinned, both themes */
    --primary: #ff8c00;
    --primary-deep: #f07d00;
    --primary-hover: #ffa500;
    --on-primary: #ffffff;
    --primary-container: #ffe4c7;
    --on-primary-container: #4a2800;

    /* Light surfaces (portal buildLobbyColorScheme light) */
    --surface: #f7f7f7;
    --on-surface: #1a1a1a;
    --on-surface-variant: #5c5c5c;
    --surface-lowest: #ffffff;
    --surface-low: #ffffff;
    --surface-container: #f0f0f0;
    --surface-high: #eeeeee;
    --surface-highest: #e8e8e8;
    --outline: #8a8a8a;
    --outline-variant: #d0d0d0;
    --ground: #f7f7f7;
    --panel: #eeeeee;
    --panel-border: #d0d0d0;

    --error: #ba1a1a;
    --online: #2e7d32;
    --danger-hover: #9c1515;
    --danger-soft-bg: #f9dedc;
    --danger-soft-text: #7f1010;
    --danger-soft-border: var(--error);

    /* Body links: darker orange for AA on light ground */
    --link-color: #c45a00;
    --link-hover: #a34c00;
    --focus-ring: #ff8c00;

    --shadow-modal: 0 16px 48px rgba(26, 26, 26, 0.18);
    --overlay-bg: rgba(0, 0, 0, 0.45);
    --orange-soft: color-mix(in srgb, var(--primary) 14%, transparent);
    --orange-border: color-mix(in srgb, var(--primary) 38%, transparent);

    /* Historical aliases used across styles.css */
    --primary-orange: var(--primary);
    --hover-orange: var(--primary-hover);
    --light-orange: var(--primary-container);
    --dark-gray: var(--on-surface);
    --medium-gray: var(--on-surface-variant);
    --light-gray: var(--surface-container);
    --border-gray: var(--outline-variant);
    --white: var(--surface-low);
    --error-red: var(--error);
    --success-green: var(--online);
    --footer-bg: #ebebeb;
    --footer-text: #5c5c5c;
    --input-bg: var(--surface-highest);
    --input-text: var(--on-surface);
    --surface-elevated: var(--surface-high);
    --card-bg: var(--surface-low);
    --danger: var(--error);

    /* Bootstrap bridge (light) */
    --bs-primary: #ff8c00;
    --bs-primary-rgb: 255, 140, 0;
    --bs-link-color: #c45a00;
    --bs-link-color-rgb: 196, 90, 0;
    --bs-link-hover-color: #a34c00;
    --bs-body-bg: #f7f7f7;
    --bs-body-color: #1a1a1a;
    --bs-emphasis-color: #1a1a1a;
    --bs-secondary-bg: #ffffff;
    --bs-tertiary-bg: #eeeeee;
    --bs-border-color: #d0d0d0;
    --bs-success: #2e7d32;
    --bs-danger: #ba1a1a;
    --bs-warning: #ff8c00;
    --bs-info: #4dabf7;
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: 4px;

    color-scheme: light;
}

/* System dark (no explicit data-theme) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #ff8c00;
        --primary-deep: #f07d00;
        --primary-hover: #ffa500;
        --on-primary: #ffffff;
        --primary-container: #2a2416;
        --on-primary-container: #ececec;

        --surface: #121212;
        --on-surface: #ececec;
        --on-surface-variant: #a0a0a0;
        --surface-lowest: #0e0e0e;
        --surface-low: #1a1a1a;
        --surface-container: #1a1a1a;
        --surface-high: #222222;
        --surface-highest: #222222;
        --outline: #333333;
        --outline-variant: #333333;
        --ground: #121212;
        --panel: #222222;
        --panel-border: #333333;

        --error: #e35d6a;
        --online: #51cf66;
        --danger-hover: #ff7b86;
        --danger-soft-bg: #3a2224;
        --danger-soft-text: #ff8a8a;
        --danger-soft-border: #e35d6a;

        --link-color: #ff9f2e;
        --link-hover: #ffb84d;
        --focus-ring: #ff9f2e;

        --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.55);
        --overlay-bg: rgba(0, 0, 0, 0.65);

        --footer-bg: #0e0e0e;
        --footer-text: #c8c8c8;
        --input-bg: #121212;

        --bs-primary: #ff8c00;
        --bs-primary-rgb: 255, 140, 0;
        --bs-link-color: #ff9f2e;
        --bs-link-color-rgb: 255, 159, 46;
        --bs-link-hover-color: #ffb84d;
        --bs-body-bg: #121212;
        --bs-body-color: #ececec;
        --bs-emphasis-color: #ffffff;
        --bs-secondary-bg: #1a1a1a;
        --bs-tertiary-bg: #222222;
        --bs-border-color: #333333;
        --bs-success: #51cf66;
        --bs-danger: #e35d6a;
        --bs-warning: #ff8c00;
        --bs-info: #4dabf7;

        color-scheme: dark;
    }
}

/* Explicit dark choice */
:root[data-theme="dark"],
:root[data-bs-theme="dark"] {
    --primary: #ff8c00;
    --primary-deep: #f07d00;
    --primary-hover: #ffa500;
    --on-primary: #ffffff;
    --primary-container: #2a2416;
    --on-primary-container: #ececec;

    --surface: #121212;
    --on-surface: #ececec;
    --on-surface-variant: #a0a0a0;
    --surface-lowest: #0e0e0e;
    --surface-low: #1a1a1a;
    --surface-container: #1a1a1a;
    --surface-high: #222222;
    --surface-highest: #222222;
    --outline: #333333;
    --outline-variant: #333333;
    --ground: #121212;
    --panel: #222222;
    --panel-border: #333333;

    --error: #e35d6a;
    --online: #51cf66;
    --danger-hover: #ff7b86;
    --danger-soft-bg: #3a2224;
    --danger-soft-text: #ff8a8a;
    --danger-soft-border: #e35d6a;

    --link-color: #ff9f2e;
    --link-hover: #ffb84d;
    --focus-ring: #ff9f2e;

    --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.55);
    --overlay-bg: rgba(0, 0, 0, 0.65);

    --footer-bg: #0e0e0e;
    --footer-text: #c8c8c8;
    --input-bg: #121212;

    --bs-primary: #ff8c00;
    --bs-primary-rgb: 255, 140, 0;
    --bs-link-color: #ff9f2e;
    --bs-link-color-rgb: 255, 159, 46;
    --bs-link-hover-color: #ffb84d;
    --bs-body-bg: #121212;
    --bs-body-color: #ececec;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-bg: #1a1a1a;
    --bs-tertiary-bg: #222222;
    --bs-border-color: #333333;
    --bs-success: #51cf66;
    --bs-danger: #e35d6a;
    --bs-warning: #ff8c00;
    --bs-info: #4dabf7;

    color-scheme: dark;
}

/* Explicit light must beat a lingering data-bs-theme=dark from Bootstrap */
:root[data-theme="light"] {
    --primary: #ff8c00;
    --primary-deep: #f07d00;
    --primary-hover: #ffa500;
    --on-primary: #ffffff;
    --primary-container: #ffe4c7;
    --on-primary-container: #4a2800;

    --surface: #f7f7f7;
    --on-surface: #1a1a1a;
    --on-surface-variant: #5c5c5c;
    --surface-lowest: #ffffff;
    --surface-low: #ffffff;
    --surface-container: #f0f0f0;
    --surface-high: #eeeeee;
    --surface-highest: #e8e8e8;
    --outline: #8a8a8a;
    --outline-variant: #d0d0d0;
    --ground: #f7f7f7;
    --panel: #eeeeee;
    --panel-border: #d0d0d0;

    --error: #ba1a1a;
    --online: #2e7d32;
    --danger-hover: #9c1515;
    --danger-soft-bg: #f9dedc;
    --danger-soft-text: #7f1010;
    --danger-soft-border: var(--error);

    --link-color: #c45a00;
    --link-hover: #a34c00;
    --focus-ring: #ff8c00;

    --shadow-modal: 0 16px 48px rgba(26, 26, 26, 0.18);
    --overlay-bg: rgba(0, 0, 0, 0.45);

    --footer-bg: #ebebeb;
    --footer-text: #5c5c5c;
    --input-bg: var(--surface-highest);

    --bs-primary: #ff8c00;
    --bs-primary-rgb: 255, 140, 0;
    --bs-link-color: #c45a00;
    --bs-link-color-rgb: 196, 90, 0;
    --bs-link-hover-color: #a34c00;
    --bs-body-bg: #f7f7f7;
    --bs-body-color: #1a1a1a;
    --bs-emphasis-color: #1a1a1a;
    --bs-secondary-bg: #ffffff;
    --bs-tertiary-bg: #eeeeee;
    --bs-border-color: #d0d0d0;
    --bs-success: #2e7d32;
    --bs-danger: #ba1a1a;
    --bs-warning: #ff8c00;
    --bs-info: #4dabf7;

    color-scheme: light;
}