/* --- DESIGN SYSTEM DE ALTA FANTASIA - MUNDO ARCANO ---
   Versão: 1.0.0
   Compatibilidade: .NET 10 & Blazor WASM
   Autor: Wesley (Senior Product Designer)
   Descrição: CSS Vanilla puro mapeando tokens semânticos e canais HSL para manipulação dinâmica de opacidade no runtime do Blazor.
*/

/* Tema Místico (Predefinição) - Tons de roxo cósmico, magenta do caos e ouro místico */
:root, .theme-mistico {
    /* Canais HSL Fundamentais (para manipulações dinâmicas de hsla(...) no Blazor) */
    --bg-base-h: 240;
    --bg-base-s: 30%;
    --bg-base-l: 3%;
    
    --bg-surface-h: 240;
    --bg-surface-s: 27%;
    --bg-surface-l: 7%;
    
    --primary-h: 270;
    --primary-s: 77%;
    --primary-l: 56%; /* #9333ea */
    
    --secondary-h: 292;
    --secondary-s: 84%;
    --secondary-l: 61%; /* #d946ef */
    
    --accent-h: 45;
    --accent-s: 93%;
    --accent-l: 47%; /* #eab308 */
    
    --text-title-h: 240;
    --text-title-s: 8%;
    --text-title-l: 96%; /* #f5f5f7 */
    
    --text-body-h: 240;
    --text-body-s: 9%;
    --text-body-l: 78%; /* #c1c1cb */
    
    --text-muted-h: 240;
    --text-muted-s: 5%;
    --text-muted-l: 46%; /* #71717a */

    /* Variáveis Compostas Semânticas */
    --bg-base: hsl(var(--bg-base-h), var(--bg-base-s), var(--bg-base-l));
    --bg-surface: hsl(var(--bg-surface-h), var(--bg-surface-s), var(--bg-surface-l));
    --bg-glass: hsla(var(--bg-surface-h), var(--bg-surface-s), var(--bg-surface-l), 0.7);
    
    --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --primary-glow: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.6);
    --secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
    --accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    --accent-glow: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.5);
    
    --border-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2);
    --border-color-glow: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.4);
    
    --text-title: hsl(var(--text-title-h), var(--text-title-s), var(--text-title-l));
    --text-body: hsl(var(--text-body-h), var(--text-body-s), var(--text-body-l));
    --text-muted: hsl(var(--text-muted-h), var(--text-muted-s), var(--text-muted-l));
    
    --gradient-primary: linear-gradient(135deg, hsl(258, 80%, 60%), hsl(330, 81%, 50%)); /* Roxo profundo ao Magenta */
    --gradient-border: linear-gradient(135deg, hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5), hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.3));
    --shadow-glow: 0 0 15px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.35);
}

/* Tema Terror (Alternativo) - Tons de sangue coalhado, cinza de cinzas e verde tóxico */
.theme-terror {
    /* Canais HSL Fundamentais */
    --bg-base-h: 0;
    --bg-base-s: 43%;
    --bg-base-l: 3%;
    
    --bg-surface-h: 0;
    --bg-surface-s: 38%;
    --bg-surface-l: 6%;
    
    --primary-h: 0;
    --primary-s: 72%;
    --primary-l: 51%; /* #dc2626 */
    
    --secondary-h: 0;
    --secondary-s: 63%;
    --secondary-l: 31%; /* #7f1d1d */
    
    --accent-h: 142;
    --accent-s: 76%;
    --accent-l: 36%; /* #16a34a */
    
    --text-title-h: 0;
    --text-title-s: 0%;
    --text-title-l: 95%; /* #f3f3f3 */
    
    --text-body-h: 0;
    --text-body-s: 22%;
    --text-body-l: 73%; /* #cca7a7 */
    
    --text-muted-h: 0;
    --text-muted-s: 14%;
    --text-muted-l: 43%; /* #7c5c5c */

    /* Variáveis Compostas Semânticas (Sobrescrevendo para Tema de Terror) */
    --bg-base: hsl(var(--bg-base-h), var(--bg-base-s), var(--bg-base-l));
    --bg-surface: hsl(var(--bg-surface-h), var(--bg-surface-s), var(--bg-surface-l));
    --bg-glass: hsla(var(--bg-surface-h), var(--bg-surface-s), var(--bg-surface-l), 0.75);
    
    --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --primary-glow: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.6);
    --secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
    --accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    --accent-glow: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.5);
    
    --border-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.25);
    --border-color-glow: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
    
    --text-title: hsl(var(--text-title-h), var(--text-title-s), var(--text-title-l));
    --text-body: hsl(var(--text-body-h), var(--text-body-s), var(--text-body-l));
    --text-muted: hsl(var(--text-muted-h), var(--text-muted-s), var(--text-muted-l));
    
    --gradient-primary: linear-gradient(135deg, hsl(0, 73%, 35%), hsl(0, 74%, 15%)); /* Sangue Antigo ao Abissal */
    --gradient-border: linear-gradient(135deg, hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5), rgba(0, 0, 0, 0.8));
    --shadow-glow: 0 0 15px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.4);
}

/* ==========================================================================
   2. CONFIGURAÇÕES TIPO-ESTRUTURAIS & ACESSIBILIDADE
   ========================================================================== */

/* Classes Utilitárias de Tipografia */
.font-serif-arcane, .font-fantasy {
    font-family: 'Cinzel', serif;
    font-weight: 700;
}

.font-sans-arcane {
    font-family: 'Inter', sans-serif;
}

/* Títulos Rúnicos */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-title);
    font-family: 'Cinzel', serif;
    letter-spacing: 0.5px;
}

/* Scrollbar Customizada Coerente com a Marca */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* ==========================================================================
   3. COMPONENTES DO DESIGN SYSTEM (RPG & INTERFACES COMPLEXAS)
   ========================================================================== */

/* Efeito Glassmorphism Calibrado (Evita quebras de acessibilidade WCAG) */
.panel-glass, .card-rpg-preview {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), var(--shadow-glow);
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Botão Base do Grimório */
.btn-arcano {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    outline: none;
    text-transform: uppercase;
}

.btn-arcano:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-arcano:active {
    transform: translateY(1px);
}

/* Botão Primário (Explosão Arcana / Roxo) */
.btn-arcano-primary {
    background: var(--gradient-primary);
    color: #ffffff;
    box-shadow: var(--shadow-glow);
}

.btn-arcano-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px var(--primary-glow);
}

/* Botão Secundário (Peneiramento / Contorno Roxo) */
.btn-arcano-secondary {
    background: transparent;
    border-color: var(--primary);
    color: var(--text-title);
}

.btn-arcano-secondary:hover {
    background: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.15);
    box-shadow: 0 0 15px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.25);
    transform: translateY(-2px);
}

/* Botão Ouro (Transmissão de Tela / Projeção) */
.btn-arcano-gold {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 8px hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.15);
}

.btn-arcano-gold:hover {
    background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.1);
    box-shadow: 0 0 20px var(--accent-glow);
    transform: translateY(-2px);
}

/* Painel de Borda Energizada (Borda com Gradiente Rotativo em Vanilla CSS) */
.glowing-border {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
    background: var(--bg-surface);
    position: relative;
    z-index: 1;
}

.glowing-border::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 11px;
    padding: 1px;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
    background-size: 200% auto;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
    animation: moveGradient 4s linear infinite;
}

@keyframes moveGradient {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
}

/* ==========================================================================
   4. TRANSIÇÃO DE PERFORMANCE (SPLASH & SKELETON LOADERS SHIMMER)
   ========================================================================== */

/* Shimmer de Carregamento Esqueleto */
.skeleton-shimmer {
    background: linear-gradient(
        90deg, 
        var(--bg-surface) 25%, 
        hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.08) 50%, 
        var(--bg-surface) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}