/* ==========================================================================
   Boxti — Design System / Tokens
   Tema dark. Todas as variáveis base do sistema (cores, tipografia,
   espaçamentos, raios, sombras, container). Não contém estilos de seção.
   ========================================================================== */

:root {
    /* ---------------------------------------------------------------------
       CORES — Paleta
       --------------------------------------------------------------------- */

    /* Fundos (azul-petróleo bem escuro) */
    --color-bg: #0A1520; /* fundo principal */
    --color-bg-alt: #0B1A24; /* variação levemente mais clara p/ seções alternadas */
    --color-bg-deep: #060F17; /* fundo mais profundo (footer, rodapés escuros) */

    /* Verde-limão de destaque */
    --color-lime: #8BC53F;
    --color-lime-bright: #9ACD32;

    /* Azul de detalhe (logo, aspas, ícones) */
    --color-blue: #2B7DD6;
    --color-blue-soft: rgba(43, 125, 214, 0.12);

    /* Texto */
    --color-text: #FFFFFF; /* texto principal */
    --color-text-secondary: #A8B5BD; /* cinza-azulado secundário */
    --color-text-muted: rgba(168, 181, 189, 0.6);

    /* Branco / superfícies */
    --color-white: #FFFFFF;

    /* Cards — fundo translúcido + borda sutil */
    --color-card-bg: rgba(255, 255, 255, 0.04);
    --color-card-bg-hover: rgba(255, 255, 255, 0.06);
    --color-card-border: rgba(255, 255, 255, 0.08);
    --color-card-border-hover: rgba(139, 197, 63, 0.35);

    /* Linhas / divisores */
    --color-divider: rgba(255, 255, 255, 0.06);

    /* Gradiente radial sutil do fundo (azul-petróleo) */
    --gradient-bg: radial-gradient(
        ellipse 80% 50% at 50% -10%,
        rgba(43, 125, 214, 0.10) 0%,
        rgba(43, 125, 214, 0.0) 55%
    );

    /* Gradiente de destaque (verde-limão) p/ CTAs / detalhes */
    --gradient-lime: linear-gradient(135deg, var(--color-lime) 0%, var(--color-lime-bright) 100%);

    /* ---------------------------------------------------------------------
       TIPOGRAFIA
       Sans-serif geométrica (Poppins, fallback Montserrat).
       --------------------------------------------------------------------- */
    --font-sans: 'Poppins', 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Pesos */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* Escala de tamanhos — fluida (clamp: min, preferido, max) */
    --fs-display: clamp(1.75rem, 1.15rem + 2.2vw, 3rem); /* ~28–48px títulos hero */
    --fs-h1: clamp(2.25rem, 1.4rem + 3.5vw, 3.5rem); /* ~36–56px */
    --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem); /* ~28–40px */
    --fs-h3: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); /* ~22–28px */
    --fs-h4: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* ~18–22px */
    --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* ~17–19px */
    --fs-body: 1rem; /* 16px */
    --fs-small: 0.875rem; /* 14px */
    --fs-xs: 0.75rem; /* 12px */

    /* Altura de linha */
    --lh-tight: 1.1;
    --lh-snug: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;

    /* Espaçamento entre letras */
    --ls-tight: -0.02em;
    --ls-normal: 0;
    --ls-wide: 0.04em;
    --ls-caps: 0.12em; /* p/ rótulos em maiúsculas */

    /* ---------------------------------------------------------------------
       ESPAÇAMENTOS — escala base 4px
       --------------------------------------------------------------------- */
    --space-0: 0;
    --space-1: 0.25rem; /* 4 */
    --space-2: 0.5rem; /* 8 */
    --space-3: 0.75rem; /* 12 */
    --space-4: 1rem; /* 16 */
    --space-5: 1.5rem; /* 24 */
    --space-6: 2rem; /* 32 */
    --space-7: 3rem; /* 48 */
    --space-8: 4rem; /* 64 */
    --space-9: 6rem; /* 96 */
    --space-10: 8rem; /* 128 */

    /* Respiro vertical padrão das seções (full-width, bastante respiro) */
    --section-padding-y: clamp(4rem, 2rem + 8vw, 8rem);

    /* ---------------------------------------------------------------------
       CONTAINER / LAYOUT
       --------------------------------------------------------------------- */
    --container-max: 1280px;
    --container-padding: clamp(1.25rem, 0.5rem + 3vw, 3rem);

    /* ---------------------------------------------------------------------
       RAIOS
       --------------------------------------------------------------------- */
    --radius-sm: 0.5rem; /* 8 */
    --radius-md: 0.875rem; /* 14 */
    --radius-lg: 1.25rem; /* 20 */
    --radius-xl: 1.75rem; /* 28 */
    --radius-pill: 999px;

    /* ---------------------------------------------------------------------
       SOMBRAS
       --------------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);
    --shadow-lime: 0 8px 30px rgba(139, 197, 63, 0.25); /* glow CTA verde */

    /* ---------------------------------------------------------------------
       TRANSIÇÕES / Z-INDEX
       --------------------------------------------------------------------- */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    --z-base: 1;
    --z-header: 100;
    --z-overlay: 1000;
    --z-modal: 2000;
}