/* ==========================================================================
   Design Tokens — Grupo Latitud
   Extraídos do Figma. Fonte única de verdade para cores, tipografia e layout.
   ========================================================================== */

:root {
    /* Cores */
    --color-primary: #EF8619;
    --color-dark: #13171A;
    --color-white: #FFFFFF;
    --color-text-light: #D5D7DA;
    --color-text-hero: #F5F5F5;
    --color-text-dark: #3D3F43;
    --color-bg-light: #FAFAFA;

    /* Tipografia */
    --font-body: 'Inter', sans-serif;
    --font-heading: 'Raleway', sans-serif;
    --font-text: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;

    /* Layout */
    --container-width: 1360px;
    --container-padding: clamp(24px, 5.8vw, 112px);

    /* Hero overlay (gradientes do Figma) */
    --hero-overlay:
        linear-gradient(22.58deg, rgba(19, 23, 26, 0) 53.13%, rgba(19, 23, 26, 0.3) 80.81%, rgba(234, 221, 30, 0.6) 119.31%),
        linear-gradient(284.45deg, rgba(22, 90, 170, 0) 34.22%, rgba(19, 23, 26, 0.6) 85.04%),
        linear-gradient(247.26deg, rgba(19, 23, 26, 0) 17.62%, rgba(19, 23, 26, 0.4) 51.76%, rgba(0, 45, 98, 0.8) 106.93%);

    /* Componentes */
    --nav-pill-bg: rgba(0, 0, 0, 0.08);
    --nav-pill-border: 1px solid rgba(255, 255, 255, 0.08);
    --nav-pill-blur: blur(5px);
    --nav-dropdown-bg: rgba(19, 23, 26, 0.55);
    --nav-dropdown-border: 1px solid rgba(255, 255, 255, 0.12);
    --nav-dropdown-blur: blur(20px) saturate(160%);
    --scroll-btn-bg: rgba(255, 255, 255, 0.2);
    --scroll-btn-border: 1px solid rgba(255, 255, 255, 0.2);
    --scroll-btn-blur: blur(3px);

    /* Transições */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;

    /* ---- Fluid Body Typography ---- */
    --fs-body: clamp(15px, 0.9vw, 16px);
    --fs-body-sm: clamp(13px, 0.78vw, 14px);
    --fs-card-title: clamp(16px, 1vw, 18px);
    --fs-step-number: clamp(18px, 1.04vw, 20px);

    /* ---- Fluid CTA Button ---- */
    --cta-font: clamp(16px, 1vw, 18px);
    --cta-pad-y: clamp(16px, 1.04vw, 20px);
    --cta-pad-x: clamp(24px, 1.67vw, 32px);
    --cta-height: clamp(52px, 3.33vw, 64px);
    --cta-icon: clamp(20px, 1.25vw, 24px);

    /* ---- Fluid Component Sizes ---- */
    --btn-size: clamp(36px, 2.3vw, 44px);
    --scroll-btn: clamp(32px, 2.08vw, 40px);
    --line-width: clamp(48px, 3.7vw, 71px);
    --gap-card: clamp(16px, 1.25vw, 24px);
    --gap-content: clamp(12px, 0.83vw, 16px);
    --nav-logo-w: clamp(140px, 9.2vw, 176px);
    --nav-logo-h: clamp(53px, 3.5vw, 67px);

    /* ---- Fluid Spacing ---- */
    --section-pad-xl: clamp(56px, 5vw, 96px);
    --section-pad-lg: clamp(48px, 3.75vw, 72px);
    --section-pad-md: clamp(40px, 3.3vw, 64px);
    --gap-xl: clamp(48px, 5.4vw, 104px);
    --gap-lg: clamp(40px, 4.2vw, 80px);
    --gap-md: clamp(24px, 2.5vw, 48px);
    --gap-sm: clamp(20px, 1.7vw, 32px);

    /* ---- Fluid Typography ---- */
    --fs-hero-title: clamp(30px, 2.2vw, 40px);
    --fs-section-xl: clamp(28px, 2.3vw, 44px);
    --fs-section-lg: clamp(24px, 1.8vw, 32px);
    --fs-cta-title: clamp(22px, 1.5vw, 28px);
    --fs-label: clamp(16px, 1vw, 18px);
    --fs-step: clamp(18px, 1.25vw, 22px);
    --fs-display: clamp(28px, 2.5vw, 48px);
    --fs-heading-2xl: clamp(26px, 2.19vw, 42px);
    --fs-heading-xl: clamp(24px, 1.98vw, 38px);
    --fs-heading-lg: clamp(22px, 1.77vw, 34px);
    --fs-heading-md: clamp(18px, 1.35vw, 26px);
    --fs-heading-sm: clamp(16px, 1.25vw, 24px);
    --fs-body-lg: clamp(15px, 1.04vw, 20px);
    --fs-body-md: clamp(15px, 0.94vw, 18px);
    --fs-caption: clamp(12px, 0.68vw, 13px);
    --fs-caption-sm: clamp(10px, 0.57vw, 11px);
    --fs-article-h2: clamp(22px, 1.46vw, 28px);
    --fs-article-h3: clamp(18px, 1.15vw, 22px);

    /* ---- Fluid Hero ---- */
    --hero-height: clamp(400px, 31.5vw, 597px);
    --hero-height-sm: clamp(440px, 28.13vw, 540px);
    --hero-pad-top: clamp(120px, 9.38vw, 180px);
    --hero-pad-bottom: clamp(56px, 5vw, 96px);
    --hero-clip-h: clamp(60px, 6.25vw, 120px);
    --hero-clip-v: clamp(50px, 5.05vw, 97px);

    /* ---- Cores adicionais ---- */
    --color-bg-navy: #0f2a47;

    /* ---- Fluid Dimensions ---- */
    --card-services-w: clamp(200px, 16.5vw, 280px);
    --card-portfolio-w: clamp(252px, 15.75vw, 302px);
    --card-portfolio-h: clamp(333px, 20.7vw, 398px);
    --cert-icon: clamp(100px, 8.1vw, 156px);
    --cert-logo: clamp(80px, 6.5vw, 124px);
}