/* GameBrain bright theme — single source of truth for color/shadow tokens.
   Loaded via <link rel="stylesheet" href="/static/css/bright.css">.
   Page-specific styles still live in their template <style> blocks; only
   the cross-cutting tokens + shared topbar/topbar-nav rules live here. */

:root {
    --bg: #fff8f0;
    --bg-card: #ffffff;
    --border: #ebe1cf;
    --border-hover: #d8c8ad;
    --text: #1a1a2e;
    --text-secondary: #4a4a6a;
    --text-muted: #8a8aa0;
    /* Primary accent: warm coral-pink. Avoids Twitch (purple),
       Steam (blue), Kick (green). Used sparingly — only the CTA. */
    --primary: #e85d75;
    --primary-ink: #c14358;
    /* Trend semantics — only red/green carry direction; others stay neutral */
    --up: #1cc7a0;
    --down: #e85d75;
    --neutral: #8a8aa0;
    /* Channel hint colors for the stats row — desaturated to sit at
       the same visual weight as text, NOT as platform identity. */
    --steam-hint:   #5c8fb8;
    --twitch-hint:  #9684b3;
    --streams-hint: #c0a070;
    --shadow-sm: 0 1px 2px rgba(26,26,46,0.06), 0 2px 6px rgba(26,26,46,0.04);
    --shadow-md: 0 2px 4px rgba(26,26,46,0.06), 0 6px 16px rgba(26,26,46,0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-variant-numeric: tabular-nums;
}

/* Shared topbar — every page uses the same one */
.topbar {
    background: rgba(255,248,240,0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    position: sticky;
    top: 0;
    z-index: 100;
}
.topbar-left { display: flex; align-items: center; gap: 16px; }
.topbar-brand {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.3px;
}
.topbar-nav { display: flex; align-items: center; gap: 4px; }
.topbar-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
.topbar-nav a:hover { color: var(--text); background: rgba(26,26,46,0.05); }
.topbar-nav a.active { color: var(--primary); }

/* Anchors */
a { color: var(--primary-ink); }
a:hover { color: var(--primary); }