> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yampi.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Variáveis de Seção

> Variáveis CSS injetadas inline por seção, permitindo esquemas de cores independentes por região da loja.

Diferente das variáveis globais do tema, estas são injetadas via atributo `style` diretamente no elemento raiz de cada seção Twig. Isso permite que o cabeçalho, rodapé e flags de produto tenham suas próprias cores sem afetar o restante da página.

## Cabeçalho

Definidas em `sections/global/header.twig` a partir dos parâmetros da seção.

| Variável              | Descrição                                            |
| :-------------------- | :--------------------------------------------------- |
| `--header-bg-color`   | Cor de fundo do cabeçalho.                           |
| `--header-font-color` | Cor do texto e links do cabeçalho.                   |
| `--header-icon-color` | Cor dos ícones do cabeçalho (carrinho, busca, etc.). |
| `--menu-bg-color`     | Cor de fundo do menu de categorias.                  |
| `--menu-text-color`   | Cor do texto do menu de categorias.                  |

## Rodapé

Definidas em `sections/global/footer.twig` a partir dos parâmetros da seção.

| Variável                 | Descrição                                                                         |
| :----------------------- | :-------------------------------------------------------------------------------- |
| `--footer-bg-color`      | Cor de fundo do rodapé.                                                           |
| `--footer-font-color`    | Cor principal do texto do rodapé.                                                 |
| `--footer-hr-color`      | Cor dos divisores do rodapé (10% de opacidade sobre `--footer-font-color`).       |
| `--footer-opacity-color` | Cor do texto secundário do rodapé (50% de opacidade sobre `--footer-font-color`). |

## Flags de produto

Definidas inline em cada flag na seção de produto, com base nas configurações de cor da flag cadastrada.

| Variável          | Descrição                        |
| :---------------- | :------------------------------- |
| `--flag-color`    | Cor do texto da flag do produto. |
| `--flag-bg-color` | Cor de fundo da flag do produto. |

## Exemplo de uso

```scss theme={"system"}
// Usando variáveis de seção dentro do SCSS do cabeçalho
.header {
    background-color: var(--header-bg-color);
    color: var(--header-font-color);

    .icon {
        fill: var(--header-icon-color);
    }
}

// Flag personalizada
.flag {
    color: var(--flag-color);
    background-color: var(--flag-bg-color);
}
```