/* ========================================
   VARIÁVEIS GLOBAIS (DESIGN SYSTEM)
   ======================================== */
:root {
    
    /* --- CORES --- */
    --primary-dark: #1b3a24;      /* Verde escuro principal (Marca/Botões) */
    --primary-light: #2c5e3d;     /* Verde secundário (Hover/Detalhes) */
    --accent-green: #4a7c59;      /* Verde de destaque (Ícones) */
    --bg-light: #f9fbf9;          /* Fundo claro (Seções alternadas) */
    --text-dark: #1a1a1a;         /* Texto principal */
    --text-gray: #555555;         /* Texto secundário/parágrafos */
    --white: #ffffff;             /* Branco puro */
    --gold: #d4af37;              /* Dourado (Avaliações/Estrelas) */
    
    /* --- TIPOGRAFIA --- */
    --font-main: 'Inter', sans-serif;           /* Fonte para textos corridos */
    --font-display: 'Playfair Display', serif;  /* Fonte para títulos (Elegante) */
    
    /* --- ESPAÇAMENTOS (Escala 8px) --- */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 32px;
    --spacing-lg: 64px;
    --spacing-xl: 96px;

    /* --- BORDAS E ARREDONDAMENTOS --- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;

    /* --- SOMBRAS --- */
    --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.08);
    --shadow-sticky: 0 -5px 20px rgba(0, 0, 0, 0.1);

    /* --- TRANSIÇÕES --- */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    /* --- BREAKPOINTS (Para usar no responsive.css) --- */
    --bp-mobile: 480px;
    --bp-tablet: 768px;
    --bp-desktop: 992px;
    --bp-large: 1200px;
}