/*------------------------------------------------------------------*\
    1.  CONFIG & HELPERS
        - Design Tokens
\*------------------------------------------------------------------*/

:root {
    /* ── Brand Colors ── */
    --color-primary: #FFB951;
    --color-secondary: #FFB951;
    --color-accent: #FFB951;
    --color-accent-alt: #FFB951;

    /* ── Neutral Scale ──
     * Gray scale aligned with Elementor Custom Colors.
     * Use for backgrounds, borders and secondary text. */
    --neutral-950: #000000;
    --neutral-900: #0E0E0E;
    --neutral-850: #141414;
    --neutral-800: #1c1c1c;
    --neutral-750: #262626;
    --neutral-700: #2E2E2D;
    --neutral-600: #404040;
    --neutral-550: #4F4F50;
    --neutral-500: #555555;
    --neutral-400: #888888;
    --neutral-350: #9E9898;
    --neutral-300: #A6A6A6;
    --neutral-200: #C4C4C4;
    --neutral-150: #CCCCCC;
    --neutral-100: #D0D0D0;
    --neutral-50:  #FAFAFA;
    --neutral-0:   #FFFFFF;

    /* ── Semantic Colors (mapped from neutral scale) ── */
    --color-title: #fff;
    --color-text: #D0D0D0;
    --color-text-soft: rgba(255, 255, 255, 0.8);
    --color-text-muted: rgba(255, 255, 255, 0.5);
    --color-bg-white: #ffffff;
    --color-bg-dark: #122327;
    --color-bg-surface: var(--neutral-800);      /* #1c1c1c */
    --color-bg-surface-alt: #292929;
    --color-black: var(--neutral-950);            /* #000000 */
    --color-border: var(--neutral-600);           /* #404040 */
    --color-border-light: rgba(255, 255, 255, 0.3);

    /* ── Input / Form Tokens ──
     * Dedicated form tokens. Style forms consistently
     * without repeating values. */
    --input-bg: var(--neutral-850);               /* #141414 */
    --input-border: var(--neutral-750);            /* #262626 */
    --input-text: var(--neutral-0);                /* #FFFFFF */
    --input-label: var(--neutral-50);              /* #FAFAFA */
    --input-placeholder: var(--neutral-300);       /* #A6A6A6 */
    --input-focus-border: var(--color-primary);    /* #FFB951 */
    --input-error: #FF6B6B;
    --input-success: var(--color-accent);
    --input-filled: var(--color-primary);
    --input-radius: 4px;
    --input-padding: 12px 16px;

    /* ── Typography ── */
    --font-primary: 'Syne', sans-serif;
    --font-secondary: "DM Sans", sans-serif;
    --font-extrabold: 800;
    --font-bold: 700;
    --font-semibold: 600;
    --font-medium: 500;
    --font-regular: 400;

    /* ── Spacing ── */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 4rem;

    /* ── Transitions ── */
    --transition-base: all 0.3s ease;

    /* ── Z-index ── */
    --z-content: 1;
    --z-overlay: 2;
    --z-pagination: 10;

    /*
     * ── Fluid Typography ──
     *
     * Range: 390px (min) → 3840px (max)
     * Valores do Figma: 390px (mobile) e 1920px (desktop)
     * Max (3840px) calculado: max = min + (figma_1920 - min) / 0.4435
     *
     * Formula do clamp:
     *   slope     = (max - min) / 215.625
     *   intercept = min - slope × 24.375
     *   clamp(min, intercept + slope×100 vw, max)
     *
     * Formato canonico: clamp(minRem, interceptRem + slopeVw, maxRem)
     * Calculadora: https://clamp.font-size.app/ (Min 390, Max 3840)
     *
     * .elementor-kit-6 is auto-generated by Elementor.
     * If the kit ID changes (e.g. reimport), update typography.css.
     */

    /* ── Headings ── */
    --fluid-h1:                     calc(clamp(2.6875rem, 1.9388rem + 3.072vw, 5.625rem) + clamp(0rem, -4.9152rem + 3.072vw, 2.4575rem));
    /* 43px @390 → 90px @1920 → 90px @2560 → 129.3px @3840 */
    --fluid-h2:                     clamp(1.5625rem, 1.0051rem + 2.287vw, 6.4948rem);       /* 25px → 60px → 103.92px */
    --fluid-h3:                     clamp(1.5625rem, 1.1006rem + 1.895vw, 5.6494rem);       /* 25px → 54px → 90.39px */
    --fluid-h4:                     clamp(1.375rem, 0.975rem + 2vw, 3.375rem);
    --fluid-h5:                     clamp(1rem, 0.8726rem + 0.5228vw, 2.1274rem);            /* 16px → 24px → 34.04px */
    --fluid-h6:                     clamp(1rem, 0.89rem + 0.46vw, 1.44rem);

    /* ── Body Text ── */
    --fluid-p:                      clamp(0.75rem, 0.6704rem + 0.3267vw, 1.4546rem);        /* 12px → 17px → 23.27px */
    --fluid-lg-p:                   clamp(0.75rem, 0.64rem + 0.46vw, 1.19rem);
    --fluid-subtitle:               clamp(0.375rem, 0.2476rem + 0.5228vw, 1.5024rem);       /* 6px → 14px → 24.04px */
    --fluid-caption-text:           clamp(0.38rem, 0.25rem + 0.52vw, 0.88rem);

    /* ── Buttons & Navigation ── */
    --fluid-primary-button:         clamp(0.75rem, 0.7022rem + 0.1961vw, 1.1728rem);        /* 12px → 15px → 18.77px */
    --fluid-secondary-button:       clamp(1rem, 0.97rem + 0.13vw, 1.13rem);
    --fluid-overlay-menu-item:      clamp(2.1875rem, 1.9804rem + 0.8497vw, 4.0196rem);  /* 35px → 48px → 64.3px */
    --fluid-nav-menu:               clamp(5rem, 4.38rem + 0.78vw, 6.25rem);

    /* ── Overlay ── */
    --fluid-overlay-info-title:     clamp(0.9375rem, 0.8125rem + 0.625vw, 1.5625rem);
    --fluid-overlay-info-desc:      clamp(1rem, 0.825rem + 0.875vw, 1.875rem);

    /* ── Counters ── */
    --fluid-counter-title:          clamp(1.25rem, -0.0244rem + 5.228vw, 12.524rem);        /* 20px → 100px → 200.38px */
    --fluid-counter-desc:           clamp(0.875rem, 0.7476rem + 0.5228vw, 2.0024rem);       /* 14px → 22px → 32.04px */
    --fluid-counter-label:          clamp(0.875rem, 0.7475rem + 0.5229vw, 2.0025rem);    /* 14px → 22px → 32.04px */
    --fluid-slide-heading:          clamp(5.625rem, -5.625rem + 7.0313vw, 11.25rem);

    /* ── Components ── */
    --fluid-testimonials-name:      clamp(1rem, 0.9044rem + 0.3922vw, 1.8456rem);           /* 16px → 22px → 29.53px */
    --fluid-accordion:              clamp(0.875rem, 0.7476rem + 0.5228vw, 2.0024rem);       /* 14px → 22px → 32.04px */
    --fluid-h2-card:                clamp(1.5rem, -1.75rem + 2.03vw, 3.13rem);

    /* ── Forms ── */
    --fluid-label:                  clamp(0.75rem, 0.7181rem + 0.1307vw, 1.0319rem);        /* 12px → 14px → 16.51px */
    --fluid-select:                 clamp(0.375rem, 0.2794rem + 0.3922vw, 1.2206rem);       /* 6px → 12px → 19.53px */
    --fluid-placeholder:            clamp(0.375rem, 0.2476rem + 0.5228vw, 1.5024rem);       /* 6px → 14px → 24.04px */
    --fluid-checkboxes-labels:      0.6875rem;                                                /* 11px (estatico) */

    /* ── Grid ── */
    --fluid-grid-title:             clamp(2.1875rem, 1.8429rem + 1.0458vw, 4.4413rem);      /* 35px → 51px → 71.06px */
    --fluid-grid-desc:              clamp(0.75rem, 0.6385rem + 0.4575vw, 1.7365rem);        /* 12px → 19px → 27.78px */
    --fluid-services-grid-desc:     clamp(0.875rem, 0.7953rem + 0.3268vw, 1.5797rem);       /* 14px → 19px → 25.27px */
    --fluid-cta-h2:                 clamp(1.5rem, 0.9375rem + 2.3188vw, 3.75rem);

    /* ── Portfolio ── */
    --fluid-portfolio-title:        clamp(0.75rem, 0.4633rem + 1.176vw, 3.287rem);  /* 12px → 30px @1920 → ~52.6px @3840 */
    --fluid-portfolio-subtitle:     clamp(0.203125rem, 0rem + 0.8333vw, 2rem);
    --fluid-portfolio-header-box:   clamp(0.875rem, 0.425rem + 1.96vw, 5.475rem);   /* 14px → 50px @1920 → ~87.6px @3840 */
    --fluid-portfolio-grid-h:       clamp(12.5rem, 6.239rem + 25.69vw, 67.89rem);  /* 200px → 593px @1920 → ~1086px @3840 */
    --fluid-portfolio-headerbox-h:  clamp(6.25rem, 4.052rem + 9.015vw, 25.69rem);  /* 100px → 238px @1920 → ~411px @3840 */
    --fluid-portfolio-overview:     clamp(1rem, 0.6175rem + 1.569vw, 4.382rem);    /* 16px → 40px @1920 → ~70px @3840 */
    --fluid-portfolio-overview-desc: clamp(0.75rem, 0.69rem + 0.26vw, 1rem);

    /* ── Contact Info ── */
    --fluid-contact-h1:             clamp(1rem, 0.5rem + 0.5208vw, 1.75rem);            /* 16px @390 → 18px @1920 → 28px @3840 */
    --fluid-contact-call-us:        clamp(1.5rem, 1.3726rem + 0.5229vw, 2.6275rem);    /* 24px @390 → 32px @1920 → ~42px @3840 */
    --fluid-contact-message:        clamp(1.5rem, 1.3726rem + 0.5229vw, 2.6275rem);     /* 24px @390 → 32px @1920 → ~42px @3840 */

    /* ── Footer ── */
    --fluid-footer-h3:              clamp(1.375rem, 1.2rem + 0.7188vw, 2.925rem);             /* 22px → 33px @1920 → 46.8px @3840 */
    --fluid-footer-title:           1.375rem;                                                 /* 22px (estatico) */
    --fluid-footer-menu:            1rem;                                                     /* 16px (estatico) */
    --fluid-footer-subtitle:        clamp(1rem, 0.9681rem + 0.1307vw, 1.2819rem);           /* 16px → 18px → 20.51px */
    --fluid-footer-slogan:          clamp(0.875rem, 0.8113rem + 0.2614vw, 1.4387rem);       /* 14px → 18px → 23.02px */
    --fluid-footer-desc:            clamp(1.375rem, 1.2476rem + 0.5228vw, 2.5024rem);       /* 22px → 30px → 40.04px */

    /* ── Services ── */
    --fluid-heading-service:        clamp(1.25rem, 0.77rem + 1.96vw, 3.13rem);
    --fluid-step-title:             clamp(1rem, 0.8726rem + 0.5228vw, 2.1275rem);              /* 16px @390 → 24px @1920 → 34.04px @3840 */
    --fluid-step-desc:              clamp(0.75rem, 0.6226rem + 0.5228vw, 1.8775rem);          /* 12px @390 → 20px @1920 → 30.04px @3840 */

    /* ── Hero Drag Hint ── */
    --fluid-drag-hint:              clamp(1rem, 0rem + 0.8333vw, 2rem);                    /* 10px min → 12px @1440 → 16px @1920 → 18px @2160 → 32px @3840 */
    --fluid-drag-hint-gap:          clamp(0.5rem, 0.625vw, 1.5rem);                        /* 8px min → 12px @1920 → 24px @3840 */
    --fluid-drag-hint-line-w:       clamp(1.25rem, 2.0833vw, 5rem);                        /* 20px min → 40px @1920 → 80px @3840 */
    --fluid-drag-hint-line-h:       clamp(0.0625rem, 0.1042vw, 0.25rem);                   /* 1px min → 2px @1920 → 4px @3840 */
    --fluid-drag-hint-chevron:      clamp(0.3125rem, 0.4688vw, 1.125rem);                  /* 5px min → 9px @1920 → 18px @3840 */

    /* ── Hero Pagination Numbers ── */
    --fluid-pagination-number:      clamp(0.6667rem, 1.0417vw, 2.5rem);                        /* 10.67px @1024 → 20px @1920 → 40px @3840 */
    --fluid-pagination-mt:          clamp(-3.75rem, -1.5625vw, -1rem);                          /* -16px @1024 → -30px @1920 → -60px @3840 */
    --fluid-pagination-mb:          clamp(-2.5rem, -1.0417vw, -0.6667rem);                      /* -10.67px @1024 → -20px @1920 → -40px @3840 */

    /* ── Hero Slide Button ── */
    --fluid-slide-btn-circle:       clamp(1.5rem, 2.3958vw, 5.75rem);                          /* 24px min → 46px @1920 → 92px @3840 */
    --fluid-slide-btn-text:         clamp(0.5rem, 0.7813vw, 1.875rem);                         /* 8px min → 15px @1920 → 30px @3840 */
    --fluid-slide-btn-arrow:        clamp(0.5rem, 0.7813vw, 1.875rem);                         /* 8px min → 15px @1920 → 30px @3840 */

    /* ── Misc ── */
    --fluid-header-box:             clamp(0.698125rem, -0.0001rem + 2.8646vw, 6.875rem);
}

/* Mobile-only override: the --fluid-grid-title clamp floors at ~35px (its
   intercept never drops to 20px), so force 20px on mobile here without
   touching the clamp / larger-screen sizes. */
@media (max-width: 767px) {
    :root {
        --fluid-grid-title: 1.25rem; /* 20px */
    }
}