/* ==========================================================================
   DESIGN TOKENS — BÁRBARA RESENDE

   Este arquivo concentra os padrões globais do projeto:
   cores, tipografia, container, espaçamentos, raios, sombras,
   transições e camadas.

   Evite inserir valores repetidos diretamente nos outros arquivos.
   Sempre que um padrão global mudar, altere primeiro aqui.
========================================================================== */

/* ==================================================
   FONTE SCRIPT LOCAL
================================================== */

@font-face {
    font-family: "EDS Market Main Script";
    src: url("../fonts/eds-market-main-script.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sora";
    src: url("../fonts/sora-variable.woff2") format("woff2-variations"),
         url("../fonts/sora-variable.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   VARIÁVEIS GLOBAIS
========================================================================== */

:root {

    /* ======================================================================
       01. TIPOGRAFIA
    ====================================================================== */

     --font-family-primary:
        "Montserrat",
        sans-serif;

    --font-family-heading:
        "Sora",
        sans-serif;

    --font-family-script:
        "EDS Market Main Script",
        cursive;


    /* ======================================================================
       02. CORES PRINCIPAIS
    ====================================================================== */

    --color-blue:
        #095177;

    --color-blue-deep:
        #06151B;

    --color-purple:
        #4E9B3A;

    --color-primary:
        #23B6E9;

    --color-primary-hover:
        #1C93BC;

    --color-primary-active:
        #16748F;

    --color-yellow:
        #EACE06;

    --color-yellow-hover:
        #C6AF05;

    --color-yellow-active:
        #A39004;

    --color-secondary:
        #4E9B3A;

    --color-secondary-hover:
        #3E7D2E;

    --color-secondary-active:
        #336525;

    /* ======================================================================
       CORES DAS BANDEIRAS (hero pillars / acordeão)

       5 tons dentro da mesma família do logo — antes era uma mistura
       ad-hoc de azul e roxo.
    ====================================================================== */

    --color-flag-1:
        #06CCEA;

    --color-flag-2:
        var(--color-yellow);

    --color-flag-3:
        #007CBA;

    --color-flag-4:
        #7A00DF;

    --color-flag-5:
        #4E9B3A;

    /* Fundo compartilhado entre o nav de bandeiras do hero e a seção
       "Bandeiras de atuação" — pra combinar entre os dois blocos. */
    --color-flags-bg:
        #033651;


    /* ======================================================================
       03. CORES DE TEXTO E SUPERFÍCIE
    ====================================================================== */

    --color-heading-dark:
        #232323;

    --color-text:
        #3D3D3B;

    --color-white:
        #FFFFFF;

    --color-surface:
        #DDECFF;

    --color-surface-soft:
        #F4F5F7;

    --color-header:
        #FFFFFF;

    --color-header-sticky:
        #EAF6FC;

    --color-success:
        #7DAAEB;

    --color-info:
        #FFEFBB;

    --color-error:
        #C986EF;


    /* ======================================================================
       04. ALIASES DE COMPATIBILIDADE

       Mantêm os nomes antigos funcionando durante a transição.
    ====================================================================== */

    --font:
        var(--font-family-primary);

    --blue:
        var(--color-blue);

    --purple:
        var(--color-purple);

    --primary:
        var(--color-primary);

    --primary-hover:
        var(--color-primary-hover);

    --primary-active:
        var(--color-primary-active);

    --yellow:
        var(--color-yellow);

    --yellow-hover:
        var(--color-yellow-hover);

    --yellow-active:
        var(--color-yellow-active);

    --secondary:
        var(--color-secondary);

    --secondary-hover:
        var(--color-secondary-hover);

    --secondary-active:
        var(--color-secondary-active);

    --dark:
        var(--color-heading-dark);

    --text:
        var(--color-text);

    --white:
        var(--color-white);

    --surface:
        var(--color-surface);

    --surface-soft:
        var(--color-surface-soft);

    --header:
        var(--color-header);

    --success:
        var(--color-success);

    --info:
        var(--color-info);

    --error:
        var(--color-error);


    /* ======================================================================
       05. ESCALA TIPOGRÁFICA

       Todos os tamanhos usam clamp para crescer de forma fluida.
    ====================================================================== */

    --font-size-xs:
        0.75rem;

    --font-size-sm:
        0.875rem;

    --font-size-base:
        1rem;

    --font-size-md:
        clamp(
            1rem,
            1.15vw,
            1.125rem
        );

    --font-size-lg:
        clamp(
            1.125rem,
            1.5vw,
            1.375rem
        );


    /* ======================================================================
       EYEBROW GLOBAL

       Controla todas as chamadas pequenas acima dos títulos:

       - Pré-candidata a deputada estadual;
       - Atuação e resultados;
       - Escuta MS;
       - Notícias;
       - Conexão.

       O tamanho varia aproximadamente de 14px até 17px.
    ====================================================================== */

    --font-size-eyebrow:
        clamp(
            0.875rem,
            1vw,
            1.0625rem
        );

    --font-weight-eyebrow:
        700;


    /* ======================================================================
       TÍTULOS
    ====================================================================== */

    --font-size-h6:
        clamp(
            1rem,
            1.15vw,
            1.125rem
        );

    --font-size-h5:
        clamp(
            1.125rem,
            1.5vw,
            1.375rem
        );

    --font-size-h4:
        clamp(
            1.375rem,
            2vw,
            1.875rem
        );

    --font-size-h3:
        clamp(
            2rem,
            3vw,
            2.875rem
        );

    --font-size-h2:
        clamp(
            3.25rem,
            5.8vw,
            5.5rem
        );

    --font-size-h1:
        clamp(
            4rem,
            7vw,
            7.25rem
        );

    --font-size-display:
        clamp(
            4.75rem,
            8vw,
            8.75rem
        );


    /* ======================================================================
       06. LAYOUT GLOBAL

       Container principal mais amplo.

       88rem equivale aproximadamente a 1408px.
    ====================================================================== */

    --container:
        88rem;

    --gutter:
        clamp(
            1.25rem,
            3vw,
            3rem
        );

    --section:
        clamp(
            5rem,
            9vw,
            8rem
        );

    --header-height:
        8rem;

    --header-height-sticky:
        4.5rem;

    --side-flags-width:
        6.5rem;


    /* ======================================================================
       07. RAIOS
    ====================================================================== */

    --radius-sm:
        0.5rem;

    --radius:
        0.75rem;

    --radius-md:
        1rem;

    --radius-lg:
        1.5rem;

    --pill:
        999px;


    /* ======================================================================
       08. SOMBRAS
    ====================================================================== */

    --shadow-sm:
        0
        0.75rem
        2rem
        rgba(
            17,
            50,
            104,
            0.10
        );

    --shadow:
        0
        1.75rem
        5rem
        rgba(
            17,
            50,
            104,
            0.16
        );

    --shadow-lg:
        0
        2rem
        6rem
        rgba(
            17,
            50,
            104,
            0.22
        );


    /* ======================================================================
       09. TRANSIÇÕES
    ====================================================================== */

    --ease-fast:
        180ms ease;

    --ease:
        280ms ease;

    --ease-slow:
        420ms ease;


    /* ======================================================================
       10. CAMADAS
    ====================================================================== */

    --z-header:
        100;

    --z-modal:
        1000;
}