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

:root {
  /* Colors */
  --bg:       #060b14;
  --bg2:      #0c1422;
  --bg3:      #101d30;
  --card:     #0f1b2d;
  --card2:    #132036;
  --border:   #1a2d45;
  --border2:  #1f3554;

  /* Text */
  --text:     #e2e8f0;
  --text2:    #7a9bbf;
  --text3:    #3d5a7a;

  /* Accent */
  --blue:     #3b82f6;
  --blue2:    #60a5fa;
  --green:    #10b981;
  --green2:   #34d399;
  --red:      #ef4444;
  --red2:     #f87171;
  --yellow:   #f59e0b;
  --yellow2:  #fbbf24;
  --purple:   #8b5cf6;
  --purple2:  #a78bfa;
  --tg:       #229ED9;

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

  /* Misc */
  --radius:   10px;
  --radius2:  16px;
  --shadow:   0 4px 32px rgba(0,0,0,.5);
  --glow-b:   0 0 24px rgba(59,130,246,.18);
  --glow-g:   0 0 24px rgba(16,185,129,.18);
  --trans:    .18s ease;
}

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

html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font); }
input, select, textarea { font-family: var(--font); }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

::selection { background: rgba(59,130,246,.25); }