/* ═══════════════════════════════════════════
   BASE.CSS — Variables, Reset, Typography
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&family=Syne:wght@400;500;600;700;800&display=swap');

:root {
  /* Backgrounds */
  --bg:       #0a0e14;
  --bg2:      #111720;
  --bg3:      #1a2230;
  --bg4:      #212d3d;

  /* Borders */
  --border:   rgba(99, 160, 255, 0.12);
  --border2:  rgba(99, 160, 255, 0.22);

  /* Text */
  --text:     #e8edf5;
  --text2:    #8899b0;
  --text3:    #4e6070;

  /* Accent / Brand */
  --accent:   #3d9aff;
  --accent2:  #0066e0;

  /* Semantic */
  --green:      #1ed97a;
  --green-bg:   rgba(30, 217, 122, 0.08);
  --amber:      #f5a623;
  --amber-bg:   rgba(245, 166, 35, 0.08);
  --red:        #ff4d6a;
  --red-bg:     rgba(255, 77, 106, 0.08);
  --teal:       #00d4d4;
  --purple:     #a78bfa;

  /* Typography */
  --mono:    'DM Mono', monospace;
  --display: 'Syne', sans-serif;

  /* Shape */
  --radius:    8px;
  --radius-lg: 14px;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { font-size: 16px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--display);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

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

img, svg { display: block; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg3); }

/* ── Utility ── */
.mono    { font-family: var(--mono); }
.hidden  { display: none !important; }
.mt1     { margin-top: 1rem; }
.mt2     { margin-top: 1.5rem; }
.mt3     { margin-top: 2rem; }
.mb1     { margin-bottom: 1rem; }
.mb2     { margin-bottom: 1.5rem; }

.color-green  { color: var(--green); }
.color-amber  { color: var(--amber); }
.color-red    { color: var(--red); }
.color-accent { color: var(--accent); }
.color-teal   { color: var(--teal); }
.color-muted  { color: var(--text2); }

.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; }
.flex-between  { display: flex; justify-content: space-between; align-items: center; }
.flex-gap      { display: flex; gap: 0.75rem; align-items: center; }
.flex-col      { display: flex; flex-direction: column; }

.text-right  { text-align: right; }
.text-center { text-align: center; }

.section-divider {
  height: 1px;
  background: var(--border);
  margin: 1.5rem 0;
}