/* ==========================================================================
   tokens.css — Variáveis do Design System FQD Studios
   Fonte única: design-system-fqd-studios.md (cores, tipografia, espaçamento,
   breakpoints, movimento). Nunca hardcodar hex/tamanho fora daqui.
   ========================================================================== */

:root {
  /* --- Cores: base neutra (tema escuro) — design system, seção 1 --------- */
  --bg: #121214;              /* Fundo base da página */
  --surface: #1B1C20;         /* Cards, hero, blocos elevados */
  --surface-2: #202126;       /* Blocos secundários (caixa de nota/aviso) */
  --border: #2A2B30;          /* Bordas padrão (1px) */
  --border-hover: #3A3C44;    /* Borda em hover */
  --text-primary: #F2F0EA;    /* Texto principal (off-white quente) */
  --text-secondary: #9C9FA6;  /* Texto de apoio, subtítulos */

  /* --- Cores vivas do logo — usadas só como destaque -------------------- */
  --accent-yellow: #FFD02A;   /* Reservado pro CTA principal */
  --accent-yellow-ink: #241C02; /* Texto por cima do amarelo (contraste AA) */
  --accent-red: #E13B3B;      /* Detalhe pontual: ícone, badge, hover */
  --accent-red-deep: #AC2129; /* Estado hover de elemento já vermelho */
  --accent-navy: #3B7CA8;     /* Detalhe pontual secundário (variante clara) */
  --accent-navy-deep: #21587E;/* Azul marinho base */
  --section-navy: #1A4663;    /* Azul marinho escurecido — fundo da seção de serviços */
  --cream: #F6EEE2;           /* Registrado; base de eventual tema claro */

  /* --- Tipografia — design system, seção 2 ------------------------------ */
  --font-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-h1: clamp(28px, 5vw, 42px);          /* Hero, fluido, nunca < 28px */
  --fs-h2: 21px;                            /* Título de seção (mobile) */
  --fs-h2-desktop: 26px;                    /* Título de seção (desktop) */
  --fs-eyebrow: 12px;                       /* Etiqueta (mobile) */
  --fs-eyebrow-desktop: 13px;               /* Etiqueta (desktop) */
  --fs-body: clamp(15px, 2.2vw, 17px);      /* Corpo/subtítulo */
  --fs-card: 14px;                          /* Texto de card/apoio */

  --ls-eyebrow: 0.08em;                     /* Letter-spacing da etiqueta */
  --ls-section-label: 0.1em;

  /* --- Espaçamento — múltiplos de 4px, design system seção 3 ------------ */
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-40: 40px;
  --space-56: 56px;
  --space-64: 64px;
  --space-96: 96px;

  /* --- Layout ----------------------------------------------------------- */
  --container-max: 1200px;
  --pad-inline: 24px;         /* Padding lateral desktop */
  --pad-inline-mobile: 16px;  /* Padding lateral mobile */

  /* --- Raios ------------------------------------------------------------ */
  --radius-card: 12px;
  --radius-hero: 16px;
  --radius-hero-mobile: 12px;
  --radius-btn: 8px;
  --radius-pill: 999px;

  /* --- Movimento — design system, seção 6 ------------------------------- */
  --ease: ease;
  --dur-reveal: 0.45s;
  --dur-card: 0.2s;
  --dur-btn: 0.15s;
  --dur-accordion: 0.25s;
  --dur-carousel: 0.3s;
}