/* ═══════════════════════════════════════════════
   g-smarto Design Tokens
   Edit this file to retheme the entire site
═══════════════════════════════════════════════ */
:root {
  /* ── Brand Colors ── */
  --teal:        #00d4a0;
  --teal-hover:  #00b887;
  --teal-dim:    rgba(0, 212, 160, 0.12);
  --teal-glow:   rgba(0, 212, 160, 0.22);
  --teal-border: rgba(0, 212, 160, 0.25);

  /* ── Backgrounds ── */
  --bg:          #07080f;
  --bg2:         #0c0d17;
  --bg3:         #11121f;
  --surface:     #161728;
  --surface2:    #1c1e32;

  /* ── Text ── */
  --ink:         #f0f1fa;
  --ink2:        #a8aac8;
  --ink3:        #6b6e8e;

  /* ── Borders ── */
  --border:      rgba(255, 255, 255, 0.08);
  --border2:     rgba(255, 255, 255, 0.14);

  /* ── Accents ── */
  --gold:        #f0c040;
  --orange:      #ff7b3d;
  --red:         #ff4d6d;
  --purple:      #a78bfa;
  --blue:        #7dd3fc;

  /* ── Radius ── */
  --r4:  4px;
  --r8:  8px;
  --r12: 12px;
  --r16: 16px;
  --r24: 24px;
  --r99: 999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.2);
  --shadow-md:   0 4px 16px rgba(0,0,0,.3);
  --shadow-lg:   0 16px 40px rgba(0,0,0,.4);
  --shadow-xl:   0 28px 70px rgba(0,0,0,.5);
  --shadow-teal: 0 0 28px rgba(0,212,160,.24);

  /* ── Typography ── */
  --font-sans:   'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --font-serif:  'Instrument Serif', Georgia, serif;
  --font-mono:   'JetBrains Mono', monospace;

  /* ── Transitions ── */
  --ease:        all 0.22s ease;
  --ease-slow:   all 0.4s ease;
}