/* =============================================================================
 * Design Tokens — paleta default (referência canônica) — FRENTE-1
 * =============================================================================
 * Artefato CSS legível com a paleta DEFAULT (template-01). É a referência única
 * dos tokens disponíveis. Em produção, os mesmos tokens são compilados dentro de
 * cada CSS de template a partir de design-tokens.scss (com os valores da marca);
 * o override por concessionária acontece em runtime via SiteConfig `ds_theme_tokens`.
 *
 * Para mudar a cor padrão de TODOS os sites que usam a paleta default, basta
 * alterar --token-color-primary aqui (e o equivalente em design-tokens.scss).
 *
 * Ver: docs/specs/SPEC-FRENTE-1-Design-Tokens.md
 * ========================================================================== */
:root {
    /* ----- Cores de marca / semânticas ----- */
    --token-color-primary: #12234b;
    --token-color-primary-rgb: 18, 35, 75;
    --token-color-primary-hover: #0c182f;
    --token-color-primary-contrast: #ffffff;
    --token-color-secondary: #0064ba;
    --token-color-secondary-rgb: 0, 100, 186;
    --token-color-secondary-hover: #004a8a;
    --token-color-secondary-contrast: #ffffff;
    --token-color-success: #28a745;
    --token-color-danger: #dc3545;
    --token-color-warning: #ffc107;
    --token-color-info: #b2c4d5;
    --token-color-light: #ffffff;
    --token-color-dark: #1f1f1f;
    --token-color-dark-rgb: 31, 31, 31;
    --token-color-muted: #e5e6eb;
    --token-color-muted-rgb: 229, 230, 235;
    --token-color-white: #ffffff;
    --token-color-black: #000000;
    --token-color-gray: #6c757d;
    --token-color-gray-rgb: 108, 117, 125;

    /* ----- Cores extras de marca ----- */
    --token-color-extra-1: #e5e6eb;
    --token-color-extra-1-rgb: 229, 230, 235;
    --token-color-extra-2: #5a5a5a;
    --token-color-extra-3: #6f42c1;
    --token-color-extra-4: #e83e8c;
    --token-color-extra-5: #dc3545;
    --token-color-extra-6: #fd7e14;

    /* ----- Escala neutra ----- */
    --token-color-gray-100: #f8f9fa;
    --token-color-gray-200: #e9ecef;
    --token-color-gray-300: #dee2e6;
    --token-color-gray-400: #ced4da;
    --token-color-gray-500: #adb5bd;
    --token-color-gray-600: #6c757d;
    --token-color-gray-700: #495057;
    --token-color-gray-800: #343a40;
    --token-color-gray-900: #212529;

    /* ----- Superfície / texto / borda ----- */
    --token-color-bg: var(--token-color-white);
    --token-color-bg-alt: var(--token-color-gray-100);
    --token-color-surface: #ffffff;
    --token-color-text: #212529;
    --token-color-text-muted: #6c757d;
    --token-color-text-inverse: #ffffff;
    --token-color-border: #dee2e6;
    --token-color-link: var(--token-color-primary);
    --token-color-link-hover: var(--token-color-primary-hover);

    /* ----- Espaçamento ----- */
    --token-space-0: 0;
    --token-space-1: 0.25rem;
    --token-space-2: 0.5rem;
    --token-space-3: 1rem;
    --token-space-4: 1.5rem;
    --token-space-5: 3rem;

    /* ----- Raio de borda ----- */
    --token-radius-sm: 0.25rem;
    --token-radius-md: 0.5rem;
    --token-radius-lg: 0.75rem;
    --token-radius-pill: 50rem;

    /* ----- Tipografia ----- */
    --token-font-family-base: inherit;
    --token-font-family-heading: inherit;
    --token-font-size-base: 1rem;
    --token-font-size-sm: 0.875rem;
    --token-font-size-lg: 1.25rem;
    --token-font-weight-normal: 400;
    --token-font-weight-bold: 700;
    --token-line-height-base: 1.5;

    /* ----- Elevação ----- */
    --token-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --token-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --token-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);

    /* ----- Z-index (alinhado às camadas do Bootstrap 4) ----- */
    --token-z-dropdown: 1000;
    --token-z-sticky: 1020;
    --token-z-fixed: 1030;
    --token-z-modal-backdrop: 1040;
    --token-z-modal: 1050;
    --token-z-popover: 1060;
    --token-z-tooltip: 1070;
}

/* =============================================================================
 * Overrides por marca (EVO-1874) — :root[data-template="<slug>"]
 * =============================================================================
 * O atributo data-template é renderizado no <html> (ver base.blade.php +
 * config/templates.php). O seletor de atributo tem especificidade maior que o
 * :root simples — é o ponto único para ajustar a paleta de uma marca.
 *
 * Os valores abaixo são as cores ATUAIS de cada marca (mesmo valor já compilado
 * no template) → a regra é aplicada SEM alterar nenhuma cor renderizada (zero-diff).
 * A cor oficial de guideline de cada marca está anotada ao lado; a troca para o
 * guideline depende de aprovação do PO/designer (ver config/templates.php).
 * ========================================================================== */
:root[data-template="fiat"] {
    --token-color-primary: #18131F;       /* guideline: #E74C3C */
    --token-color-primary-rgb: 24, 19, 31;
    --token-color-secondary: #FF1430;     /* guideline: #34495E */
    --token-color-secondary-rgb: 255, 20, 48;
}

:root[data-template="toyota"] {
    --token-color-primary: #002c5f;       /* guideline: #EB0A1E */
    --token-color-primary-rgb: 0, 44, 95;
}

:root[data-template="hyundai"] {
    --token-color-primary: #002c5f;       /* guideline: #C60C30 */
    --token-color-primary-rgb: 0, 44, 95;
}

:root[data-template="mercedes"] {
    --token-color-primary: #00adef;       /* guideline: #00246A */
    --token-color-primary-rgb: 0, 173, 239;
}

:root[data-template="peugeot"] {
    --token-color-primary: #00A3E0;       /* guideline: #003333 */
    --token-color-primary-rgb: 0, 163, 224;
}

:root[data-template="citroen"] {
    --token-color-primary: #12234b;       /* guideline: #F2A900 */
    --token-color-primary-rgb: 18, 35, 75;
}

:root[data-template="ram"] {
    --token-color-primary: #12234b;       /* guideline: #1B3A7C */
    --token-color-primary-rgb: 18, 35, 75;
}