/* ============================================
   BASE.CSS - VARIABLES COMPARTIDAS (TEMA OSCURO)
   Academia Online - Paleta corporativa morada
   Mismas variables que base_light.css (solo cambian valores)
   ============================================ */

:root {
    /* ============================================
       PALETA CORPORATIVA
       ============================================ */
    --accent-primary: #AF87BC;
    --accent-primary-dark: #9B6EAB;
    --accent-primary-light: #BF98C6;
    --accent-secondary: #815491;
    --accent-tertiary: #4A3B4F;

    /* Fondos */
    --bg-dark: #0a0c10;
    --bg-card: #111318;
    --bg-elevated: #1a1d24;
    --bg-hero-dark: #1a1d24;

    /* Textos */
    --text-light: #f1f5f9;
    --text-muted: #94a3b8;

    /* ============================================
       CANALES RGB
       ============================================ */
    --accent-primary-rgb: 175, 135, 188;
    --accent-secondary-rgb: 129, 84, 145;
    --accent-tertiary-rgb: 74, 59, 79;
    --black-rgb: 0, 0, 0;
    --white-rgb: 255, 255, 255;
    --bg-dark-rgb: 10, 12, 16;
    --bg-card-rgb: 17, 19, 24;
    --bg-elevated-rgb: 26, 29, 36;
    --shadow-gray-rgb: 169, 184, 200;

    /* ============================================
       OPACIDADES DEL COLOR PRINCIPAL
       ============================================ */
    --accent-primary-a05: rgba(var(--accent-primary-rgb), 0.05);
    --accent-primary-a08: rgba(var(--accent-primary-rgb), 0.08);
    --accent-primary-a10: rgba(var(--accent-primary-rgb), 0.10);
    --accent-primary-a15: rgba(var(--accent-primary-rgb), 0.15);
    --accent-primary-a20: rgba(var(--accent-primary-rgb), 0.20);
    --accent-primary-a25: rgba(var(--accent-primary-rgb), 0.25);
    --accent-primary-a30: rgba(var(--accent-primary-rgb), 0.30);
    --accent-primary-a40: rgba(var(--accent-primary-rgb), 0.40);
    --accent-primary-a50: rgba(var(--accent-primary-rgb), 0.50);

    /* ============================================
       OPACIDADES DEL COLOR SECUNDARIO
       ============================================ */
    --accent-secondary-a10: rgba(var(--accent-secondary-rgb), 0.10);
    --accent-secondary-a15: rgba(var(--accent-secondary-rgb), 0.15);
    --accent-secondary-a20: rgba(var(--accent-secondary-rgb), 0.20);
    --accent-secondary-a30: rgba(var(--accent-secondary-rgb), 0.30);
    --accent-secondary-a40: rgba(var(--accent-secondary-rgb), 0.40);

    /* ============================================
       OPACIDADES DEL COLOR TERCIARIO
       ============================================ */
    --accent-tertiary-a05: rgba(var(--accent-tertiary-rgb), 0.05);
    --accent-tertiary-a20: rgba(var(--accent-tertiary-rgb), 0.20);
    --accent-tertiary-a30: rgba(var(--accent-tertiary-rgb), 0.30);
    --accent-tertiary-a40: rgba(var(--accent-tertiary-rgb), 0.40);

    /* ============================================
       OPACIDADES BLANCO / NEGRO
       ============================================ */
    --white-a02: rgba(var(--white-rgb), 0.02);
    --white-a05: rgba(var(--white-rgb), 0.05);
    --white-a08: rgba(var(--white-rgb), 0.08);
    --white-a10: rgba(var(--white-rgb), 0.10);
    --white-a20: rgba(var(--white-rgb), 0.20);
    --white-a30: rgba(var(--white-rgb), 0.30);
    --white-a40: rgba(var(--white-rgb), 0.40);
    --white-a50: rgba(var(--white-rgb), 0.50);
    --white-a75: rgba(var(--white-rgb), 0.75);
    --white-a85: rgba(var(--white-rgb), 0.85);

    --black-a02: rgba(var(--black-rgb), 0.02);
    --black-a05: rgba(var(--black-rgb), 0.05);
    --black-a10: rgba(var(--black-rgb), 0.10);
    --black-a15: rgba(var(--black-rgb), 0.15);
    --black-a20: rgba(var(--black-rgb), 0.20);
    --black-a30: rgba(var(--black-rgb), 0.30);
    --black-a40: rgba(var(--black-rgb), 0.40);
    --black-a50: rgba(var(--black-rgb), 0.50);
    --black-a60: rgba(var(--black-rgb), 0.60);
    --black-a80: rgba(var(--black-rgb), 0.80);

    /* ============================================
       SOMBRAS REUTILIZABLES
       ============================================ */
    --shadow-accent-sm: 0 0 20px rgba(var(--accent-primary-rgb), 0.20);
    --shadow-accent-md: 0 10px 25px rgba(var(--accent-primary-rgb), 0.30);
    --shadow-accent-lg: 0 8px 20px rgba(var(--accent-primary-rgb), 0.30);
    --shadow-accent-xl: 0 0 0 0.2rem rgba(var(--accent-primary-rgb), 0.25);
    --shadow-accent-focus: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.15);
    --shadow-accent-ring: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.30);

    --shadow-primary: var(--shadow-accent-lg);
    --shadow-primary-hover: var(--shadow-accent-md);

    /* Ambos juegos de sombras de tarjeta (dark + light) */
    --shadow-card-dark: 0 20px 35px -12px rgba(var(--black-rgb), 0.50);
    --shadow-card-dark-lg: 0 25px 50px -12px rgba(var(--black-rgb), 0.50);
    --shadow-card-dark-sm: 0 20px 40px rgba(var(--black-rgb), 0.30);
    --shadow-card-light: 0 20px 35px -12px rgba(var(--black-rgb), 0.10);
    --shadow-card-light-lg: 0 25px 50px -12px rgba(var(--black-rgb), 0.15);
    --shadow-card-light-sm: 0 3px 9px 0 rgba(var(--shadow-gray-rgb), 0.15);

    /* ============================================
       COLORES SEMÁNTICOS
       ============================================ */
    --color-star: #fbbf24;
    --color-whatsapp: #25D366;
    --color-whatsapp-hover: #128C7E;
    --color-whatsapp-rgb: 37, 211, 102;
    --color-placeholder: #9CA3AF;
    --color-placeholder-muted: #6c757d;

    --color-danger: #dc3545;
    --color-danger-rgb: 220, 53, 69;
    --color-success: #28a745;
    --color-success-rgb: 40, 167, 69;
    --color-info: #17a2b8;
    --color-info-rgb: 23, 162, 184;
    --color-warning: #ffc107;
    --color-warning-rgb: 255, 193, 7;
    --color-warning-soft: #f59f00;

    /* Opacidades semánticas */
    --color-danger-a05: rgba(var(--color-danger-rgb), 0.05);
    --color-danger-a10: rgba(var(--color-danger-rgb), 0.10);
    --color-danger-a20: rgba(var(--color-danger-rgb), 0.20);
    --color-danger-a25: rgba(var(--color-danger-rgb), 0.25);
    --color-danger-a30: rgba(var(--color-danger-rgb), 0.30);

    --color-success-a10: rgba(var(--color-success-rgb), 0.10);
    --color-success-a30: rgba(var(--color-success-rgb), 0.30);

    --color-info-a10: rgba(var(--color-info-rgb), 0.10);
    --color-info-a30: rgba(var(--color-info-rgb), 0.30);

    --color-warning-a10: rgba(var(--color-warning-rgb), 0.10);
    --color-warning-a30: rgba(var(--color-warning-rgb), 0.30);

    /* ============================================
       GRADIENTES REUTILIZABLES
       (ambos juegos definidos; los alias neutros al final
       deciden cuál se usa según el tema)
       ============================================ */
    --gradient-hero: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-hero-dark) 100%);
    --gradient-primary: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    --gradient-primary-rev: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
    --gradient-light: linear-gradient(135deg, var(--accent-primary-light) 0%, var(--accent-primary) 100%);
    --gradient-dark: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-tertiary) 100%);

    /* Marca */
    --gradient-brand-dark: linear-gradient(135deg, #fff 0%, var(--accent-primary) 100%);
    --gradient-brand-light: linear-gradient(135deg, var(--text-light) 0%, var(--accent-primary) 100%);

    /* Modal */
    --gradient-modal-dark: linear-gradient(135deg, var(--bg-card) 0%, #0f1117 100%);
    --gradient-modal-light: linear-gradient(135deg, var(--bg-card) 0%, #f2f4f5 100%);

    /* Footer */
    --gradient-footer-dark: #05070c;
    --gradient-footer-light: var(--bg-hero-dark);

    /* Header modal */
    --gradient-header-dark: rgba(var(--black-rgb), 0.20);
    --gradient-header-light: rgba(var(--white-rgb), 0.50);

    /* Acordeón (modal curso) */
    --gradient-accordion-item-dark: rgba(var(--bg-elevated-rgb), 0.60);
    --gradient-accordion-btn-dark: rgba(var(--bg-elevated-rgb), 0.90);
    --gradient-accordion-active-dark: rgba(var(--accent-primary-rgb), 0.10);

    /* Acordeón/otros (light) */
    --gradient-section-light: linear-gradient(120deg, var(--text-light), var(--accent-primary-light));
    --gradient-accent-active-light: rgba(var(--accent-primary-rgb), 0.08);

    /* Steps y auth */
    --gradient-success-step: linear-gradient(135deg, #03835d 0%, #20c997 100%);
    --gradient-auth-btn: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);

    /* ============================================
       EXTRAS DE UI
       ============================================ */
    --border-glow: var(--accent-primary-a30);
    --glass-bg: rgba(var(--bg-card-rgb), 0.75);
    --shadow-whatsapp: 0 10px 25px rgba(var(--color-whatsapp-rgb), 0.30);

    /* ============================================
       ALIAS NEUTROS (los usan los componentes)
       Tema oscuro → resuelven a variantes *-dark / *-light
       ============================================ */
    --gradient-brand: var(--gradient-brand-dark);
    --gradient-modal: var(--gradient-modal-dark);
    --gradient-footer: var(--gradient-footer-dark);
    --gradient-header: var(--gradient-header-dark);
    --shadow-card: var(--shadow-card-dark);
    --shadow-card-lg: var(--shadow-card-dark-lg);
    --shadow-card-sm: var(--shadow-card-dark-sm);

    --gradient-loader: linear-gradient(135deg, #0a0c10 0%, #0f172a 100%);
}