/* Design Tokens - Julia Sardá Style */
:root {
    /* --- Palette: The Page --- */
    --color-paper-light: #F7F5E6;
    /* Creamy drawing paper */
    --color-paper-dim: #E8E4D0;
    /* Aged paper edges */
    --color-paper-dark: #D6D0B8;
    /* Shadow on paper */

    /* --- Palette: Ink --- */
    --color-ink-primary: #2A2328;
    /* Dark brownish charcoal */
    --color-ink-secondary: #4A4246;
    /* Softer detail lines */
    --color-ink-faded: #8A8286;
    /* Disabled states */

    /* --- Palette: Watercolor Accents --- */
    --color-accent-magic: #8E8DBE;
    /* Desaturated periwinkle */
    --color-accent-danger: #D97E7E;
    /* Faded dusty rose */
    --color-accent-success: #88B08B;
    /* Sage green */
    --color-accent-gold: #D4AF37;
    /* Dull metallic gold */

    /* --- Typography System (Game UI 2025) --- */
    /* 
     * REGLA DE ORO: Máximo 2 familias por pantalla
     * 
     * Gameplay/HUD: --font-primary-ui + --font-numeric
     * Overlays narrativos: --font-primary-ui + --font-magical
     */
    
    /* PRIMARY UI VOICE: Nombres + Botones + Labels */
    /* Alegreya: serif robusta, clara en móvil, muy "game UI" */
    --font-primary-ui: 'Alegreya', 'Alegreya SC', 'Libre Baskerville', serif;
    
    /* MAGICAL / NARRATIVE TEXT: Descripciones, flavor, efectos mágicos */
    /* Cormorant Garamond: elegante, ritual, nunca para botones */
    --font-magical: 'Cormorant Garamond', 'Crimson Text', serif;
    
    /* NUMERIC / STATS: Números, scores, contadores, HUD */
    /* Rubik: sans limpia, legible y compacta, excelente para HUD */
    --font-numeric: 'Rubik', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* PERGAMINO / ANTIQUA: Textos tipo pergamino, títulos antiguos pero legibles */
    /* IM Fell English: estilo pergamino clásico, muy legible y elegante */
    --font-parchment: 'IM Fell English', 'Cinzel', serif;
    
    /* Legacy aliases (deprecated, usar nuevas variables arriba) */
    --font-display: var(--font-primary-ui);
    --font-body: var(--font-magical);
    --font-ui: var(--font-primary-ui);
    --font-name: var(--font-primary-ui);
    --font-ability: var(--font-primary-ui);

    /* --- Spacing & Layout --- */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;

    /* --- Touch Targets --- */
    --touch-target-min: 44px;

    /* --- Shadows & Borders --- */
    --border-ink: 2px solid var(--color-ink-primary);
    --border-ink-thin: 1px solid var(--color-ink-secondary);
    --shadow-paper: 3px 3px 0px var(--color-paper-dark);
    --shadow-deep: 0px 4px 12px rgba(42, 35, 40, 0.2);

    /* --- Motion --- */
    --duration-fast: 200ms;
    --duration-normal: 400ms;
    --duration-slow: 800ms;

    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-paper: cubic-bezier(0.45, 0, 0.55, 1);

    /* --- Layers (Z-Index) --- */
    --z-bg: 0;
    --z-game: 10;
    --z-hud: 20;
    --z-overlay: 30;
    --z-modal: 40;
    --z-debug: 50;

    /* --- Overlay Game-First System --- */
    --overlay-header-height: clamp(60px, 8vh, 80px);
    --overlay-actions-height: clamp(80px, 10vh, 100px);
    --overlay-core-max-height: calc(100vh - var(--overlay-header-height) - var(--overlay-actions-height) - 40px);
    --overlay-padding: clamp(16px, 3vw, 24px);
    --overlay-border-radius: 16px;
    --overlay-backdrop: rgba(20, 15, 20, 0.85);
    --overlay-bg: rgba(244, 241, 234, 0.98);

    /* --- Wizard Battles UI Tokens (Tailwind/DaisyUI aligned) --- */
    --wb-bg: var(--color-paper-light);
    --wb-surface: var(--color-paper-dim);
    --wb-surface-2: var(--color-paper-dark);
    --wb-surface-3: #c9c1a6;

    --wb-text: var(--color-ink-primary);
    --wb-text-muted: var(--color-ink-secondary);
    --wb-text-disabled: var(--color-ink-faded);

    --wb-accent: var(--color-accent-gold);
    --wb-success: var(--color-accent-success);
    --wb-danger: var(--color-accent-danger);
    --wb-warning: var(--color-accent-gold);
    --wb-info: var(--color-accent-magic);

    /* Spacing scale (4px base) */
    --wb-space-1: 4px;
    --wb-space-2: 8px;
    --wb-space-3: 12px;
    --wb-space-4: 16px;
    --wb-space-5: 20px;
    --wb-space-6: 24px;
    --wb-space-7: 28px;
    --wb-space-8: 32px;
    --wb-space-9: 36px;
    --wb-space-10: 40px;
    --wb-space-11: 44px;
    --wb-space-12: 48px;
    --wb-space-13: 52px;
    --wb-space-14: 56px;
    --wb-space-15: 60px;
    --wb-space-16: 64px;
    --wb-space-17: 68px;
    --wb-space-18: 72px;
    --wb-space-19: 76px;
    --wb-space-20: 80px;

    /* Radius */
    --wb-radius-sm: var(--border-radius-sm);
    --wb-radius-md: var(--border-radius-md);
    --wb-radius-lg: var(--border-radius-lg);
    --wb-radius-xl: 20px;
    --wb-radius-full: 999px;

    /* Shadows */
    --wb-shadow-sm: 0 2px 6px rgba(42, 35, 40, 0.12);
    --wb-shadow-md: 0 6px 14px rgba(42, 35, 40, 0.16);
    --wb-shadow-lg: 0 12px 26px rgba(42, 35, 40, 0.22);
    --wb-shadow-xl: 0 20px 48px rgba(42, 35, 40, 0.28);
    --wb-glow-success: 0 0 16px rgba(136, 176, 139, 0.45);
    --wb-glow-danger: 0 0 16px rgba(217, 126, 126, 0.45);

    /* Transitions */
    --wb-transition-fast: 150ms;
    --wb-transition-base: 220ms;
    --wb-transition-slow: 360ms;

    /* Z-index */
    --wb-z-base: 1;
    --wb-z-dropdown: 20;
    --wb-z-sticky: 30;
    --wb-z-modal: 40;
    --wb-z-tooltip: 50;

    /* Typography scale */
    --wb-text-xs: 0.75rem;
    --wb-text-sm: 0.875rem;
    --wb-text-md: 1rem;
    --wb-text-lg: 1.125rem;
    --wb-text-xl: 1.25rem;
    --wb-text-2xl: 1.5rem;
    --wb-text-3xl: 1.875rem;
    --wb-text-4xl: 2.25rem;

    --wb-card-aspect: 2.5 / 3.5;

    /* --- Sprint 1: Visual Foundation (global, non-invasive) --- */
    --wb-ui-bg-0: #0b1324;
    --wb-ui-bg-1: #0f1b33;
    --wb-ui-surface-0: #17233e;
    --wb-ui-surface-1: #1f2f4f;
    --wb-ui-surface-2: #2a3d5f;
    --wb-ui-border-soft: rgba(176, 197, 228, 0.28);
    --wb-ui-border-strong: rgba(198, 216, 243, 0.44);
    --wb-ui-text: #e8effc;
    --wb-ui-text-muted: #b7c3db;
    --wb-ui-text-subtle: #9aa8c4;
    --wb-ui-shadow-sm: 0 4px 12px rgba(4, 8, 16, 0.26);
    --wb-ui-shadow-md: 0 12px 26px rgba(4, 8, 16, 0.32);
    --wb-ui-shadow-lg: 0 20px 44px rgba(4, 8, 16, 0.38);
    --wb-ui-focus-ring: 0 0 0 2px rgba(141, 164, 255, 0.42), 0 0 0 4px rgba(141, 164, 255, 0.2);

    --wb-ui-radius-sm: 10px;
    --wb-ui-radius-md: 14px;
    --wb-ui-radius-lg: 18px;
    --wb-ui-radius-xl: 24px;

    --wb-ui-space-1: 4px;
    --wb-ui-space-2: 8px;
    --wb-ui-space-3: 12px;
    --wb-ui-space-4: 16px;
    --wb-ui-space-5: 20px;
    --wb-ui-space-6: 24px;
    --wb-ui-space-7: 28px;

    --wb-ui-control-h: clamp(34px, 2.8vw, 42px);
    --wb-ui-control-h-sm: clamp(30px, 2.1vw, 36px);
    --wb-ui-control-pad-x: clamp(10px, 1.7vw, 14px);

    --wb-ui-accent: #7d8bff;
    --wb-ui-accent-soft: rgba(125, 139, 255, 0.24);
    --wb-ui-danger: #ef5b6f;
    --wb-ui-success: #42cc8c;
}

/* Set accents */
body[data-set="hp"],
html[data-set="hp"] {
    --wb-accent: #dc2626;
    --wb-ui-accent: #8f7dff;
    --wb-ui-accent-soft: rgba(143, 125, 255, 0.24);
}

body[data-set="hk"],
html[data-set="hk"] {
    --wb-accent: #0891b2;
    --wb-ui-accent: #3eaee6;
    --wb-ui-accent-soft: rgba(62, 174, 230, 0.24);
}

body[data-set="af"],
html[data-set="af"] {
    --wb-accent: #7c3aed;
    --wb-ui-accent: #58c592;
    --wb-ui-accent-soft: rgba(88, 197, 146, 0.24);
}