:root {
  /* Paleta B — SaaS Dark (Slate + Indigo + Cyan) */
  --color-deep: #020617;
  --color-bg: #0f172a;
  --color-bg-mid: #0c1222;
  --color-surface: #162032;
  --color-surface-hover: #1c2840;

  /* Marca (links, destaques secundários) */
  --color-brand: #6366f1;
  --color-brand-light: #818cf8;
  --color-brand-muted: rgba(99, 102, 241, 0.12);

  /* Acento (CTAs, badges, foco) */
  --color-accent: #06b6d4;
  --color-accent-dark: #0891b2;
  --color-accent-light: #22d3ee;
  --color-accent-muted: rgba(6, 182, 212, 0.1);
  --color-accent-glow: rgba(6, 182, 212, 0.22);

  /* Texto */
  --color-text: #f1f5f9;
  --color-text-muted: #94a3b8;
  --color-gray: #64748b;

  /* Aliases legados (compatibilidade) */
  --color-navy: #f1f5f9;
  --color-navy-light: #162032;
  --color-navy-deep: #020617;
  --color-primary: #6366f1;
  --color-primary-dark: #4f46e5;
  --color-primary-light: #818cf8;
  --color-white: #ffffff;
  --color-ice: #94a3b8;
  --color-ice-light: #162032;
  --color-silver: #64748b;
  --color-bg-alt: #0c1222;
  --color-border: rgba(100, 116, 139, 0.18);
  --color-border-subtle: rgba(100, 116, 139, 0.12);
  --color-success: #34d399;
  --color-error: #f87171;

  /* Gradientes */
  --gradient-hero: linear-gradient(145deg, #020617 0%, #0f172a 50%, #0c1929 100%);
  --gradient-accent: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
  --gradient-text: linear-gradient(135deg, #22d3ee 0%, #818cf8 100%);
  --gradient-card-shine: linear-gradient(135deg, rgba(6, 182, 212, 0.06) 0%, rgba(99, 102, 241, 0.04) 100%);

  /* Tipografia — famílias */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* Tipografia — pesos */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Tipografia — escala (rem / 16px base) */
  --text-display: clamp(2rem, 4.5vw, 3.25rem);   /* Hero H1 */
  --text-h1: clamp(1.875rem, 3.5vw, 2.75rem);    /* Título de página */
  --text-h2: clamp(1.75rem, 3vw, 2.25rem);       /* Título de seção */
  --text-h3: 1.375rem;                            /* Subtítulo / card title */
  --text-lead: 1.0625rem;                         /* Parágrafo introdutório */
  --text-body: 1rem;                              /* Corpo padrão */
  --text-xl: 1.125rem;                            /* Hero descrição */
  --text-nav: 0.9375rem;                          /* Menu, botões secundários */
  --text-small: 0.875rem;                         /* Descrições, links footer */
  --text-caption: 0.8125rem;                      /* Labels, legal, meta */
  --text-eyebrow: 0.75rem;                        /* Eyebrow / badge label */
  --text-micro: 0.65rem;                          /* Taglines mínimas (legado) */

  /* Tipografia — line-height */
  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.7;

  /* Tipografia — letter-spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-wider: 0.06em;
  --letter-spacing-widest: 0.1em;

  /* Logos — tamanhos por contexto */
  --logo-extenso-height: 32px;
  --logo-extenso-height-sm: 28px;
  --logo-footer-width: 240px;
  --logo-tipografia-width: var(--logo-footer-width);
  --logo-miniatura-size: 40px;

  /* Seções — espaçamento e fundos */
  --section-padding-y: var(--space-4xl);
  --header-bg: rgba(2, 6, 23, 0.88);
  --footer-bg: var(--color-deep);
  --footer-text: rgba(255, 255, 255, 0.7);

  /* Espaçamento */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Layout */
  --container-max: 1140px;
  --container-narrow: 720px;
  --header-height: 72px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.25);
  --shadow-accent: 0 4px 24px var(--color-accent-glow);
  --shadow-glow-brand: 0 0 40px rgba(99, 102, 241, 0.12);

  /* Transições */
  --transition: 0.22s ease;
  --transition-slow: 0.35s ease;
}