/* tokens.css - WGM Design Tokens for Gestor de Tráfego IA */
:root {
  /* 1. Color primitives */
  --it-ink: #0A0A0A;
  --it-ink-2: #141414;
  --it-ink-3: #1F1F1F;
  --it-line: #2A2A2A;
  --it-line-strong: #3A3A3A;
  --it-lime: #C8E64A;
  --it-lime-hover: #D4F25C;
  --it-lime-ink: #1A2007;
  --it-lime-rgb: 200, 230, 74;

  --success: #6FD16F;
  --warning: #FFB020;
  --danger: #FF5A4E;
  --info: #58C4DD;

  --success-rgb: 111, 209, 111;
  --warning-rgb: 255, 176, 32;
  --danger-rgb: 255, 90, 78;
  --info-rgb: 88, 196, 221;

  --white: #FFFFFF;
  --gray-400: #A0A0A0;
  --gray-500: #6C6C6C;

  /* 2. Typography primitives */
  --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Futura LT Cond", "Arial Narrow", Impact, sans-serif;

  /* 3. Radius primitives */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 12px;
  --radius-card: 16px;
  --radius-full: 999px;

  /* 4. Spacing primitives (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* 5. Shadow / elevation */
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.28);

  /* 6. Motion */
  --duration-fast: 180ms;
  --ease-default: ease;

  /* 7. Semantic mapping */
  --bg-main: var(--it-ink);
  --bg-panel: var(--it-ink-2);
  --surface: var(--it-ink-2);
  --surface-elevated: var(--it-ink-3);
  --border: var(--it-line);
  --border-light: var(--it-line-strong);

  --primary: var(--it-lime);
  --primary-hover: var(--it-lime-hover);
  --primary-soft: rgba(var(--it-lime-rgb), 0.15);

  --text-main: var(--white);
  --text-sec: var(--gray-400);
  --text-muted: var(--gray-500);

  --focus-ring: 0 0 0 3px rgba(var(--it-lime-rgb), 0.12);
  --focus-border: rgba(var(--it-lime-rgb), 0.65);
}