/* ==========================================================================
   FAETUR · DESIGN TOKENS  (fonte da verdade do design system)
   Direção: Opção B — "Papel & Terra" (light, arejado, editorial-caloroso)
   Regra: nenhum componente usa valor bruto de cor/espaço/fonte — só tokens.
   ========================================================================== */

/* ---- Fontes auto-hospedadas ---------------------------------------------- */
/* Ambas variáveis (um arquivo cobre a faixa de pesos). */
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Cor -----------------------------------------------------------------
     Papel & Terra: fundo areia/marfim, texto grafite (da logo), vermelho
     Faetur como acento, terracota de apoio. Contraste verificado p/ WCAG AA
     (texto normal ≥ 4.5:1 sobre --color-bg). */
  --color-bg:          #F6F1E9;  /* areia clara (fundo)                        */
  --color-surface:     #FCFAF5;  /* marfim (superfície elevada)               */
  --color-surface-2:   #EFE7D9;  /* areia média (hover/divisórias/preenchidos)*/
  --color-ink:         #2A2724;  /* texto principal — grafite ~13:1           */
  --color-muted:       #5E554C;  /* texto secundário ~5.4:1 (AA)              */
  --color-faint:       #6B6157;  /* rótulos/legal ~4.7:1 (AA)                 */
  --color-line:        #E4DACA;  /* hairlines / bordas discretas              */
  --color-accent:      #B72B1F;  /* vermelho Faetur — CTA/destaque            */
  --color-accent-hot:  #9E2118;  /* vermelho escuro — hover e texto de ênfase */
  --color-accent-2:    #C15A33;  /* terracota — acento de apoio (AA em texto) */
  --color-accent-ink:  #FFFFFF;  /* texto sobre o vermelho (≥5.5:1)           */
  --color-focus:       #2A2724;  /* anel de foco — grafite, alto contraste    */
  --color-pending-bg:  #F2B441;  /* marcador [[PENDENTE]] — âmbar highlighter  */
  --color-pending-ink: #2A2724;  /* texto do marcador (dark sobre âmbar, AA)   */

  /* Acentos dos 4 estilos de viagem — tons quentes de terra, pesos iguais.
     Diferenciam por COR (barra + tint da foto), nunca por tamanho. Texto do
     card fica sempre em --color-ink (AA garantido); a cor não carrega texto. */
  --style-familia: #C15A33;  /* terracota  */
  --style-adois:   #B72B1F;  /* vermelho   */
  --style-amigos:  #B7852B;  /* ocre       */
  --style-solo:    #9C5B3B;  /* argila     */

  /* ---- Tipografia ----------------------------------------------------------
     Fraunces (serifa display) para títulos; Inter para corpo/UI.
     Escala modular base 16px, razão 1.25; --fs-hero quebra a escala. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-xs:   0.8rem;    /* 12.8px — overline/label                            */
  --fs-sm:   0.875rem;  /* 14px  — microcopy/legenda                         */
  --fs-base: 1rem;      /* 16px  — corpo                                     */
  --fs-md:   1.25rem;   /* 20px  — corpo grande/subhead                      */
  --fs-lead: clamp(1.0625rem, 1rem + 0.6vw, 1.25rem); /* ~17→20px — parágrafos
                            de destaque (intros/leads): encolhe no mobile p/
                            leitura confortável, cresce até 20px no desktop.   */
  --fs-lg:   1.5rem;    /* 24px  — subtítulo                                 */
  --fs-xl:   1.9375rem; /* 31px  — título de seção pequeno                   */
  --fs-2xl:  2.4375rem; /* 39px  — título de seção                          */
  --fs-3xl:  3.0625rem; /* 49px  — título grande                            */
  --fs-4xl:  clamp(2.5rem, 5.2vw, 4.25rem);  /* display de seção            */
  --fs-hero: clamp(2.75rem, 6.8vw, 5.5rem);  /* hero — fora da escala        */

  --lh-tight: 1.06;
  --lh-snug:  1.2;
  --lh-body:  1.62;

  --tracking-tight: -0.015em; /* display serif — leve, não agressivo         */
  --tracking-wide:   0.18em;  /* labels em caixa alta                        */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ---- Espaço — grid de 8px (múltiplos de 8; 4 p/ ajuste fino) ----------- */
  --space-1: 0.25rem;  /*   4px */
  --space-2: 0.5rem;   /*   8px */
  --space-3: 1rem;     /*  16px */
  --space-4: 1.5rem;   /*  24px */
  --space-5: 2rem;     /*  32px */
  --space-6: 3rem;     /*  48px */
  --space-7: 4rem;     /*  64px */
  --space-8: 6rem;     /*  96px */
  --space-9: 8rem;     /* 128px */
  --space-10: 10rem;   /* 160px */

  /* ---- Forma e movimento --------------------------------------------------- */
  --radius-sm: 4px;
  --radius:    12px;   /* usado com parcimônia — não arredondar tudo         */
  --radius-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur:      240ms;
  --dur-slow: 520ms;

  /* ---- Layout — bastante whitespace (brief: arejado) ---------------------- */
  --container: 1200px;
  --measure: 62ch;                        /* medida de leitura confortável    */
  --gutter: clamp(1.25rem, 5vw, 5rem);    /* margem lateral fluida            */
  --section-y: clamp(4.5rem, 9vw, 8.5rem); /* respiro vertical generoso       */
  --header-h: 4.75rem;                    /* 76px — altura do header sticky;
                                             usada p/ reservar espaço no hero  */

  /* ---- Elevação (light: sombra quente e suave) --------------------------- */
  --shadow-1: 0 1px 0 var(--color-line);
  --shadow-2: 0 30px 60px -32px rgba(74, 48, 28, 0.28);
}