/**
 * VALIS CSS Variables v2.0
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * Sistema de diseño VALIS
 * Filosofía: Negro y blanco protagonistas, geometría pura, sin bordes redondeados
 * Dualidad Cielo (dorado) / Tierra (terracota) como acentos sutiles
 * 
 * @version 2.0.0
 */

:root {
    /* ═══ COLORES BASE ═══ */
    
    /* Fondos */
    --valis-bg-dark: #0a0a0a;
    --valis-bg-light: rgba(255, 255, 255, 0.98);
    --valis-bg-overlay: rgba(0, 0, 0, 0.4);
    --valis-bg-subtle: rgba(0, 0, 0, 0.02);
    --valis-bg-reading: rgba(255, 255, 255, 0.92);
    --valis-bg-reading-content: rgba(255, 255, 255, 0.96);
    
    /* Texto - protagonistas */
    /* WCAG AA: ratio mínimo 4.5:1 para texto normal, 3:1 para texto grande */
    --valis-text-primary: rgba(0, 0, 0, 0.88);     /* Ratio ~15:1 ✓ */
    --valis-text-secondary: rgba(0, 0, 0, 0.65);   /* Ratio ~8:1 ✓ */
    --valis-text-muted: rgba(0, 0, 0, 0.50);       /* Ratio ~5.7:1 ✓ (mejorado de 0.45) */
    --valis-text-subtle: rgba(0, 0, 0, 0.40);      /* Ratio ~4.5:1 ✓ (mejorado de 0.25) */
    --valis-text-disabled: rgba(0, 0, 0, 0.30);    /* Solo para elementos deshabilitados */
    --valis-text-light: rgba(255, 255, 255, 0.95); /* Mejorado para fondos oscuros */
    
    /* Bordes - sutiles */
    --valis-border-light: rgba(0, 0, 0, 0.06);
    --valis-border-medium: rgba(0, 0, 0, 0.12);
    --valis-border-dark: rgba(0, 0, 0, 0.20);
    
    /* ═══ DUALIDAD CIELO / TIERRA ═══ */
    
    /* Cielo (Yang) - Dorado antiguo */
    --valis-cielo: #9A7B3C;
    --valis-cielo-soft: rgba(154, 123, 60, 0.08);
    --valis-cielo-border: rgba(154, 123, 60, 0.20);
    --valis-cielo-text: #8A6B2C;
    
    /* Tierra (Yin) - Terracota */
    --valis-tierra: #A67B5B;
    --valis-tierra-soft: rgba(166, 123, 91, 0.08);
    --valis-tierra-border: rgba(166, 123, 91, 0.20);
    --valis-tierra-text: #8B6348;
    
    /* Acento primario (usa cielo por defecto) */
    --valis-accent: var(--valis-cielo);
    --valis-accent-hover: #7A5518;
    --valis-accent-soft: var(--valis-cielo-soft);
    --valis-accent-border: var(--valis-cielo-border);
    --valis-accent-text: var(--valis-cielo-text);
    
    /* Acciones - negro protagonista */
    --valis-action-primary: rgba(0, 0, 0, 0.90);
    --valis-action-primary-hover: #000000;
    --valis-action-secondary: rgba(0, 0, 0, 0.04);
    --valis-action-secondary-hover: rgba(0, 0, 0, 0.08);
    
    /* Estados */
    --valis-success: #4A7C4E;
    --valis-success-soft: rgba(74, 124, 78, 0.08);
    --valis-error: #9E4A4A;
    --valis-error-soft: rgba(158, 74, 74, 0.08);
    --valis-warning: #B8860B;
    
    /* ═══ TIPOGRAFÍA ═══ */
    
    --valis-font-serif: 'Cormorant Garamond', Georgia, serif;
    --valis-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --valis-font-mono: 'SF Mono', Monaco, Consolas, monospace;
    
    /* Escala tipográfica modular (ratio 1.25) */
    --valis-text-xs: 0.64rem;   /* 10px */
    --valis-text-sm: 0.8rem;    /* 13px */
    --valis-text-base: 1rem;    /* 16px */
    --valis-text-md: 1.125rem;  /* 18px */
    --valis-text-lg: 1.25rem;   /* 20px */
    --valis-text-xl: 1.5rem;    /* 24px */
    --valis-text-2xl: 2rem;     /* 32px */
    --valis-text-3xl: 2.5rem;   /* 40px */
    
    --valis-line-height-tight: 1.25;
    --valis-line-height-base: 1.5;
    --valis-line-height-relaxed: 1.75;
    
    /* Letter-spacing */
    --valis-tracking-tight: -0.02em;
    --valis-tracking-normal: 0;
    --valis-tracking-wide: 0.02em;
    --valis-tracking-wider: 0.05em;
    --valis-tracking-widest: 0.1em;
    
    /* ═══ ESPACIADO (múltiplos de 8px) ═══ */
    
    --valis-space-0: 0;
    --valis-space-1: 4px;    /* 0.5 unidad */
    --valis-space-2: 8px;    /* 1 unidad */
    --valis-space-3: 12px;   /* 1.5 unidades */
    --valis-space-4: 16px;   /* 2 unidades */
    --valis-space-5: 20px;   /* 2.5 unidades */
    --valis-space-6: 24px;   /* 3 unidades */
    --valis-space-8: 32px;   /* 4 unidades */
    --valis-space-10: 40px;  /* 5 unidades */
    --valis-space-12: 48px;  /* 6 unidades */
    --valis-space-16: 64px;  /* 8 unidades */
    --valis-space-20: 80px;  /* 10 unidades */
    --valis-space-24: 96px;  /* 12 unidades */
    
    /* ═══ BORDES - SIN REDONDEADOS ═══ */
    
    --valis-radius: 0;
    
    /* ═══ SOMBRAS - Sutiles ═══ */
    
    --valis-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --valis-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
    --valis-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
    --valis-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.12);
    
    /* ═══ TRANSICIONES ═══ */
    
    --valis-transition-fast: 0.15s ease;
    --valis-transition-base: 0.2s ease;
    --valis-transition-slow: 0.3s ease;
    
    /* ═══ Z-INDEX ═══ */
    
    --valis-z-base: 1;
    --valis-z-dropdown: 10;
    --valis-z-sticky: 20;
    --valis-z-fixed: 30;
    --valis-z-modal-backdrop: 40;
    --valis-z-modal: 50;
    --valis-z-popover: 60;
    --valis-z-tooltip: 70;
    --valis-z-toast: 80;
    --valis-z-overlay: 90;   /* onboarding, explainers, help */
    --valis-z-max: 100;      /* absolute top layer */
    
    /* ═══ READING TEXT (shared across Tier 1, 2, 3) ═══ */

    --valis-reading-max-width: 760px;
    --valis-reading-font-size: var(--valis-text-md);   /* 1.125rem */
    --valis-reading-line-height: 1.8;
    --valis-reading-paragraph-gap: 1.5em;
    --valis-reading-query-max-width: 660px;

    /* ═══ CONTENEDOR PRINCIPAL ═══ */

    --valis-container-width: min(92vw, 800px);
    --valis-container-padding: var(--valis-space-8);
    --valis-container-padding-mobile: var(--valis-space-4);
    
    /* ═══ HEADER ═══ */
    
    --valis-header-height: 64px;
    --valis-header-height-mobile: 56px;
    
    /* ═══ ANIMATION CONTROL ═══ */
    
    --animation-play-state: running;
    
    /* ═══ RESPONSIVE BREAKPOINTS ═══ */
    /* Nota: CSS no soporta variables en media queries,
       pero documentamos aquí para referencia */
    /* --valis-bp-mobile: 480px;  */
    /* --valis-bp-tablet: 768px;  */
    /* --valis-bp-desktop: 1024px; */
    /* --valis-bp-wide: 1280px;   */
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE VARIABLES
   Valores que cambian según breakpoint
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mobile: < 768px */
@media (max-width: 767px) {
    :root {
        --valis-container-padding: var(--valis-space-4);
        --valis-text-hero: 1.75rem;
        --valis-text-title: 1.25rem;
        --valis-header-height: 56px;
        --valis-bottombar-height: 72px;
    }
}

/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --valis-container-padding: var(--valis-space-6);
        --valis-text-hero: 2.25rem;
        --valis-text-title: 1.5rem;
        --valis-header-height: 60px;
        --valis-bottombar-height: 64px;
    }
}

/* Desktop: >= 1024px */
@media (min-width: 1024px) {
    :root {
        --valis-container-padding: var(--valis-space-8);
        --valis-text-hero: 2.5rem;
        --valis-text-title: 1.75rem;
        --valis-header-height: 64px;
        --valis-bottombar-height: 60px;
    }
}