/* ==========================================================================
   VARIABLES — Design tokens
   Cores extraídas da arte de referência da seção 1.
   Títulos em Kagsto; textos em Inter.
   ========================================================================== */

/* ==========================================================================
   >>>>>>>>>>>>>>>>  TROQUE AQUI O ARQUIVO DA FONTE  <<<<<<<<<<<<<<<<

   Coloque o arquivo da fonte em  fonts/Kagsto.woff2  (ou .otf).
   Enquanto ele não estiver lá, os títulos caem no fallback "Unbounded",
   carregado do Google Fonts — o site não quebra.

   Para usar outra fonte: troque o caminho abaixo e o nome da família
   em --font-titulo. Os títulos do site inteiro mudam de uma vez.
   ========================================================================== */

@font-face {
  font-family: "Kagsto";
  src: url("../fonts/Kagsto.woff2") format("woff2"),
       url("../fonts/Kagsto.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


:root {
  /* ---------- Cores de marca (extraídas da arte de referência) ---------- */
  --color-orange:        #f55102;  /* laranja base da marca */
  --color-orange-bright: #fd6102;  /* núcleo do gradiente (centro da arte) */
  --color-orange-mid:    #f85402;
  --color-orange-deep:   #ea4503;  /* bordas do gradiente */
  --color-orange-dark:   #d13a02;  /* sombras sobre laranja */
  --color-orange-shadow: #a32c02;  /* sombra projetada */

  --color-brand: var(--color-orange);
  --color-brand-dark: var(--color-orange-deep);
  --color-brand-light: var(--color-orange-bright);
  --color-accent: #ffffff;

  /* Superfícies escuras derivadas do laranja da marca */
  --color-footer-bg: #24100a;
  --color-dark-surface: #351a11;

  /* Cores da bandeira do Brasil (usadas na palavra "Brasil") */
  --flag-green: #009c3b;
  --flag-yellow: #ffdf00;
  --flag-blue: #002776;

  /* ---------- Neutros ---------- */
  --color-bg: #ffffff;
  /* fundo contínuo por trás das seções: é ele que aparece nas junções */
  --color-page-bg: var(--color-orange);
  --color-bg-alt: #f6f7f9;
  --color-surface: #ffffff;
  --color-border: #e3e6ea;
  --color-text: #15191f;
  --color-text-muted: #5b6472;
  --color-text-invert: #ffffff;

  /* ---------- Estados ---------- */
  --color-focus: #2563eb;
  --color-success: #16a34a;
  --color-error: #dc2626;

  /* ---------- Tipografia ---------- */
  /* Famílias */
  /* Fonte dos títulos — trocar aqui muda o site inteiro.
     "Unbounded" é o fallback do Google Fonts: entra sozinho enquanto o
     arquivo da Kagsto não estiver na pasta fonts/. */
  --font-titulo: "Kagsto", "Unbounded", sans-serif;
  --font-display: var(--font-titulo);

  /* Fonte dos números da contagem: a Nunito Sans, primeira fonte de texto
     do site, em peso leve — arredondada e de traço fino. */
  --font-numero: "Nunito Sans", "Segoe UI", system-ui, sans-serif;

  /* Fonte dos textos: simples e legível, para contrastar com os títulos */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---------- Escala tipográfica ----------
     Projetada para leitura confortável: corpo maior que o padrão de mercado
     e nada abaixo de 16px. Valores min/max de cada clamp em px:
       xs   16 -> 17     (legendas, avisos)
       sm   18 -> 20     (textos secundários)
       base 19 -> 22     (corpo, parágrafos)
       lg   21 -> 24     (texto principal em destaque / lead)
       xl   28 -> 36     (títulos menores, Anton)
       2xl  34 -> 48     (títulos de seção, Anton)
       3xl  40 -> 68     (título de destaque, Anton)
       4xl  48 -> 88     (título principal do topo, Anton)
  */
  --fs-xs:   clamp(1rem,       0.975rem + 0.12vw, 1.0625rem);
  --fs-sm:   clamp(1.125rem,   1.09rem  + 0.18vw, 1.25rem);
  --fs-base: clamp(1.1875rem,  1.13rem  + 0.28vw, 1.375rem);
  --fs-lg:   clamp(1.3125rem,  1.22rem  + 0.42vw, 1.5rem);
  --fs-xl:   clamp(1.75rem,    1.6rem   + 0.7vw,  2.25rem);
  --fs-2xl:  clamp(1.75rem,    1.55rem  + 1vw,    2.5rem);
  /* h2 das seções */
  --fs-3xl:  clamp(2rem,       1.65rem  + 1.75vw, 3.5rem);
  /* h1 */
  --fs-4xl:  clamp(2.5rem,     1.95rem  + 2.75vw, 4.5rem);

  /* Tamanhos de componentes */
  --fs-button: clamp(1.125rem, 1.09rem + 0.18vw, 1.25rem);
  --fs-nav:    clamp(1.125rem, 1.09rem + 0.18vw, 1.25rem);

  /* Altura de linha */
  /* 1.05 fecha demais: a cedilha de "PREGUIÇA" encosta na linha seguinte,
     e o acento de "ESTÁ" quase toca a de cima. 1.14 mantém o título
     compacto e dá espaço para os acentos do português. */
  --lh-display: 1.14;
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.7;

  /* Espaçamento entre letras */
  --ls-display: -0.012em;
  --ls-tight: -0.01em;
  --ls-wide: 0.06em;

  /* Pesos (Nunito Sans; Anton possui apenas 400) */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Largura máxima de linha para leitura confortável */
  --measure: 62ch;
  --measure-narrow: 46ch;

  /* ---------- Espaçamento (escala 4px) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Respiro vertical padrão das seções (fluido) */
  --section-padding-y: clamp(3rem, 7vw, 7rem);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-wide: 1440px;
  --container-narrow: 760px;
  --container-gutter: clamp(1rem, 4vw, 2.5rem);

  /* ---------- Raios ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;

  /* ---------- Camadas ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-backdrop: 150;
  --z-header: 200;
  --z-overlay: 300;
  --z-modal: 400;
}