/**
 * Tokens da marca TraQ!.
 * Extraídos 1:1 do design system dos decks (skill proposta-comercial).
 * Documentação e regras de uso: README.md deste repositório.
 *
 * As variáveis --font-display / --font-body / --font-mono NÃO são definidas
 * aqui: cada projeto as aponta para os arquivos de fonts/ (na web, via
 * @font-face ou a Fonts API do framework — ver traq-site/astro.config.ts).
 */

:root {
  /* ---- Marca ---- */
  --navy: #03243e;
  --navy-deep: #021a2e;
  --navy-ink: #0b2b45;
  --yellow: #f1e41a;
  --paper: #f6f5f0;
  --white: #ffffff;

  /* ---- Texto de apoio ---- */
  --mut-d: #8fa0ae; /* secundário sobre escuro */
  --mut-l: #52616e; /* secundário sobre claro */

  /**
   * COR DE DESTAQUE — sempre use --accent, nunca --yellow direto, em qualquer
   * coisa que precise ser LIDA (texto, ícone, fio, marcador, anel de foco).
   * O amarelo tem 1.21:1 sobre o papel: some. Por isso o destaque troca de cor
   * conforme a superfície. Default = claro; .s-dark sobrescreve no global.css.
   *
   * --yellow direto só onde o amarelo é FUNDO (botão primário) e o texto por
   * cima é navy.
   */
  --accent: var(--navy);

  /* ---- Fios ---- */
  --hair-d: rgba(255, 255, 255, 0.1);
  --hair-l: rgba(3, 36, 62, 0.1);

  /* ---- Movimento ---- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 0.7s;

  /* ---- Raios (proporção do deck, reduzida para web) ---- */
  --r-out: 24px;
  --r-pad: 8px;
  --r-in: 16px;
  --r-btn: 999px;

  /* ---- Tipografia ---- */
  --fs-hero: clamp(2.5rem, 1.4rem + 4.6vw, 5rem);
  --fs-h2: clamp(2rem, 1.3rem + 2.9vw, 3.5rem);
  --fs-h3: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-mono: 0.8125rem;

  --lh-tight: 1.08;
  --lh-title: 1.15;
  --lh-body: 1.6;
  --track-mono: 0.2em;

  /* ---- Espaçamento (múltiplos de 8) ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-section: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 3rem);
  --header-h: 76px;

  /* ---- Sombras (dois níveis, nunca preto puro) ---- */
  --shadow-card: 0 34px 70px -34px rgba(3, 36, 62, 0.22);
  --shadow-cta: 0 24px 60px -18px rgba(241, 228, 26, 0.45);
}

@media (max-width: 640px) {
  :root {
    --r-out: 20px;
    --r-in: 14px;
    --header-h: 64px;
  }
}