/*
 * Design tokens gerados a partir das variáveis do Figma
 * (arquivo ZD8zej9JoZbHbStQ51PyH8, seção COMPONENTS, node 6011:969).
 * Nunca escrever hex direto no tema — sempre var(--color-*) etc.
 * Reexportar este arquivo sempre que novas variáveis aparecerem em outras telas.
 */
:root {
  /* Cor — ação */
  --color-action-primary:         #a61623;
  --color-action-primary-hover:   #89111c;
  --color-action-primary-pressed: #6f0d15;
  --color-action-subtle:          #fde7e9;
  --color-action-disabled:        #e0e0e0;

  /* Cor — fundo */
  --color-bg-page:    #ffffff;
  --color-bg-surface: #ffffff;
  --color-bg-subtle:  #f2f2f2;
  --color-bg-muted:   #e0e0e0;
  --color-bg-brand:   #a61623;
  --color-bg-inverse: #590a10;

  /* Cor — texto */
  --color-text-primary:    #1a1a1a;
  --color-text-secondary:  #575757;
  --color-text-disabled:   #8f8f8f;
  --color-text-on-action:  #ffffff;
  --color-text-on-inverse: #ffffff;
  --color-text-link:       #a61623;

  /* Cor — borda */
  --color-border-default: #c7c7c7;
  --color-border-strong:  #8f8f8f;
  --color-border-subtle:  #e0e0e0;
  --color-border-focus:   #a61623;

  /* Cor — feedback */
  --color-feedback-success:        #1e8a5f;
  --color-feedback-success-subtle: #e3f2ea;
  --color-feedback-success-text:   #146648;
  --color-feedback-warning:        #e0921a;
  --color-feedback-warning-subtle: #fdf0dc;
  --color-feedback-warning-text:   #8f5a05;
  --color-feedback-error:          #d14310;
  --color-feedback-error-subtle:   #fde9e0;
  --color-feedback-error-text:     #9e320b;
  --color-feedback-info:           #2a6db5;
  --color-feedback-info-subtle:    #e4edf7;
  --color-feedback-info-text:      #1b4c82;

  /* Tipografia — Outfit, escala áurea */
  --font-base:   'Outfit', system-ui, -apple-system, sans-serif;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* fs-body nunca é fluido: 16px é o piso de leitura e acompanha o zoom do
     navegador sem ruído. Os graus altos (h1/h2/h3) usam clamp() — rem nos
     extremos, vw só no termo do meio — calibrado pra bater exatamente nos
     valores fixos antigos no teto desktop (>= 1440px), sem mudar a aparência
     atual. lh-* viram razão (sem unidade) em vez de px pra escalar junto com
     o fs fluido e continuar acompanhando o zoom (WCAG 1.4.4). */
  --fs-body: 16px;
  --fs-h3:   clamp(1.25rem, 1.10rem + 0.8vw, 1.625rem); /* 20px → 26px */
  --fs-h2:   clamp(1.75rem, 1.30rem + 2.2vw, 2.625rem); /* 28px → 42px */
  --fs-h1:   clamp(2rem, 1.25rem + 3.8vw, 4.25rem);     /* 32px → 68px */

  --lh-label: 1.5;
  --lh-body:  1.625;
  --lh-h3:    1.231;
  --lh-h2:    1.143;
  --lh-h1:    1.118;

  /* Espaçamento — base 4 */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Raio */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* Layout — frame 1600, conteúdo máximo 1440, margem lateral 80 no teto.
     container-margin é responsivo — redefine a variável por viewport (mobile
     first) em vez de sobrescrever o padding em cada seletor que a usa. */
  --container-max:    1440px;
  --container-margin: 16px;
}

@media (min-width: 768px)  { :root { --container-margin: 24px; } }
@media (min-width: 1024px) { :root { --container-margin: 32px; } }
@media (min-width: 1440px) { :root { --container-margin: 80px; } }