/* ==========================================================================
   variables.css — Design tokens (custom properties)
   Cores, tipografia, espaçamentos e demais tokens do design system.
   ========================================================================== */

:root {
   /* ---------- Cores / Colors ---------- */
   /* Fundo escuro com acentos vibrantes: tom tecnológico da marca */
   --color-bg: #0b1020;
   --color-bg-alt: #0f1630;
   --color-surface: #151d38;
   --color-surface-hover: #1b2547;
   --color-border: #263156;

   --color-primary: #5b8cff;
   --color-primary-strong: #7da4ff;
   --color-accent: #18C5A3;

   --color-text: #e8ecf7;
   --color-text-muted: #a3aecb;
   --color-text-inverse: #0b1020;

   --color-success: #34d399;
   --color-error: #f87171;

   /* Gradiente da marca usado em títulos e CTAs */
   --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);

   /* ---------- Tipografia / Typography ---------- */
   /* Pilha de fontes do sistema: zero requisições externas.
     TODO: substituir por fonte própria em /assets/fonts se a marca exigir. */
   --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

   --text-xs: 0.75rem;
   /* 12px */
   --text-sm: 0.875rem;
   /* 14px */
   --text-base: 1rem;
   /* 16px */
   --text-lg: 1.125rem;
   /* 18px */
   --text-xl: 1.375rem;
   /* 22px */
   --text-2xl: 1.75rem;
   /* 28px */
   --text-3xl: 2.25rem;
   /* 36px */
   --text-4xl: 3rem;
   /* 48px */

   --font-regular: 400;
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;

   --leading-tight: 1.2;
   --leading-normal: 1.6;

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

   /* ---------- Layout ---------- */
   --container-max: 72rem;
   /* 1152px */
   --container-padding: var(--space-4);
   --header-height: 4.25rem;

   /* ---------- Bordas e sombras / Borders & shadows ---------- */
   --radius-sm: 0.375rem;
   --radius-md: 0.75rem;
   --radius-lg: 1.25rem;
   --radius-full: 999px;

   --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
   --shadow-card-hover: 0 12px 32px rgba(34, 211, 238, 0.12);

   /* ---------- Transições / Transitions ---------- */
   --transition-fast: 150ms ease;
   --transition-base: 250ms ease;
}