/**
 * Design System Tokens: WhatsApp Tools Modern Dark Cyber Aesthetic
 * Defines colors, spacing, typography scales, glassmorphism, and glow variables.
 */
:root {
  /* Color Palette - Deep Obsidian & Cyber Emerald */
  --bg-black: #060907;
  --bg-deep: #090e0b;
  --bg-surface: #0f1713;
  --bg-surface-elevated: #15221b;
  --bg-glass-card: rgba(18, 28, 22, 0.65);
  --bg-glass-card-hover: rgba(24, 39, 31, 0.85);

  /* WhatsApp Brand & Neon Accents */
  --emerald-main: #10b981;
  --emerald-bright: #25d366; /* WhatsApp signature neon */
  --emerald-light: #6ee7b7;
  --emerald-dark: #065f46;
  --emerald-glow: rgba(37, 211, 102, 0.28);
  --emerald-subtle: rgba(16, 185, 129, 0.12);
  --cyan-accent: #38bdf8;
  --amber-accent: #fbbf24;

  /* Text & Inks */
  --text-primary: #f5f8f6;
  --text-secondary: #9ba9a0;
  --text-muted: #64746a;
  --text-inverse: #050a07;

  /* Borders & Dividers */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-glass: rgba(110, 231, 183, 0.18);
  --border-focus: rgba(37, 211, 102, 0.5);
  --border-bright: rgba(255, 255, 255, 0.16);

  /* Shadows & Glows */
  --shadow-card: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 35px -5px var(--emerald-glow);
  --shadow-glow-lg: 0 0 65px -10px rgba(16, 185, 129, 0.35);

  /* Layout & Dimensions */
  --max-width-site: 1240px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 9999px;

  /* Typography Scales */
  --font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Noto Sans SC", sans-serif;
  --font-family-mono: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}