/* ================================================================
   BLOGSIGNAL — Design Tokens
   Ultra-dark editorial blog aesthetic
   Inspired by: Linear, Vercel, Basement Studio, Paco Courrier
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Serif+Display:ital@0;1&family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ── Raw Background Scale ── */
  --void:       #000000;
  --bg-0:       #030304;
  --bg-1:       #080809;
  --bg-2:       #0e0e10;
  --bg-3:       #141416;
  --bg-4:       #1a1a1e;
  --bg-5:       #212126;

  /* ── Surface & Card ── */
  --surface-1:  rgba(255,255,255,0.028);
  --surface-2:  rgba(255,255,255,0.055);
  --surface-3:  rgba(255,255,255,0.08);

  /* ── Accent — Electric Lime ── */
  --lime:       #c8ff00;
  --lime-dim:   rgba(200,255,0,0.12);
  --lime-glow:  rgba(200,255,0,0.3);
  --lime-soft:  #d4ff33;

  /* ── Accent 2 — Neon Coral ── */
  --coral:      #ff4d6d;
  --coral-dim:  rgba(255,77,109,0.12);

  /* ── Accent 3 — Ice Blue ── */
  --ice:        #7dd3fc;
  --ice-dim:    rgba(125,211,252,0.1);

  /* ── Neutral Tints ── */
  --zinc-100:   #f4f4f5;
  --zinc-200:   #e4e4e7;
  --zinc-400:   #a1a1aa;
  --zinc-500:   #71717a;
  --zinc-600:   #52525b;
  --zinc-700:   #3f3f46;
  --zinc-800:   #27272a;
  --zinc-900:   #18181b;

  /* ── Text ── */
  --text-1:     #f8f8f8;
  --text-2:     #b4b4b8;
  --text-3:     #6b6b72;
  --text-4:     #3d3d42;

  /* ── Borders ── */
  --border-1:   rgba(255,255,255,0.055);
  --border-2:   rgba(255,255,255,0.10);
  --border-3:   rgba(255,255,255,0.18);
  --border-lime: rgba(200,255,0,0.35);

  /* ── Typography ── */
  --font-display:  'Bebas Neue', sans-serif;
  --font-serif:    'DM Serif Display', Georgia, serif;
  --font-body:     'Geist', system-ui, sans-serif;
  --font-mono:     'Geist Mono', 'Fira Code', monospace;

  /* ── Spacing ── */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --sp-32: 128px;

  /* ── Radius ── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 9999px;

  /* ── Motion ── */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  140ms;
  --dur-base:  220ms;
  --dur-slow:  380ms;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.6);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.5);
  --shadow-lg:   0 12px 48px rgba(0,0,0,0.8), 0 4px 12px rgba(0,0,0,0.5);
  --shadow-xl:   0 24px 80px rgba(0,0,0,0.9);
  --shadow-lime: 0 0 30px rgba(200,255,0,0.18), 0 0 80px rgba(200,255,0,0.08);
  --shadow-card: 0 1px 1px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.055);

  /* ── Z-index ── */
  --z-base: 1; --z-raised: 10; --z-modal: 100; --z-nav: 200; --z-toast: 300;
}