:root {
    /* === CORES PRINCIPAIS === */
    --color-primary: #c8102e; /* Vermelho do logo Winston Churchill */
    --color-primary-dark: #a00d25; /* Vermelho escuro para hover */
    --color-primary-light: #e6143a; /* Vermelho claro para fundos */

    /* === CORES NEUTRAS === */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-darker: #2b2d42; /* Textos principais */
    --color-gray-dark: #333333; /* Textos secundários */
    --color-gray: #666666; /* Textos terciários */
    --color-gray-light: #cccccc; /* Bordas e divisores */
    --color-gray-lighter: #f5f5f5; /* Backgrounds suaves */
    --color-gray-lightest: #fafafa; /* Backgrounds alternativos */

    /* === CORES SECUNDÁRIAS === */
    --color-blue: #457b9d; /* Links e ações secundárias */
    --color-blue-dark: #1d3557; /* Azul escuro para hover */
    --color-blue-light: #a8dadc; /* Azul claro para fundos */

    /* === CORES DE ESTADO === */
    --color-success: #28a745;
    --color-success-light: #d4edda;
    --color-error: #dc3545;
    --color-error-light: #f8d7da;
    --color-warning: #ffc107;
    --color-warning-light: #fff3cd;
    --color-info: #17a2b8;
    --color-info-light: #d1ecf1;

    /* === TIPOGRAFIA === */
    --font-primary: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    --font-secondary: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    --font-monospace: "Courier New", Courier, monospace;

    /* === TAMANHOS DE FONTE === */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    --font-size-5xl: 3rem; /* 48px */
    --font-size-6xl: 3.75rem; /* 60px */

    /* === PESOS DE FONTE === */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* === ESPAÇAMENTOS === */
    --spacing-xs: 0.25rem; /* 4px */
    --spacing-sm: 0.5rem; /* 8px */
    --spacing-md: 1rem; /* 16px */
    --spacing-lg: 1.5rem; /* 24px */
    --spacing-xl: 2rem; /* 32px */
    --spacing-2xl: 3rem; /* 48px */
    --spacing-3xl: 4rem; /* 64px */
    --spacing-4xl: 6rem; /* 96px */
    --spacing-5xl: 8rem; /* 128px */

    /* === BORDAS E RAIOS === */
    --border-radius-sm: 0.25rem; /* 4px */
    --border-radius-md: 0.5rem; /* 8px */
    --border-radius-lg: 1rem; /* 16px */
    --border-radius-xl: 1.5rem; /* 24px */
    --border-radius-full: 9999px; /* Totalmente arredondado */

    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;

    /* === SOMBRAS === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* === TRANSIÇÕES === */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    /* === Z-INDEX === */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* === BREAKPOINTS (para referência em JS) === */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;

    /* === CONTAINER === */
    --container-max-width: 1200px;
    --container-padding: var(--spacing-md);

    /* === HEADER === */
    --header-height: 45px;
    --header-height-mobile: 35px;

    /* =============================================
       ALIASES PARA COMPATIBILIDADE
       Estes aliases permitem que o código admin existente
       continue funcionando enquanto migramos para as
       variáveis padronizadas do sistema.
       
       NOTA: Em futuras refatorações, substituir o uso
       de --dark/--gray por --color-gray-dark/--color-gray
       ============================================= */

    /* Cores (usadas em admin-*.css) */
    --dark: var(--color-gray-dark);
    --gray: var(--color-gray);
    --light-gray: var(--color-gray-lighter);
    --white: var(--color-white);

    /* Cores primárias/secundárias (usadas em about.css e outras páginas públicas) */
    --primary-color: var(--color-primary);
    --primary-light: rgba(200, 16, 46, 0.1);
    --secondary-color: var(--color-blue);

    /* Cores de texto (usadas em about.css) */
    --text-dark: var(--color-gray-darker);
    --text-muted: var(--color-gray);
    --background: var(--color-gray-lightest);
    --border-color: var(--color-gray-light);

    /* Cores de estado (usadas em admin-dashboard.css) */
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
    --success: #10b981; /* Verde usado no admin */
    --info: var(--color-blue);
    --warning: #f59e0b; /* Amarelo usado no admin */
    --danger: #dc2626; /* Vermelho usado no admin */
}

/* === AJUSTES PARA DARK MODE (Opcional - Futuro) === */
@media (prefers-color-scheme: dark) {
    :root {
        /* Variáveis para modo escuro podem ser adicionadas no futuro */
    }
}