:root {
    /* ============================================================
       CORES — Para trocar o tema do template, edite esta seção.
       Cada variável tem descrição do seu papel visual.
       Nota para IA: altere apenas os valores, não os nomes.
    ============================================================ */

    /* --- Fundos ---
       Usados no body (gradiente vertical) e em superfícies elevadas. */
    --color-bg: #050505;                                /* Fundo principal da página — topo do gradiente do body */
    --color-bg-secondary: #111111;                      /* Fundo base da página — fim do gradiente do body */
    --color-surface: #0c0c0c;                           /* Superfície de cards, modais e botão de busca do hero */

    /* --- Texto ---
       Hierarquia de opacidade: text > text-secondary > text-muted > text-faint */
    --color-text: #ffffff;                              /* Texto principal — branco sobre fundo escuro */
    --color-text-secondary: rgba(255, 255, 255, 0.75);  /* Subtítulos e descrições de destaque */
    --color-text-muted: rgba(255, 255, 255, 0.5);       /* Metadados, labels de baixa prioridade, scroll hint */
    --color-text-faint: rgba(255, 255, 255, 0.3);       /* Hints, placeholders, elementos decorativos */

    /* --- Bordas ---
       Usadas em separadores, FAQ, footer e cards. */
    --color-border: rgba(255, 255, 255, 0.1);           /* Bordas visíveis — separadores do FAQ */
    --color-border-subtle: rgba(255, 255, 255, 0.07);   /* Bordas ultra-suaves — footer, divisores de seção */
    --color-divider: rgba(255, 255, 255, 0.5);          /* Linha divisora interna dos car cards */

    /* --- Botão primário (CTA principal) ---
       Usado em todos os botões de ação primária do site. */
    --color-btn-bg: #ffffff;                            /* Fundo do botão primário — ex: "Ver estoque", "Ver ficha" */
    --color-btn-text: #050505;                          /* Texto/ícone sobre o botão primário */

    /* --- Botão secundário (outline/ghost) ---
       Usado no botão outline do CTA final da homepage. */
    --color-btn-secondary-border: rgba(255, 255, 255, 0.28);        /* Borda do botão outline secundário (repouso) */
    --color-btn-secondary-border-hover: rgba(255, 255, 255, 0.6);   /* Borda do botão outline secundário (hover) */

    /* --- Filtros do catálogo ---
       Estado ativo e hover dos botões de filtro na seção de catálogo. */
    --color-filter-active-bg: #ffffff;                  /* Fundo do filtro selecionado ou em hover */
    --color-filter-active-text: #000000;                /* Texto do filtro selecionado ou em hover */

    /* --- Car cards ---
       Gradiente de fundo aplicado em cada card de veículo. */
    --color-card-bg-from: #050505;                      /* Cor base do gradiente (parte inferior do card) */
    --color-card-bg-to: #2c2c2c;                        /* Cor topo do gradiente (parte superior do card) */

    /* --- Busca (hero) ---
       Aparência do campo de busca centralizado no hero da homepage. */
    --color-search-bg: #ffffff;                         /* Fundo do container de busca do hero */

    /* ============================================================
       TIPOGRAFIA
    ============================================================ */
    --font-family: "Roboto", sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;

    /* ============================================================
       ESPAÇAMENTO
    ============================================================ */
    --space-gutter: 40px;
    --space-section: 100px;
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 56px;
    --space-2xl: 80px;

    /* ============================================================
       LAYOUT
    ============================================================ */
    --content-max: 1280px;
    --radius-sm: 6px;
    --radius-base: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* ============================================================
       TRANSIÇÕES
    ============================================================ */
    --duration-fast: 0.15s;
    --duration-base: 0.3s;
    --duration-slow: 0.5s;
    --easing-base: ease;
    --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* ============================================================
       OPACIDADE — Usada em texto e elementos decorativos
    ============================================================ */
    --opacity-high: 0.9;
    --opacity-mid: 0.65;
    --opacity-low: 0.45;
    --opacity-faint: 0.3;

    /* ============================================================
       Z-INDEX
    ============================================================ */
    --z-base: 1;
    --z-overlay: 2;
    --z-fixed: 10;
    --z-top: 9999;
}