/* ==========================================================================
   Design Tokens — TW Direction
   Fluid scale: min @1024px → max @1920px (desktop approved reference).
   ========================================================================== */

:root {
    /* Cores */
    --color-primary: #2B9A3F;
    --color-primary-light: rgba(43, 154, 63, 0.12);
    --color-primary-highlight: rgba(43, 154, 63, 0.15);
    --color-accent: #AECA37; /* lime — item ativo do menu mobile */
    --color-dark: #252B37;
    --color-button: #808EC1;
    --color-white: #FFFFFF;
    --color-text-dark: #252B37;
    --color-text-body: #414651;
    --color-text-muted: #535862;
    --color-text-light: #D5D7DA;

    /* Tipografia — seções (fluid) */
    --section-title-size: clamp(28px, calc(23.43px + 0.45vw), 32px);
    --section-title-weight: 500;
    --section-title-lh: 1.25;
    --section-title-ls: -1.5px;
    --section-desc-size: 16px;
    --section-desc-lh: 1.7;
    --section-desc-ls: -0.01em;

    /* Tipografia — escala global (fluid) */
    --font-hero-size: clamp(36px, calc(26.86px + 0.89vw), 44px);
    --font-hero-lh: 1.15;
    --font-hero-ls: -0.02em;
    --font-subtitle-size: clamp(16px, calc(13.71px + 0.22vw), 18px);
    --font-card-title-size: clamp(18px, calc(15.71px + 0.22vw), 20px);
    --color-bg: #FBFDF2;
    --color-bg-light: #FAFAFA;
    --color-border: rgba(0, 0, 0, 0.08);

    /* Tipografia — fontes */
    --font-body: 'Inter', sans-serif;
    --font-heading: 'Raleway', sans-serif;

    /* Fluid Typography — escala reutilizável */
    --fs-h1: clamp(30px, calc(20.86px + 0.89vw), 38px);
    --fs-h3: clamp(22px, calc(19.71px + 0.22vw), 24px);

    /* Layout */
    --container-width: 1408px;
    --container-padding: clamp(32px, 5vw, 96px);

    /* Fluid Spacing */
    --space-section: clamp(60px, calc(37.14px + 2.23vw), 80px);
    --space-section-lg: clamp(64px, calc(27.43px + 3.57vw), 96px);
    --space-gap-xl: clamp(32px, calc(13.71px + 1.79vw), 48px);
    --space-gap-lg: clamp(24px, calc(14.86px + 0.89vw), 32px);
    --space-page-x: clamp(48px, calc(-25.14px + 7.14vw), 112px);

    /* Componentes */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 24px;
    --radius-full: 999px;

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

    /* Header — altura fluida (logo + padding vertical do nav) */
    --nav-logo-w: clamp(160px, calc(116.57px + 4.24vw), 198px);
    --nav-pad-block: clamp(20px, calc(15.43px + 0.45vw), 24px);
    --header-height: calc(var(--nav-logo-w) * 119 / 396 + var(--nav-pad-block));

    /* Hero — layout / viewport (first fold desktop) */
    --hero-viewport-min: calc(100dvh - var(--header-height));

    /* Hero — tipografia fluida */
    --hero-badge-size: clamp(13px, calc(11.86px + 0.11vw), 16px);
    --hero-title-size: clamp(24px, calc(18.86px + 1.5vw), 44px);
    --hero-subtitle-size: var(--font-subtitle-size);
    --hero-body-size: clamp(14px, calc(12.86px + 0.11vw), 16px);
    --hero-cta-size: clamp(14px, calc(12.86px + 0.11vw), 16px);
    --hero-nav-link-size: clamp(15px, calc(11.57px + 0.33vw), 18px);
    --hero-caption-size: clamp(13px, calc(11.86px + 0.11vw), 14px);

    /* Hero — espaçamento fluido */
    --hero-pad-block: clamp(32px, calc(13.71px + 1.79vw), 48px);
    --hero-pad-block-end: clamp(28px, calc(14.29px + 1.34vw), 40px);
    --hero-pad-inline: clamp(24px, calc(14.86px + 0.89vw), 32px);
    --hero-gap-content: clamp(12px, calc(8px + 0.5vw), 20px);
    --hero-gap-block: var(--space-gap-xl);
    --hero-mockup-max-h: clamp(220px, 32dvh, 420px);
    --hero-visual-max-w: clamp(280px, 42vw, 520px);
    --hero-image-max-h-sobre: clamp(480px, 62dvh, 620px);

    /* Hero — banner blog (exceção: sem viewport constraint) */
    --hero-banner-pad-top: clamp(56px, calc(28.57px + 2.68vw), 80px);
    --hero-banner-pad-bottom: clamp(64px, calc(38.86px + 2.46vw), 96px);
    --hero-banner-pad-bottom-list: clamp(96px, calc(50.29px + 4.46vw), 136px);
    --hero-banner-title-size: clamp(26px, calc(18px + 2vw), 40px);
    --hero-banner-article-title-size: clamp(28px, calc(14.86px + 1.29vw), 40px);
}