/*
 * tokens.css — fonte única de tokens de design do site fernandosantoro.com.br
 * Cores, tipografia, layout, raio de borda e sombra.
 *
 * Carregado em TODAS as páginas, antes do CSS específico de cada uma
 * (style.css ou o CSS próprio de cada página de vendas).
 * Nunca duplicar este bloco :root em outro arquivo — ver administrativo/design-system.md.
 */

:root {
  /* Brand Core (azul petróleo) */
  --color-brand-primary: #02364C;
  --color-brand-primary-dark: #012635;
  --color-brand-primary-deep: #01161E;
  --color-brand-primary-black: #000B0F;

  /* Brand Light (azul claro) */
  --color-brand-light: #76CFF5;
  --color-brand-light-30: #9FDDF8;
  --color-brand-light-60: #C8ECFB;
  --color-brand-light-80: #E4F5FD;
  --color-brand-light-dark: #5391AC;
  /* #5391AC da apenas 3,49:1 sobre branco. Use a variante abaixo (4,97:1)
     sempre que o azul claro escuro for a cor de TEXTO sobre fundo claro;
     o token acima continua valido para fundos, bordas e graficos. */
  --color-brand-light-deep: #44768D;

  /* Accent (amarelo — destaque e informação) */
  --color-accent: #F5EE5D;
  --color-accent-light: #F8F38E;
  --color-accent-soft: #FBF8BE;
  --color-accent-bg: #FDFCDF;
  --color-accent-dark: #ACA741;
  /* #ACA741 da apenas 2,51:1 sobre branco. Use a variante abaixo (6,60:1)
     sempre que o amarelo escuro for a cor de TEXTO sobre fundo claro. */
  --color-accent-deep: #625F25;

  /* CTA (vermelho-coral — exclusivo para ações de compra) */
  --color-cta: #CC4431;
  --color-cta-light: #EC7C6A;
  --color-cta-soft: #F6BCB0;
  --color-cta-bg: #FCEAE6;
  --color-cta-dark: #AB331F;

  /* Neutrals */
  --color-text-primary: #01161E;
  --color-text-secondary: #2F5362;
  --color-text-muted: #4E7282;
  --color-background: #FFFFFF;
  --color-background-soft: #F7FBFD;
  /* Sem --color-border: as bordas do site sao TRANSLUCIDAS, para funcionarem
     sobre branco, azul claro e gradiente escuro com o mesmo valor. Um hex
     solido so serviria sobre branco. Ver secao 2 do design system. */

  /* Fonts */
  --font-heading: "Sora", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Sem monoespacada: --font-mono foi removido em set/2026. Ver secao 3 do
     design system antes de reintroduzir. */

  /* Escala tipografica */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.5rem;     /* 24px */
  --font-size-xl: 2rem;       /* 32px */
  --font-size-2xl: 2.75rem;   /* 44px */
  --font-size-3xl: 3.5rem;    /* 56px */

  /* Layout */
  --container-width: 1120px;
  --container-padding: 40px;

  /* Radius — escala recalibrada a partir do uso real no código (set/2026) */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  /* Shadow — escala recalibrada a partir do uso real no código (set/2026) */
  --shadow-xs: 0 14px 40px rgba(1, 22, 30, 0.08);
  --shadow-sm: 0 18px 50px rgba(1, 22, 30, 0.07);
  --shadow-md: 0 22px 64px rgba(1, 22, 30, 0.09);
  --shadow-lg: 0 30px 90px rgba(1, 22, 30, 0.18);
  --shadow-dark-sm: 0 18px 42px rgba(0, 0, 0, 0.20);
  --shadow-dark-lg: 0 24px 70px rgba(0, 0, 0, 0.20);
  --shadow-hero: 0 30px 85px rgba(0, 0, 0, 0.26);
  --shadow-brand: 0 20px 42px rgba(2, 54, 76, 0.28);
  --shadow-accent: 0 2px 4px rgba(1, 22, 30, 0.10), 0 6px 16px rgba(245, 238, 93, 0.26);
  /* Botao de compra: offset de 16px com blur de 36px destacava a sombra do
     botao e virava um borrao vermelho solto embaixo dele. Duas camadas curtas
     (contato + elevacao) mantem o realce da cor colado na forma da pilula. */
  --shadow-cta: 0 2px 4px rgba(1, 22, 30, 0.10), 0 6px 16px rgba(204, 68, 49, 0.24);
  /* Anel de foco de teclado: camada interna na cor do fundo + camada externa
     no azul da marca, para continuar visivel sobre secoes claras E escuras.
     Uso exclusivo de :focus-visible — nunca como brilho decorativo. */
  --shadow-focus-ring: 0 0 0 3px var(--color-background), 0 0 0 6px var(--color-brand-primary);
}

/* Ajuste responsivo do unico token que varia por breakpoint.
   Fica aqui para que nenhum outro arquivo precise redeclarar :root. */
@media (max-width: 768px) {
  :root {
    --container-padding: 32px;
  }
}