/*------------------------------------------------------------------------------------------------------------------------------------------------------------------
    FICHEIRO ......: css/variables.css
    DESCRIÇÃO .....: Identidade visual e sistema de cores oficial da plataforma OficinaPro. É a ÚNICA
                     fonte de verdade das cores do projeto e tem de ser carregado ANTES de qualquer
                     outra folha de estilos (global ou de módulo).
    MÓDULO ........: Núcleo / Design System
    PROJETO .......: Plataforma Oficinas (SaaS de Gestão de Oficinas Automóveis) — Trimerang
    AUTOR .........: Trimerang / Marco Cunha

    CONTEÚDO:
        1. Paleta oficial OficinaPro (cores exatas da marca)
        2. Variantes alfa e tonalidades escuras — usadas nos badges e nos anéis de foco
        3. Tokens de superfície, raio, sombra e layout
        4. Ponte de compatibilidade (--cor-*) para as folhas de estilo já existentes

    REGRAS DE APLICAÇÃO:
        - Painel de gestão (B2B) .... sidebar em --oficina-primary-dark, fundo --oficina-bg-main,
                                      ações principais em --oficina-primary-blue
        - Portal do Cliente (B2C) ... cartões --oficina-bg-card sobre fundo neutro; aprovação de
                                      orçamentos e pagamentos em --oficina-primary-orange
        - Badges de estado .......... fundo suave (variante -soft) + texto na tonalidade escura
                                      da mesma cor (variante -dark), para contraste máximo
------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

:root {
    /* ============================================================================================
       1. PALETA OFICIAL OFICINAPRO
       ============================================================================================ */

    /* Cores Primárias e Estruturais */
    --oficina-primary-dark: #0F172A;   /* Dark Slate / Noite - Usado em Headers, Sidebar e Navegação Principal */
    --oficina-primary-blue: #2563EB;   /* Electric Royal Blue - Usado em Botões Primários, Links e Foco */
    --oficina-primary-orange: #F97316; /* Laranja Automotivo - Usado em Botões de Destaque, CTAs e Aprovação do Cliente */

    /* Neutros, Fundos e Superfícies */
    --oficina-bg-main: #F8FAFC;        /* Fundo Geral da Aplicação (Cinzento Suave) */
    --oficina-bg-card: #FFFFFF;        /* Fundo de Cartões, Tabelas e Modais */
    --oficina-border: #E2E8F0;         /* Linhas de Divisão, Bordas de Tabelas e Inputs */

    /* Tipografia */
    --oficina-text-main: #1E293B;      /* Texto Principal / Títulos (Alta Contraste) */
    --oficina-text-muted: #64748B;     /* Texto Secundário, Subtítulos e Labels */

    /* Cores Semânticas de Estado da Oficina */
    --oficina-status-success: #10B981; /* Verde - Viatura Pronta, Fatura Paga, Orçamento Aprovado */
    --oficina-status-warning: #F59E0B; /* Amarelo/Laranja - Pendente, Aguarda Peças, Em Diagnóstico */
    --oficina-status-danger: #EF4444;  /* Vermelho - Orçamento Rejeitado, Conta Suspensa, Atrasado */
    --oficina-status-info: #3B82F6;    /* Azul - Rececionado, Em Reparação */

    /* ============================================================================================
       2. VARIANTES ALFA E TONALIDADES ESCURAS
       As variantes "-soft" servem de fundo dos badges; as "-dark" garantem o contraste do texto
       na mesma tonalidade, conforme a regra de legibilidade em tabelas e linhas do tempo.
       ============================================================================================ */

    /* Primárias */
    --oficina-primary-dark-soft: rgba(15, 23, 42, .06);
    --oficina-primary-blue-soft: rgba(37, 99, 235, .10);
    --oficina-primary-blue-ring: rgba(37, 99, 235, .20);
    --oficina-primary-blue-dark: #1D4ED8;
    --oficina-primary-orange-soft: rgba(249, 115, 22, .12);
    --oficina-primary-orange-ring: rgba(249, 115, 22, .28);
    --oficina-primary-orange-dark: #C2410C;

    /* Semânticas */
    --oficina-status-success-soft: rgba(16, 185, 129, .13);
    --oficina-status-success-dark: #047857;
    --oficina-status-warning-soft: rgba(245, 158, 11, .15);
    --oficina-status-warning-dark: #B45309;
    --oficina-status-danger-soft: rgba(239, 68, 68, .12);
    --oficina-status-danger-dark: #B91C1C;
    --oficina-status-info-soft: rgba(59, 130, 246, .12);
    --oficina-status-info-dark: #1D4ED8;

    /* Neutro (estados sem cor semântica: Entregue, Rascunho, Cancelado por decisão) */
    --oficina-neutral-soft: #F1F5F9;
    --oficina-neutral-dark: #475569;

    /* ============================================================================================
       3. SUPERFÍCIES, TIPOGRAFIA E LAYOUT
       ============================================================================================ */
    --oficina-bg-subtle: #F1F5F9;      /* Cabeçalhos de tabela, painéis embutidos */
    --oficina-bg-sidebar-hover: rgba(255, 255, 255, .08);
    --oficina-text-on-dark: #E2E8F0;   /* Texto sobre a sidebar escura */
    --oficina-text-on-dark-muted: #94A3B8;

    --oficina-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    --oficina-radius: 12px;
    --oficina-radius-sm: 8px;
    --oficina-radius-pill: 999px;

    --oficina-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    --oficina-shadow-md: 0 6px 20px rgba(15, 23, 42, .10);
    --oficina-shadow-lg: 0 18px 48px rgba(15, 23, 42, .22);

    --oficina-sidebar-width: 268px;
    --oficina-topbar-height: 70px;

    /* ============================================================================================
       4. PONTE DE COMPATIBILIDADE
       As folhas de estilo escritas antes da identidade OficinaPro usam os nomes --cor-*.
       Mantê-los mapeados aqui faz com que TODOS os módulos adotem a paleta oficial sem
       reescrever regra a regra, e evita divergências futuras entre ficheiros.
       ============================================================================================ */
    --cor-primaria: var(--oficina-primary-blue);
    --cor-primaria-escura: var(--oficina-primary-blue-dark);
    --cor-primaria-clara: var(--oficina-primary-blue-soft);
    --cor-destaque: var(--oficina-primary-orange);

    --cor-texto: var(--oficina-text-main);
    --cor-texto-suave: var(--oficina-text-muted);
    --cor-fundo: var(--oficina-bg-main);
    --cor-branco: var(--oficina-bg-card);
    --cor-borda: var(--oficina-border);

    --cor-sucesso: var(--oficina-status-success-dark);
    --cor-sucesso-clara: var(--oficina-status-success-soft);
    --cor-aviso: var(--oficina-status-warning-dark);
    --cor-aviso-clara: var(--oficina-status-warning-soft);
    --cor-erro: var(--oficina-status-danger-dark);
    --cor-erro-clara: var(--oficina-status-danger-soft);
    --cor-info: var(--oficina-status-info);

    --raio: var(--oficina-radius);
    --raio-pequeno: var(--oficina-radius-sm);
    --sombra: var(--oficina-shadow);
    --sombra-media: var(--oficina-shadow-md);
    --largura-menu: var(--oficina-sidebar-width);
    --altura-topo: var(--oficina-topbar-height);
}