/* =========================================================
   DA FLORESTA — TOKENS DE DESIGN v2.0 (Sistema Cromático Oficial)
   ========================================================= */

:root {
    /* ── Paleta Cromática Oficial ── */
    --df-color-forest:       #1F3D2B;   /* Verde Floresta — primária */
    --df-color-sage:         #4C6B4F;   /* Verde Sálvia — secundária */
    --df-color-sage-light:   #A7B89F;   /* Sálvia Suave — apoio */
    --df-color-sand:         #E7DECC;   /* Areia — fundo quente */
    --df-color-cream:        #FAF7F2;   /* Creme — fundo principal */
    --df-color-terracotta:   #C57A4E;   /* Terracota — destaque/CTA secundário */
    --df-color-gold:         #D4B77A;   /* Dourado Suave — badges especiais */
    --df-color-white:        #FFFFFF;

    /* ── Cores de Texto ── */
    --df-color-text:          #1F1F1F;  /* Texto primário */
    --df-color-text-secondary: #4A4A4A; /* Texto secundário */
    --df-color-muted:         #6B6B6B;  /* Texto terciário / placeholders */

    /* ── Superfícies ── */
    --df-color-surface-warm: var(--df-color-cream);
    --df-color-border:       #E2DDD6;

    /* ── Tipografia ── */
    --df-font-display: "Playfair Display", Georgia, serif;
    --df-font-body:    "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;

    /* ── Escala Tipográfica ── */
    --df-text-xs:   0.75rem;    /* 12px */
    --df-text-sm:   0.875rem;   /* 14px */
    --df-text-md:   1rem;       /* 16px */
    --df-text-lg:   1.125rem;   /* 18px */
    --df-text-xl:   1.25rem;    /* 20px */
    --df-text-2xl:  1.5rem;     /* 24px */
    --df-text-3xl:  1.875rem;   /* 30px */
    --df-text-4xl:  2.375rem;   /* 38px */
    --df-text-hero: clamp(2.25rem, 4vw, 3.5rem);

    /* ── Layout ── */
    --df-container: 1200px;

    /* ── Espaçamentos ── */
    --df-space-1: 0.25rem;
    --df-space-2: 0.5rem;
    --df-space-3: 0.75rem;
    --df-space-4: 1rem;
    --df-space-5: 1.25rem;
    --df-space-6: 1.5rem;
    --df-space-8: 2rem;
    --df-space-10: 2.5rem;
    --df-space-12: 3rem;
    --df-space-16: 4rem;
    --df-space-20: 5rem;
    --df-space-24: 6rem;

    /* ── Raios ── */
    --df-radius-xs:   2px;
    --df-radius-sm:   4px;
    --df-radius-md:   8px;
    --df-radius-lg:  12px;
    --df-radius-xl:  16px;
    --df-radius-pill: 999px;

    /* ── Sombras ── */
    --df-shadow-soft: 0 1px 3px rgba(31,61,43,.06), 0 1px 2px rgba(31,61,43,.04);
    --df-shadow-md:   0 4px 12px rgba(31,61,43,.08), 0 2px 4px rgba(31,61,43,.04);
    --df-shadow-lg:   0 8px 32px rgba(31,61,43,.12), 0 4px 8px rgba(31,61,43,.06);

    /* ── Transições ── */
    --df-transition: 150ms ease;
    --df-transition-slow: 300ms ease;
}