/* ===================================================================
   ÍMPETO INVESTIMENTOS — DESIGN TOKENS
   Arquivo: variables.css
   Objetivo: Centralizar todas as variáveis visuais do projeto.
   Nenhum outro arquivo CSS deve declarar cores, fontes, espaçamentos,
   raios, sombras ou transições fora daqui — sempre referenciar
   estas Custom Properties.
   =================================================================== */

:root {

    /* ===============================================================
       1. CORES
       Paleta premium, sofisticada e minimalista.
       Verde institucional como cor de marca, verde-escuro profundo
       para fundos imersivos (hero, quiz, obrigado).
       =============================================================== */

    /* ---- Verde institucional (cor de marca / ações primárias) ---- */
    --color-primary: #0F5C3F;
    --color-primary-dark: #0B4630;
    --color-primary-light: #1C7A54;

    /* ---- Verde escuro para fundos imersivos ---- */
    --color-dark-bg: #071B15;
    --color-dark-bg-elevated: #0D2A20;

    /* ---- Neutros ---- */
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* ---- Escala de cinzas ---- */
    --color-gray-50: #F7F8F8;
    --color-gray-100: #EEF0EF;
    --color-gray-200: #DFE3E1;
    --color-gray-300: #C3C9C6;
    --color-gray-400: #9AA39E;
    --color-gray-500: #6E7873;
    --color-gray-600: #4E5751;
    --color-gray-700: #363E39;
    --color-gray-800: #232925;
    --color-gray-900: #14201A;

    /* ---- Bordas ---- */
    --color-border: var(--color-gray-200);
    --color-border-dark: rgba(255, 255, 255, 0.12);

    /* ---- Hover / interação ---- */
    --color-hover: var(--color-primary-dark);
    --color-hover-light: rgba(15, 92, 63, 0.08);

    /* ---- Feedback ---- */
    --color-success: #1F9D55;
    --color-error: #C0392B;

    /* ---- Texto ---- */
    --color-text-primary: #111827;
    --color-text-secondary: #4B5563;
    --color-text-light: #FFFFFF;

    /* ===============================================================
       2. TIPOGRAFIA
       =============================================================== */

    /* ---- Família tipográfica ---- */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ---- Tamanhos (escala modular) ---- */
    --font-size-xs: 1.2rem;      /* 12px — microtextos, legendas */
    --font-size-sm: 1.4rem;      /* 14px — textos auxiliares */
    --font-size-base: 1.6rem;    /* 16px — corpo de texto padrão */
    --font-size-md: 1.8rem;      /* 18px — subheadlines, destaque */
    --font-size-lg: 2.2rem;      /* 22px — títulos de card/seção */
    --font-size-xl: 2.8rem;      /* 28px — títulos secundários */
    --font-size-2xl: 3.6rem;     /* 36px — perguntas do quiz */
    --font-size-3xl: 4.8rem;     /* 48px — headline principal */

    /* ---- Pesos ---- */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ---- Altura de linha ---- */
    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.7;

    /* ===============================================================
       3. ESPAÇAMENTOS
       Escala completa baseada em incrementos de 4px.
       =============================================================== */

    --space-1: 0.4rem;    /* 4px  */
    --space-2: 0.8rem;    /* 8px  */
    --space-3: 1.2rem;    /* 12px */
    --space-4: 1.6rem;    /* 16px */
    --space-5: 2.4rem;    /* 24px */
    --space-6: 3.2rem;    /* 32px */
    --space-7: 4.8rem;    /* 48px */
    --space-8: 6.4rem;    /* 64px */
    --space-9: 9.6rem;    /* 96px */

    /* ===============================================================
       4. BORDAS (RADIUS)
       =============================================================== */

    --radius-sm: 0.6rem;    /* 6px  — inputs, tags */
    --radius-md: 1.2rem;    /* 12px — botões, alternativas do quiz */
    --radius-lg: 2rem;      /* 20px — blocos e caixas de destaque */
    --radius-card: 2.4rem;  /* 24px — card principal (quiz, obrigado) */

    /* ===============================================================
       5. SOMBRAS
       =============================================================== */

    --shadow-sm: 0 2px 8px rgba(7, 27, 21, 0.08);
    --shadow-md: 0 8px 24px rgba(7, 27, 21, 0.12);
    --shadow-card: 0 24px 64px rgba(7, 27, 21, 0.28);

    /* ===============================================================
       6. TRANSIÇÕES
       =============================================================== */

    --transition-duration: 0.25s;
    --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-default: var(--transition-duration) var(--transition-ease);

    /* ===============================================================
       7. LARGURAS
       =============================================================== */

    --width-container: 120rem;  /* 1200px — largura máxima da LP */
    --width-card: 56rem;        /* 560px  — largura máxima do card do quiz/obrigado */

    /* ===============================================================
       8. Z-INDEX
       =============================================================== */

    --z-base: 1;
    --z-header: 100;
    --z-dropdown: 500;
    --z-modal: 1000;
    --z-toast: 2000;

    /* ===============================================================
       9. BREAKPOINTS
       =============================================================== */

    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

}