/* tokens.css — FONTE ÚNICA de cores, espaçamentos e tipografia (normativo).
   Derivado da logo oficial MagTeg: tema escuro + gradiente ciano→azul→roxo.
   Proibido hex literal em outros arquivos CSS. Ver mem/architecture/visual-identity.md */

:root {
  /* Cores base (tema escuro) */
  --color-bg: #10131a;
  --color-surface: #171b24;
  --color-surface-2: #1f2531;
  --color-border: #2a3140;

  /* Gradiente da marca (135°, mesma diagonal da logo) */
  --grad-cyan: #2fc0f2;
  --grad-blue: #3b7bf6;
  --grad-purple: #8a5cf6;
  --gradient-brand: linear-gradient(135deg, var(--grad-cyan) 0%, var(--grad-blue) 52%, var(--grad-purple) 100%);

  /* Acentos */
  --color-accent: var(--grad-cyan);
  --color-text: #f4f6fb;
  --color-text-muted: #9aa4b8;

  /* Tipografia */
  --font-heading: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Escala tipográfica (fluida) */
  --text-xs: clamp(0.78rem, 0.75rem + 0.15vw, 0.85rem);
  --text-sm: clamp(0.9rem, 0.87rem + 0.15vw, 0.97rem);
  --text-md: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --text-lg: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  --text-xl: clamp(1.55rem, 1.3rem + 1.2vw, 2.2rem);
  --text-2xl: clamp(2rem, 1.6rem + 2vw, 3.1rem);
  --text-hero: clamp(2.35rem, 1.7rem + 3.2vw, 4.1rem);

  /* Espaçamentos */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Raios e sombras */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 2px 10px rgb(0 0 0 / 0.25);
  --shadow-2: 0 14px 40px rgb(0 0 0 / 0.35);
  --glow-brand: 0 10px 34px rgb(59 123 246 / 0.28);

  /* Layout */
  --container-max: 1120px;
  --header-h: 72px;
}