/* Tokens de design — cópia do bloco :root de frontend/src/styles/tokens.css
   (sem bloco @theme, que é namespace do Tailwind v4; landing usa CSS vanilla).
   Mantenha em sincronia com o original se os tokens do app mudarem. */

:root {
  /* Paleta primária (referenciada pelos aliases abaixo) */
  --color-primary-500: #00a550;
  --color-primary-600: #009247;
  --color-primary-700: #007c3c;
  --color-primary-800: #006631;
  --color-primary-900: #004d22;
  --color-brand-on-primary: #ffffff;
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #eeeeee;
  --color-neutral-300: #dddddd;
  --color-neutral-400: #bbbbbb;
  --color-neutral-600: #666666;
  --color-neutral-800: #333333;
  --color-overlay:     rgba(0,0,0,0.45);
  /* Tonalidades claras do verde (gradient do hero/cta-final) */
  --color-primary-50:  #e6f7ee;
  --color-primary-100: #c3ecda;
  /* alias de marca/superfície/texto/borda */
  --brand-primary:         var(--color-primary-500);
  --brand-primary-hover:   var(--color-primary-600);
  --brand-primary-active:  var(--color-primary-700);
  --brand-on-primary:      var(--color-brand-on-primary);
  --surface-default:       var(--color-neutral-0);
  --surface-muted:         var(--color-neutral-50);
  --surface-subtle:        var(--color-neutral-100);
  --text-primary:          var(--color-neutral-800);
  --text-secondary:        var(--color-neutral-600);
  --text-placeholder:      var(--color-neutral-400);
  --border-subtle:         var(--color-neutral-200);
  --border-default:        var(--color-neutral-300);
  /* badges e overlay */
  --overlay-bg:        var(--color-overlay);
  /* Espaçamento */
  --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;
  /* Paddings/gap compostos */
  --pad-btn:   8px 16px;
  --pad-input: 8px 10px;
  --pad-card:  12px;
  --pad-modal: 24px;
  --pad-page:  24px;
  --gap-xs: var(--space-2);
  --gap-sm: var(--space-3);
  --gap-md: var(--space-4);
  --gap-lg: var(--space-6);
  /* Transições */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  /* Tipografia (tamanhos e pesos — no app vivem em @theme do Tailwind v4;
     duplicados aqui porque a landing não passa pelo Tailwind) */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --leading-tight:  1.1;
  /* Raios */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  /* Espaçamento extra (no app os números maiores ficam compostos via @theme) */
  --space-16: 64px;
  /* Só da landing (não existem no app): header translúcido e sombras dos cards */
  --surface-header: rgba(255,255,255,0.95);
  --shadow-card:    0 12px 32px rgba(0,0,0,0.08);
  --shadow-menu:    0 4px 16px rgba(0,0,0,0.08);
}