/* ==========================================================================
   tokens.css — Fix&Trust
   Só variáveis. Três camadas: primitivas → semânticas → componente.
   Os hex de marca foram medidos no logo. Não alterar.
   Contraste: --brand-500 NUNCA leva texto branco (2.98:1).
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- 1. PRIMITIVAS ---------- */

  /* Marca — laranja (logo: #F16F21) */
  --brand-50:  #FEF1E8;
  --brand-100: #FCDCC6;
  --brand-400: #F58A48;
  --brand-500: #F16F21;
  --brand-600: #C4551A;
  --brand-700: #A8470F;

  /* Marca — azul (logo: #154D80) */
  --navy-500: #154D80;
  --navy-700: #0D3A63;
  --navy-900: #0A2C4D;

  /* Neutros derivados do cinza do mandril (#687985) */
  --ink:      #0A2C4D;
  --ink-soft: #4A5A66;
  --steel:    #687985;
  --line:     #E3E8ED;
  --surface:  #F7F9FB;
  --white:    #FFFFFF;

  /* Feedback (só validação de formulário) */
  --error:    #B3261E;
  --success:  #1E6B3A;

  /* Tipografia */
  --font-display: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* frase de destaque nos títulos: itálico do Source Sans 3 contra a Outfit */
  --font-accent: "Source Sans 3", Georgia, serif;

  /* Escala fluida (mobile 360px → desktop 1280px) */
  --text-xs:   0.8125rem;                              /* 13px  — legendas */
  --text-sm:   0.9375rem;                              /* 15px  — micro-copy */
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); /* 16→18px */
  --text-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); /* 18→22px */
  --text-xl:   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);   /* 22→28px — h3 */
  --text-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);     /* 28→40px — h2 */
  --text-3xl:  clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);    /* 34→56px — h1 */
  --text-price: clamp(2.5rem, 2rem + 3vw, 4rem);           /* 40→64px — números de preço */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-body: 1.55;

  /* Espaçamento (base 4px) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Raio — espelha o stroke arredondado do logo */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Sombra — uma só, discreta, com tom navy (não cinza) */
  --shadow: 0 1px 2px rgb(10 44 77 / 0.06), 0 6px 20px rgb(10 44 77 / 0.08);
  --shadow-lg: 0 2px 4px rgb(10 44 77 / 0.06), 0 24px 60px -12px rgb(10 44 77 / 0.25);

  /* Movimento */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  /* Layout */
  --container: 72rem;    /* 1152px */
  --container-narrow: 46rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section-gap: clamp(3.5rem, 6vw + 1rem, 6.5rem);
  --nav-height: 5rem;      /* altura fixa do header (logo + padding) */
  --topbar-height: 3.5rem; /* altura fixa da barra superior */
  --touch-min: 2.75rem; /* 44px */

  /* Breakpoints (documentação — var() não funciona em @media)
     sm: 40em (640px) · md: 64em (1024px) · lg: 80em (1280px) */

  /* ---------- 2. SEMÂNTICAS ---------- */

  --color-bg: var(--white);
  --color-bg-alt: var(--surface);
  --color-bg-dark: var(--navy-900);
  --color-bg-dark-alt: var(--navy-700);

  --color-text: var(--ink);
  --color-text-soft: var(--ink-soft);
  --color-text-on-dark: var(--white);
  --color-text-on-dark-soft: #C9D3DE;   /* 9.4:1 sobre navy-900, 7.7:1 sobre navy-700 */

  --color-heading: var(--navy-500);
  --color-heading-on-dark: var(--white);

  --color-accent: var(--brand-500);       /* ícones, filetes, números */
  --color-accent-text: var(--brand-700);  /* laranja em texto sobre claro (5.9:1) */
  --color-accent-on-dark: var(--brand-400); /* laranja em texto sobre navy (5.8:1) */
  --color-accent-soft: var(--brand-50);

  --color-cta: var(--brand-600);
  --color-cta-hover: var(--brand-700);
  --color-cta-text: var(--white);

  --color-border: var(--line);
  --color-border-strong: var(--steel);
  /* Foco: brand-600 sobre claro (4.51:1); brand-500 sobre navy (4.75:1) — brand-500 sobre branco dá só 2.98:1 */
  --color-focus: var(--brand-600);
  --color-focus-on-dark: var(--brand-500);

  --color-link: var(--navy-500);
  --color-link-hover: var(--brand-700);

  /* ---------- 3. COMPONENTE ---------- */

  --btn-height: 3.25rem;          /* 52px */
  --btn-height-lg: 3.5rem;        /* 56px — /redirect */
  --btn-padding-x: var(--space-6);
  --btn-radius: var(--radius-pill);
  --btn-font: 600 var(--text-base) / 1 var(--font-display);

  --card-bg: var(--white);
  --card-border: 1px solid var(--color-border);
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-6);

  --input-height: 3.25rem;
  --input-bg: var(--white);
  --input-border: 1.5px solid var(--color-border-strong);
  --input-radius: var(--radius-sm);
  --input-padding-x: var(--space-4);

  --rule-width: 3rem;             /* filete de marca sob h2 */
  --rule-height: 6px;

  --fab-size: 3.75rem;            /* 60px — WhatsApp flutuante */
}