/*
 * Droploop Online — Unified Brand Theme
 *
 * CSS custom properties matching the Rust BrandTheme in
 * crates/renderer/src/brand_theme.rs. Every website page links this
 * file and uses these variables instead of raw hex/rgba literals.
 *
 * If you change a value here, update the Rust constant to match.
 */

/* Font face — JetBrains Mono via Google Fonts CDN */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
    /* ====================================================================
     * Font Family
     * ==================================================================== */
    --font-family: 'JetBrains Mono', 'Courier New', monospace;

    /* ====================================================================
     * Typography Scale (matches BrandTheme::FONT_* constants)
     * ==================================================================== */
    --font-display: 32px;
    --font-title: 28px;
    --font-heading: 22px;
    --font-subheading: 18px;
    --font-body: 16px;
    --font-small: 14px;
    --font-hint: 13px;
    --font-tiny: 12px;
    --font-action: 16px;

    /* ====================================================================
     * Backgrounds (darkest to lightest)
     * ==================================================================== */
    --bg-deep: #0a0a0f;
    --bg-panel: #0f0f19;
    --bg-surface: #1a1a2e;
    --bg-elevated: #282840;

    /* ====================================================================
     * Borders
     * ==================================================================== */
    --border-subtle: #2a2a3a;
    --border-default: #3c5aa0;
    --border-accent: #64c8ff;

    /* ====================================================================
     * Text
     * ==================================================================== */
    --text-primary: #ffffff;
    --text-secondary: #c8c8d4;
    --text-muted: #787890;
    --text-disabled: #505060;

    /* ====================================================================
     * Semantic Colors
     * ==================================================================== */
    --accent: #64c8ff;
    --success: #50dc64;
    --danger: #c85050;
    --warning: #e6c832;
    --info: #64a0ff;

    /* ====================================================================
     * Semantic Backgrounds (darkened for buttons/panels)
     * ==================================================================== */
    --success-bg: #143823;
    --danger-bg: #321414;
    --warning-bg: #383214;
    --accent-bg: #142837;

    /* ====================================================================
     * Layout
     * ==================================================================== */
    --border-thickness: 2px;
    --overlay-opacity: 0.7;
}

/* ========================================================================
 * Base Styles — Space Background
 * The site body shows a starfield/planet background. Content sits on top
 * inside panel-chrome containers, matching the in-game menu overlay look.
 * ======================================================================== */

body {
    font-family: var(--font-family);
    font-size: var(--font-body);
    color: var(--text-secondary);
    background-color: #020208;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-image:
        /* star dots — tiny bright specks */
        radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 25% 8%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 40% 22%, rgba(200,200,212,0.35) 0%, transparent 100%),
        radial-gradient(1px 1px at 55% 5%, rgba(255,255,255,0.25) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 18%, rgba(100,200,255,0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 85% 12%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 15% 35%, rgba(255,255,255,0.2) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 40%, rgba(200,200,212,0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 30%, rgba(255,255,255,0.25) 0%, transparent 100%),
        radial-gradient(1px 1px at 35% 55%, rgba(100,200,255,0.2) 0%, transparent 100%),
        radial-gradient(1px 1px at 78% 48%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 5% 60%, rgba(255,255,255,0.2) 0%, transparent 100%),
        radial-gradient(1px 1px at 48% 70%, rgba(200,200,212,0.25) 0%, transparent 100%),
        radial-gradient(1px 1px at 92% 65%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 22% 80%, rgba(100,200,255,0.15) 0%, transparent 100%),
        radial-gradient(1px 1px at 65% 85%, rgba(255,255,255,0.2) 0%, transparent 100%),
        /* planet atmosphere glow — bottom right */
        radial-gradient(ellipse 600px 400px at 85% 110%, rgba(40,100,160,0.15) 0%, transparent 60%),
        radial-gradient(ellipse 400px 300px at 85% 115%, rgba(60,140,200,0.08) 0%, transparent 50%);
    background-attachment: fixed;
}

h1 {
    font-size: var(--font-title);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: 0.5px;
}

h2 {
    font-size: var(--font-heading);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

h3 {
    font-size: var(--font-subheading);
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--text-primary);
}

/* ========================================================================
 * Panel Chrome — matches render_panel_chrome() in menu_theme.rs
 * Used to wrap page content like an in-game menu panel.
 * ======================================================================== */

.panel-chrome {
    background: var(--bg-panel);
    border: var(--border-thickness) solid var(--border-default);
    position: relative;
}

.panel-chrome--accent { border-color: var(--accent); }
.panel-chrome--success { border-color: var(--success); }
.panel-chrome--danger { border-color: var(--danger); }
.panel-chrome--warning { border-color: var(--warning); }

.panel-title {
    font-size: var(--font-heading);
    font-weight: 700;
    color: var(--accent);
    padding: 12px 20px;
    letter-spacing: 0.05em;
}

.panel-separator {
    height: 1px;
    background: var(--border-subtle);
    margin: 0;
    border: none;
}

.panel-content {
    padding: 24px 20px;
}

.panel-action-bar {
    background: var(--bg-deep);
    border-top: 1px solid var(--border-default);
    padding: 10px 20px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* ========================================================================
 * Button Styles — matches action_button.rs render() exactly
 * Height: 32px, border: 2px, font: 16px centered
 * ======================================================================== */

.btn {
    display: inline-block;
    font-family: var(--font-family);
    font-size: var(--font-action);
    font-weight: 600;
    height: 32px;
    line-height: 28px;
    padding: 0 1.5rem;
    border: var(--border-thickness) solid;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    letter-spacing: 0.03em;
    text-align: center;
    white-space: nowrap;
}

.btn-lg {
    height: 40px;
    line-height: 36px;
    padding: 0 2.5rem;
    font-size: var(--font-subheading);
}

/* Primary — cyan border/text on dark elevated bg (game CTA) */
.btn-primary {
    background: var(--bg-elevated);
    border-color: var(--accent);
    color: var(--accent);
}
.btn-primary:hover {
    background: var(--bg-surface);
    border-color: var(--accent);
    color: var(--accent);
}

/* Secondary — blue border on panel bg */
.btn-secondary {
    background: var(--bg-panel);
    border-color: var(--border-default);
    color: var(--text-secondary);
}
.btn-secondary:hover {
    background: var(--bg-elevated);
    border-color: var(--border-default);
    color: var(--text-primary);
}

/* Green / Success — green border on dark green bg */
.btn-success {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--success);
}
.btn-success:hover {
    background: var(--bg-surface);
    color: #82ff82;
    border-color: #82ff82;
}

/* Danger — red border on dark red bg */
.btn-danger {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger);
}
.btn-danger:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}

/* Orange — amber border on dark amber bg */
.btn-orange {
    background: #3c2814;
    border-color: #ffa500;
    color: #ffa500;
}
.btn-orange:hover {
    background: #503219;
    border-color: #ffb933;
    color: #ffb933;
}

/* Teal — teal border on dark teal bg */
.btn-teal {
    background: #142237;
    border-color: #00ffdc;
    color: #00ffdc;
}
.btn-teal:hover {
    background: #1d5055;
    border-color: #1dffe6;
    color: #1dffe6;
}

/* Neutral — grey border on dark grey bg */
.btn-neutral {
    background: #282832;
    border-color: #b4b4b4;
    color: #b4b4b4;
}
.btn-neutral:hover {
    background: #323238;
    border-color: #c8c8c8;
    color: #c8c8c8;
}

/* Ghost — transparent, text only */
.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
}
.btn-ghost:hover {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border-color: transparent;
}

/* Disabled state */
.btn:disabled, .btn.disabled {
    background: var(--bg-panel);
    border-color: var(--text-disabled);
    color: var(--text-disabled);
    cursor: not-allowed;
}

/* ========================================================================
 * Tab Bar — matches tab_bar.rs render()
 * ======================================================================== */

.tab-bar {
    display: flex;
    height: 40px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-subtle);
}

.tab-bar a, .tab-bar button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    font-size: var(--font-body);
    color: var(--text-disabled);
    background: var(--bg-panel);
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    position: relative;
}

.tab-bar a:hover, .tab-bar button:hover {
    background: #1e1e32;
    color: var(--text-secondary);
}

.tab-bar a.active, .tab-bar button.active {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}

/* Tab dividers */
.tab-bar a + a, .tab-bar button + button {
    border-left: 1px solid var(--border-subtle);
}