/* ============================================================
   StreamVerde — Design Tokens
   shared/css/tokens.css
   Shared across website and app
   ============================================================ */

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

:root {
  /* ── Palette ── */
  --g0: #000d07;
  --g1: #001a0f;
  --g2: #002e1a;
  --g3: #00422a;
  --g4: #00ff87;
  --g5: #39ffb0;
  --g6: #7bffd4;
  --g7: #b0ffe6;

  /* ── Glow ── */
  --glow:  rgba(0, 255, 135, 0.18);
  --glow2: rgba(0, 255, 135, 0.07);

  /* ── Semantic colors ── */
  --red:    #ff4757;
  --yellow: #ffd32a;
  --blue:   #3ae0ff;

  /* ── Text ── */
  --text:       #e8fff6;
  --text-dim:   #7ab89a;
  --text-muted: #3a6b52;

  /* ── Surfaces ── */
  --surface:  rgba(0, 26, 15, 0.9);
  --surface2: rgba(0, 46, 26, 0.6);

  /* ── Borders ── */
  --border:  rgba(0, 255, 135, 0.10);
  --border2: rgba(0, 255, 135, 0.22);

  /* ── Radius ── */
  --radius:    14px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  /* ── Typography ── */
  --font-display: 'Syne', sans-serif;
  --font-body:    'Manrope', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Spacing scale ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ── Sidebar width (app) ── */
  --sidebar-width: 240px;

  /* ── Topbar height (app) ── */
  --topbar-height: 58px;

  /* ── Z-index scale ── */
  --z-base:    1;
  --z-nav:     100;
  --z-sidebar: 200;
  --z-notif:   300;
  --z-modal:   500;
  --z-noise:   9999;
}

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

html { scroll-behavior: smooth; }

body {
  background:   var(--g0);
  color:        var(--text);
  font-family:  var(--font-body);
  font-size:    15px;
  line-height:  1.6;
  min-height:   100vh;
  overflow-x:   hidden;
}

input, select, textarea, button {
  font-family: var(--font-body);
}

/* ── Global link color ── */
a,
a:link,
a:visited,
a:active { color: var(--g4); text-decoration: none; }
a:hover   { color: var(--g5); text-decoration: underline; }

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--g1); }
::-webkit-scrollbar-thumb { background: var(--g3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--g4); }