/*
|--------------------------------------------------------------------------
| CHEFFIN - SISTEMA DE CORES E TEMAS
|--------------------------------------------------------------------------
|
| Este arquivo é a ÚNICA fonte de verdade para cores no projeto.
| Define 3 temas: WHITE (padrão), DARK e BLUE.
|
| TODOS os temas têm EXATAMENTE a mesma estrutura de variáveis.
| Componentes usam essas variáveis, sem sobrescrever.
|
| TEMAS:
|   - body (sem classe) ou body.white-mode = Tema Branco (PADRÃO)
|   - body.dark-mode = Tema Escuro
|   - body.blue-mode = Tema Azul
|
*/

/* ========================================================================
   TEMA BRANCO (WHITE MODE) - PADRÃO
   ======================================================================== */

body,
body.white-mode {
    /* === BACKGROUNDS === */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8F9FA;
    --bg-tertiary: #F1F3F5;
    /* Mantém a API de variável, mas sem gradiente visível
       para evitar sensação de "duas cores" no fundo. */
    --bg-gradient: var(--bg-primary);

    /* === GLASS MORPHISM === */
    --glass-bg: rgba(0, 0, 0, 0.08);
    --glass-bg-hover: rgba(0, 0, 0, 0.12);
    --glass-bg-light: rgba(0, 0, 0, 0.05);
    --glass-border: rgba(0, 0, 0, 0.1);

    /* Glass Shadows */
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    --glass-shadow-light: 0 8px 32px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    --glass-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);

    /* === TEXTOS === */
    --text-primary: #000000;
    --text-secondary: rgba(0, 0, 0, 0.8);
    --text-tertiary: rgba(0, 0, 0, 0.6);
    --text-disabled: rgb(0, 0, 0);

    /* === BORDAS === */
    --border-primary: rgba(0, 0, 0, 0.1);
    --border-secondary: rgba(0, 0, 0, 0.05);

    /* === OVERLAYS === */
    --overlay: rgba(255, 255, 255, 0.95);
    --overlay-dark: rgba(0, 0, 0, 0.6);
    --overlay-light: rgba(255, 255, 255, 0.1);
    --overlay-modal: rgba(0, 0, 0, 0.8);

    /* === GRADIENTES === */
    --gradient-overlay-top: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent, transparent);
    --gradient-overlay-bottom: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent);

    /* === CORES DE MARCA === */
    --brand-primary: #4880FF;
    --brand-fallback: #ff6b6b;
    --text-on-brand: #FFFFFF;

    /* === APLICAR === */
    background: var(--bg-gradient);
    color: var(--text-primary);
}


/* ========================================================================
   TEMA ESCURO (DARK MODE)
   ======================================================================== */

body.dark-mode {
    /* === BACKGROUNDS === */
    --bg-primary: #0A0A0B;
    --bg-secondary: #18181B;
    --bg-tertiary: #27272A;
    /* Fundo sólido para evitar “faixa” de gradiente */
    --bg-gradient: var(--bg-primary);

    /* === GLASS MORPHISM === */
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-bg-hover: rgba(255, 255, 255, 0.12);
    --glass-bg-light: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);

    /* Glass Shadows */
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --glass-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    --glass-shadow-light: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --glass-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);

    /* === TEXTOS === */
    --text-primary: #F4F4F5;
    --text-secondary: rgba(244, 244, 245, 0.8);
    --text-tertiary: rgba(244, 244, 245, 0.6);
    --text-disabled: rgba(161, 161, 170, 1);

    /* === BORDAS === */
    --border-primary: rgba(255, 255, 255, 0.1);
    --border-secondary: rgba(255, 255, 255, 0.05);

    /* === OVERLAYS === */
    --overlay: rgba(0, 0, 0, 0.8);
    --overlay-dark: rgba(0, 0, 0, 0.8);
    --overlay-light: rgba(255, 255, 255, 0.05);
    --overlay-modal: rgba(0, 0, 0, 0.9);

    /* === GRADIENTES === */
    --gradient-overlay-top: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent, transparent);
    --gradient-overlay-bottom: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);

    /* === CORES DE MARCA === */
    --brand-primary: #4880FF;
    --brand-fallback: #ff6b6b;
    --text-on-brand: #FFFFFF;

    /* === APLICAR === */
    background: var(--bg-gradient);
    color: var(--text-primary);
}


/* ========================================================================
   TEMA AZUL (BLUE MODE)
   ======================================================================== */

body.blue-mode {
    /* === BACKGROUNDS === */
    --bg-primary: #0A1929;
    --bg-secondary: #132F4C;
    --bg-tertiary: #1A4971;
    /* Fundo sólido para evitar “faixa” de gradiente */
    --bg-gradient: var(--bg-primary);

    /* === GLASS MORPHISM === */
    --glass-bg: rgba(100, 181, 246, 0.08);
    --glass-bg-hover: rgba(100, 181, 246, 0.12);
    --glass-bg-light: rgba(100, 181, 246, 0.05);
    --glass-border: rgba(100, 181, 246, 0.2);

    /* Glass Shadows */
    --glass-shadow: 0 8px 32px rgba(0, 100, 200, 0.3), inset 0 1px 0 rgba(100, 181, 246, 0.1);
    --glass-shadow-hover: 0 8px 32px rgba(0, 100, 200, 0.4), inset 0 1px 0 rgba(100, 181, 246, 0.15);
    --glass-shadow-light: 0 8px 32px rgba(0, 100, 200, 0.2), inset 0 1px 0 rgba(100, 181, 246, 0.08);
    --glass-shadow-card: 0 4px 16px rgba(0, 100, 200, 0.25), inset 0 1px 0 rgba(100, 181, 246, 0.1);

    /* === TEXTOS === */
    --text-primary: #E3F2FD;
    --text-secondary: rgba(227, 242, 253, 0.8);
    --text-tertiary: rgba(227, 242, 253, 0.6);
    --text-disabled: rgba(144, 202, 249, 1);

    /* === BORDAS === */
    --border-primary: rgba(100, 181, 246, 0.2);
    --border-secondary: rgba(100, 181, 246, 0.1);

    /* === OVERLAYS === */
    --overlay: rgba(0, 30, 60, 0.8);
    --overlay-dark: rgba(0, 30, 60, 0.7);
    --overlay-light: rgba(100, 181, 246, 0.08);
    --overlay-modal: rgba(0, 30, 60, 0.9);

    /* === GRADIENTES === */
    --gradient-overlay-top: linear-gradient(to top, rgba(0, 30, 60, 0.7), transparent, transparent);
    --gradient-overlay-bottom: linear-gradient(to bottom, rgba(0, 50, 100, 0.3), transparent);

    /* === CORES DE MARCA === */
    --brand-primary: #4880FF;
    --brand-fallback: #ff6b6b;
    --text-on-brand: #FFFFFF;

    /* === APLICAR === */
    background: var(--bg-gradient);
    color: var(--text-primary);
}


/* ========================================================================
   CORES COMUNS (TODOS OS TEMAS)
   ======================================================================== */

:root {
    /* === CORES SEMÂNTICAS === */
    --success: #10B981;
    --success-light: #34D399;
    --success-dark: #059669;

    --error: #EF4444;
    --error-light: #F87171;
    --error-dark: #DC2626;

    --warning: #F59E0B;
    --warning-light: #FBBF24;
    --warning-dark: #D97706;

    --info: #3B82F6;
    --info-light: #60A5FA;
    --info-dark: #2563EB;

    /* === CORES ESPECÍFICAS === */
    --promo: #DC2626;
    --highlight: #EAB308;
    --price: #10B981;

    /* === CORES DE ERRO (para botões) === */
    --color-error: rgb(239, 68, 68);
    --color-error-bg: rgba(239, 68, 68, 0.15);
    --color-error-border: rgba(239, 68, 68, 0.8);
    --color-error-shadow: 0 4px 16px rgba(239, 68, 68, 0.15);

    /* === CORES GRAY (para botões) === */
    --color-gray: rgba(156, 163, 175, 1);
    --color-gray-bg: rgba(156, 163, 175, 0.9);
    --color-gray-border: rgba(156, 163, 175, 0.6);

    /* === EFEITOS === */
    --blur-sm: 10px;
    --blur-md: 20px;
    --blur-lg: 30px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;

    /* === TRANSIÇÕES === */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}


/* ========================================================================
   TRANSIÇÕES SUAVES
   ======================================================================== */

body {
    transition: background var(--transition-normal),
                color var(--transition-normal);
}