/**
 * Expresso Modal - CSS Variables Centralizadas
 * Sistema modular de variáveis para controle completo via admin
 */

:root {
    /* === CORES PRINCIPAIS === */
    --expresso-primary-color: #10b981;
    --expresso-primary-hover: #059669;
    --expresso-background-color: #ffffff;
    --expresso-text-primary: #1f2937;
    --expresso-text-secondary: #6b7280;
    --expresso-success-color: #10b981;
    --expresso-error-color: #ef4444;
    --expresso-warning-color: #f59e0b;
    --expresso-info-color: #3b82f6;

    /* === LAYOUT E DIMENSÕES === */
    --expresso-modal-width: 420px;
    --expresso-modal-max-width: 90vw;
    --expresso-modal-min-height: 300px;
    --expresso-border-radius: 12px;
    --expresso-border-radius-sm: 8px;
    --expresso-border-radius-lg: 16px;

    /* === TIPOGRAFIA === */
    --expresso-font-size: 16px;
    --expresso-font-size-sm: 14px;
    --expresso-font-size-lg: 18px;
    --expresso-font-size-xl: 20px;
    --expresso-font-weight-normal: 400;
    --expresso-font-weight-medium: 500;
    --expresso-font-weight-semibold: 600;
    --expresso-line-height: 1.5;
    --expresso-line-height-tight: 1.25;

    /* === ESPAÇAMENTOS === */
    --expresso-spacing-xs: 4px;
    --expresso-spacing-sm: 8px;
    --expresso-spacing-md: 12px;
    --expresso-spacing-lg: 16px;
    --expresso-spacing-xl: 20px;
    --expresso-spacing-2xl: 24px;
    --expresso-spacing-3xl: 32px;

    /* === SHADOWS === */
    --expresso-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --expresso-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --expresso-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --expresso-shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.15);

    /* === ANIMAÇÕES === */
    --expresso-transition-fast: 0.15s ease;
    --expresso-transition-normal: 0.2s ease;
    --expresso-transition-slow: 0.3s ease;
    --expresso-animation-duration: 0.3s;
    --expresso-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* === BORDERS === */
    --expresso-border-width: 1px;
    --expresso-border-width-thick: 2px;
    --expresso-border-color: #e5e7eb;
    --expresso-border-color-focus: var(--expresso-primary-color);

    /* === Z-INDEX === */
    --expresso-z-overlay: 9999;
    --expresso-z-modal: 10000;
    --expresso-z-dropdown: 10001;
    --expresso-z-tooltip: 10002;

    /* === ESTADOS DE COMPONENTES === */
    --expresso-button-height: 44px;
    --expresso-input-height: 44px;
    --expresso-input-padding: 12px 16px;
    --expresso-button-padding: 14px 24px;

    /* === RESPONSIVE BREAKPOINTS === */
    --expresso-mobile-max: 480px;
    --expresso-tablet-max: 768px;
    --expresso-desktop-min: 769px;

    /* === TEXTOS CUSTOMIZÁVEIS (Controlados pelo admin) === */
    --expresso-phone-label: 'Número do WhatsApp';
    --expresso-phone-placeholder: '(11) 99999-9999';
    --expresso-otp-label: 'Digite o código recebido';
    --expresso-otp-placeholder: '000000';
    --expresso-send-button-text: 'Continuar';
    --expresso-verify-button-text: 'Confirmar';
    --expresso-resend-button-text: 'Reenviar código';
    --expresso-cancel-button-text: 'Alterar telefone';

    /* === CONFIGURAÇÕES DE COMPORTAMENTO === */
    --expresso-enable-animations: 1; /* 1 = enabled, 0 = disabled */
    --expresso-enable-backdrop-blur: 1;
    --expresso-enable-close-on-overlay: 1;
    --expresso-enable-close-on-escape: 1;
}

/* === SISTEMA DE TEMAS === */

/* Tema Dark */
:root[data-expresso-theme="dark"] {
    --expresso-background-color: #1f2937;
    --expresso-text-primary: #f9fafb;
    --expresso-text-secondary: #d1d5db;
    --expresso-border-color: #374151;
}

/* Tema Corporate */
:root[data-expresso-theme="corporate"] {
    --expresso-primary-color: #1e40af;
    --expresso-primary-hover: #1e3a8a;
    --expresso-border-radius: 4px;
    --expresso-font-weight-medium: 600;
}

/* Tema Modern */
:root[data-expresso-theme="modern"] {
    --expresso-border-radius: 16px;
    --expresso-shadow-modal: 0 25px 50px rgba(0, 0, 0, 0.25);
    --expresso-animation-easing: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* === COMPONENTES ESPECÍFICOS === */

/* Session Expired Options */
.session-expired-options {
    margin-top: var(--expresso-spacing-lg);
    padding: var(--expresso-spacing-lg);
    background: var(--expresso-background-secondary);
    border: 1px solid var(--expresso-border-color-secondary);
    border-radius: var(--expresso-border-radius-sm);
    border-left: 4px solid var(--expresso-warning-color);
}

.session-expired-options .options-content {
    display: flex;
    align-items: flex-start;
    gap: var(--expresso-spacing-md);
    margin-bottom: var(--expresso-spacing-lg);
}

.session-expired-options .options-icon {
    font-size: var(--expresso-font-size-xl);
    line-height: 1;
}

.session-expired-options .options-text {
    flex: 1;
}

.session-expired-options .options-text strong {
    display: block;
    color: var(--expresso-text-primary);
    font-weight: var(--expresso-font-weight-semibold);
    font-size: var(--expresso-font-size-lg);
    margin-bottom: var(--expresso-spacing-xs);
}

.session-expired-options .options-text p {
    margin: 0 0 var(--expresso-spacing-xs) 0;
    color: var(--expresso-text-secondary);
    font-size: var(--expresso-font-size-sm);
    line-height: var(--expresso-line-height);
}

.session-expired-options .options-actions {
    display: flex;
    gap: var(--expresso-spacing-md);
    justify-content: flex-end;
}

.session-expired-options .btn-secondary {
    background: var(--expresso-background-color);
    color: var(--expresso-text-secondary);
    border: 1px solid var(--expresso-border-color);
}

.session-expired-options .btn-secondary:hover {
    background: var(--expresso-background-secondary);
    color: var(--expresso-text-primary);
}

.session-expired-options .btn-primary {
    background: var(--expresso-warning-color);
    color: white;
    border: 1px solid var(--expresso-warning-color);
}

.session-expired-options .btn-primary:hover {
    background: #d97706;
    border-color: #d97706;
}

/* === RESPONSIVE === */
@media (max-width: 480px) {
    :root {
        --expresso-modal-width: 100%;
        --expresso-spacing-lg: 12px;
        --expresso-spacing-xl: 16px;
        --expresso-spacing-2xl: 20px;
        --expresso-font-size: 14px;
        --expresso-font-size-lg: 16px;
        --expresso-font-size-xl: 18px;
    }
    
    .session-expired-options .options-actions {
        flex-direction: column;
        gap: var(--expresso-spacing-sm);
    }
    
    .session-expired-options .btn-secondary,
    .session-expired-options .btn-primary {
        width: 100%;
        text-align: center;
    }
}