/* ===========================================================================
   IMPÉRIUM PISOS: SISTEMA DE DESIGN FLUIDO (clamp)
   ---------------------------------------------------------------------------
   REGRA FUNDAMENTAL DO PROJETO:
   Toda medida do site (fonte, espaçamento, caixa, borda, raio, container)
   é expressa em clamp(MÍNIMO_px, IDEAL_vw, MÁXIMO_px).

   O termo "ideal" usa a viewport (vw) com a fórmula fluida de interpolação
   linear entre duas larguras de referência:

        mínimo  -> aos  360px de viewport
        máximo  -> aos 1920px de viewport

        slope   = (max - min) / (1920 - 360)
        ideal   = (min - slope*360) + slope*100 * 1vw

   Resultado: o valor escala suavemente com a largura da tela e trava nos
   limites. Isso cobre, sem media queries de "salto", toda a faixa-alvo:

     • Tablets em pé / monitores de tablet ...... ~768–1024px
     • iPad Pro ................................. 1024 / 1366px
     • Notebooks antigos (768px de ALTURA) ..... 1366×768
     • Notebooks Full HD ....................... 1920×1080
     • Padrão de mercado ....................... 1366 / 1440px
     • Wide .................................... 1920–2560px
     • Ultrawide ............................... 3440px+

   Tudo é consumido via custom properties, nunca repetimos o clamp à mão.
   =========================================================================== */

:root {
    /* ---- Paleta da marca -------------------------------------------------- */
    --c-ink:        #0E0E10;   /* preto institucional (fundos escuros)        */
    --c-ink-2:      #0A0A0C;   /* preto do rodapé                             */
    --c-surface:    #17171A;   /* cartão sobre fundo escuro                   */
    --c-bone:       #F5F4F1;   /* fundo claro                                 */
    --c-line-light: #E4E0DA;   /* borda em fundo claro                        */
    --c-line-dark:  rgba(255,255,255,.08); /* borda em fundo escuro          */
    --c-accent:     #FC4E0B;   /* laranja IMPÉRIUM                            */
    --c-accent-h:   #ff6125;   /* laranja hover                              */

    --c-text:       #232220;   /* texto base (fundo claro)                    */
    --c-text-dark:  #1A1917;   /* títulos em fundo claro                      */
    --c-muted:      #57534E;   /* texto secundário claro                      */
    --c-muted-2:    #7A746C;
    --c-mono-light: #9A938B;   /* mono/labels em fundo claro                  */
    --c-on-dark:    #C9C6C1;   /* texto em fundo escuro                       */
    --c-on-dark-2:  #A8A49F;
    --c-on-dark-3:  #8E8A85;

    /* ===== ESCALA TIPOGRÁFICA FLUIDA ====================================== */
    /* step--1: micro/mono (labels)            11 -> 13 */
    --fs--1: clamp(11px, calc(10.54px + 0.128vw), 13px);
    /* step-0 : corpo padrão                   15 -> 17 */
    --fs-0:  clamp(15px, calc(14.54px + 0.128vw), 17px);
    /* step-1 : corpo de destaque / lead       16 -> 19 */
    --fs-1:  clamp(16px, calc(15.31px + 0.192vw), 19px);
    /* step-2 : sub-lead / preço               18 -> 24 */
    --fs-2:  clamp(18px, calc(16.62px + 0.385vw), 24px);
    /* step-3 : h3 / h4                        20 -> 26 */
    --fs-3:  clamp(20px, calc(18.62px + 0.385vw), 26px);
    /* step-4 : h2 menor                       26 -> 42 */
    --fs-4:  clamp(26px, calc(22.31px + 1.026vw), 42px);
    /* step-5 : h2 de seção                    30 -> 52 */
    --fs-5:  clamp(30px, calc(24.92px + 1.410vw), 52px);
    /* step-6 : h1 de página interna           32 -> 60 */
    --fs-6:  clamp(32px, calc(25.54px + 1.795vw), 60px);
    /* step-7 : h1 do hero                     34 -> 66 */
    --fs-7:  clamp(34px, calc(26.62px + 2.051vw), 66px);

    /* ===== ESCALA DE ESPAÇAMENTO FLUIDA =================================== */
    --sp-4xs: clamp(2px,  calc(1.54px  + 0.128vw), 4px);
    --sp-3xs: clamp(4px,  calc(3.54px  + 0.128vw), 6px);
    --sp-2xs: clamp(8px,  calc(7.31px  + 0.192vw), 11px);
    --sp-xs:  clamp(12px, calc(11.08px + 0.256vw), 16px);
    --sp-s:   clamp(16px, calc(14.62px + 0.385vw), 22px);
    --sp-m:   clamp(22px, calc(19.69px + 0.641vw), 32px);
    --sp-l:   clamp(32px, calc(28.31px + 1.026vw), 48px);
    --sp-xl:  clamp(48px, calc(42.46px + 1.538vw), 72px);
    --sp-2xl: clamp(64px, calc(54.77px + 2.564vw), 104px);
    --sp-3xl: clamp(72px, calc(59.08px + 3.590vw), 128px);

    /* ===== MEDIDAS DE CAIXA / ESTRUTURA (também em clamp) ================= */
    /* Gutter horizontal do container          20 -> 56 */
    --gutter:        clamp(20px, calc(11.69px + 2.308vw), 56px);
    /* Largura máxima do conteúdo: fluida, com teto para wide/ultrawide.     */
    --container-max: clamp(960px, calc(640px + 50vw), 1280px);
    /* Altura da barra fixa do topo            64 -> 74 */
    --header-h:      clamp(64px, calc(61.69px + 0.641vw), 74px);
    /* Raios                                                                  */
    --radius-xs: clamp(3px,  calc(2.77px + 0.064vw), 4px);
    --radius-s:  clamp(5px,  calc(4.54px + 0.128vw), 6px);
    --radius-m:  clamp(8px,  calc(7.54px + 0.128vw), 10px);
    --radius-l:  clamp(10px, calc(9.08px + 0.256vw), 14px);
    /* Espessura de detalhes                                                  */
    --tick: clamp(7px, calc(6.54px + 0.128vw), 9px);

    /* ===== Alturas fluidas de mídia ====================================== */
    --media-hero:    clamp(380px, calc(338px + 11.7vw), 560px); /* slider home */
    --media-compare: clamp(340px, calc(298px + 11.7vw), 520px); /* before/after*/
    --media-card:    clamp(170px, calc(140px + 8.3vw),  210px);  /* galeria     */
    --media-thumb:   clamp(170px, calc(146px + 6.7vw),  200px);  /* card serviço*/
}