/**
 * ME Crisis Live — Base Design System
 * Single source of truth for all pages.
 * ALL pages must include this file.
 *
 * Usage: <link rel="stylesheet" href="/base.css">
 */

/* ===== RESET & GLOBALS ===== */
* { box-sizing: border-box; }
html { overflow-y: scroll; scrollbar-gutter: stable; }
body {
    background: #080d18;
    color: #e2e8f0;
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }

/* ===== HEADER BAR ===== */
.site-header {
    background: rgba(9, 16, 31, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    height: 84px;           /* FIXED — never changes on any page */
    min-height: 84px;
    position: sticky;
    top: 0;
    z-index: 50;
    contain: layout style;
    will-change: transform;
}
.site-header-inner {
    max-width: 80rem; /* 1280px = max-w-7xl */
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 100%;           /* Fill parent's fixed height */
}
.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: opacity 0.2s;
}
.site-logo:hover { opacity: 0.8; }

/* Logo ping dot */
.logo-dot-wrap {
    position: relative;
    display: flex;
    width: 12px;
    height: 12px;
}
.logo-dot-ping {
    position: absolute;
    display: inline-flex;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background: #ef4444;
    opacity: 0.75;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.logo-dot {
    position: relative;
    display: inline-flex;
    border-radius: 9999px;
    width: 12px;
    height: 12px;
    background: #ef4444;
}

/* Logo text — HARDCODED sizes, never change */
.logo-live {
    color: #ef4444;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-family: 'Inter', system-ui, sans-serif;
}
.logo-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.025em;
    font-family: 'Inter', system-ui, sans-serif;
}
.logo-subtitle {
    color: #64748b;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.1em;
    font-family: 'Inter', system-ui, sans-serif;
}
@media (max-width: 639px) {
    .logo-subtitle { display: none; }
}

/* ===== ANIMATIONS ===== */
@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

/* ===== COLORS (reference, use in code) ===== */
/*
  --bg-base:    #080d18
  --bg-surface: #09101f
  --bg-panel:   #0d1524
  --text-main:  #e2e8f0
  --text-muted: #64748b
  --text-dim:   #475569
  --red:        #ef4444
  --orange:     #f97316
  --yellow:     #eab308
  --green:      #22c55e
  --blue:       #3b82f6
*/

/* ===== TYPOGRAPHY SCALE (reference) ===== */
/*
  h1:    28-32px, font-weight: 900, tracking: -0.025em
  h2:    20-24px, font-weight: 700
  h3:    16-18px, font-weight: 700
  body:  14-15px, font-weight: 400, line-height: 1.6
  small: 12px,    font-weight: 500
  micro: 10-11px, font-weight: 600, tracking: 0.05em
  mono:  'JetBrains Mono', font-size: 12px
*/

/* ===== CONTENT WIDTHS ===== */
/*
  Header:          max-width: 80rem (1280px)
  Index pages:     max-width: 64rem (1024px)  — max-w-5xl
  Article pages:   max-width: 56rem (896px)   — max-w-4xl
  Padding:         0 16px (px-4)
*/