/* ===========================================================================
   Bússola 2026 · tokens
   Dois níveis: primitivos (a paleta da marca) e semânticos (o que o resto usa).
   Nenhuma regra de componente deve referenciar um --c-* diretamente.
   Cores amostradas do documento impresso e do mockup em 10/09/2026.
   =========================================================================== */

:root {
  color-scheme: light;

  /* --- primitivos: cor ---------------------------------------------------- */
  --c-amber:        #fbca0a;  /* amarelo da marca, campo do hero */
  --c-amber-dark:   #e0b200;  /* hover de botão amarelo */
  --c-ink:          #231f20;  /* preto rico do impresso */
  --c-ink-soft:     #3a3536;
  --c-cream:        #fcf9f2;  /* fundo das seções claras */
  --c-white:        #ffffff;
  --c-gray:         #5b5652;  /* 7,25:1 no branco */
  --c-gray-line:    #e3ded6;

  --c-red:          #ec1d25;  /* vermelho da marca; só em texto grande */
  --c-red-aa:       #d40f16;  /* 5,41:1 no branco; botões e links */
  --c-red-dark:     #b30b11;
  --c-green:        #3db13d;  /* verde do logo; decorativo */
  --c-green-aa:     #2e7d32;  /* 5,13:1 no branco */
  --c-blue-aa:      #3a48a0;  /* 8,03:1 no branco */

  /* --- primitivos: tipografia --------------------------------------------- */
  --ff-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-900: clamp(2.125rem, 1.45rem + 3.1vw, 3.75rem);
  --fs-800: clamp(1.75rem, 1.3rem + 2.1vw, 2.875rem);
  --fs-700: clamp(1.375rem, 1.15rem + 1.05vw, 2rem);
  --fs-600: clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem);
  --fs-500: 1.0625rem;
  --fs-400: 1rem;
  --fs-300: 0.9375rem;
  --fs-200: 0.8125rem;

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  /* --- primitivos: espaço, forma, movimento ------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(35 31 32 / 0.06), 0 2px 8px rgb(35 31 32 / 0.05);
  --shadow-md: 0 4px 12px rgb(35 31 32 / 0.08), 0 12px 32px rgb(35 31 32 / 0.07);
  --shadow-lg: 0 12px 28px rgb(35 31 32 / 0.14), 0 32px 64px rgb(35 31 32 / 0.12);

  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --dur:  180ms;

  --maxw:   1180px;
  --maxw-text: 68ch;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* --- semânticos --------------------------------------------------------- */
  --bg-page:     var(--c-white);
  --bg-muted:    var(--c-cream);
  --bg-brand:    var(--c-amber);
  --bg-dark:     var(--c-ink);
  --bg-surface:  var(--c-white);

  --text-heading: var(--c-ink);
  --text-body:    var(--c-gray);
  --text-inverse: var(--c-white);
  --text-on-brand: var(--c-ink);

  --border-subtle: var(--c-gray-line);
  --focus-ring:    var(--c-blue-aa);

  --btn-primary-bg:    var(--c-red-aa);
  --btn-primary-fg:    var(--c-white);
  --btn-primary-hover: var(--c-red-dark);

  --btn-brand-bg:    var(--c-amber);
  --btn-brand-fg:    var(--c-ink);
  --btn-brand-hover: var(--c-amber-dark);

  --btn-dark-bg:    var(--c-ink);
  --btn-dark-fg:    var(--c-white);
  --btn-dark-hover: #000;

  --stat-1: var(--c-red-aa);
  --stat-2: var(--c-green-aa);
  --stat-3: var(--c-blue-aa);
}