/* =========================================================
   EL ARCHIVO DE LAS HISTORIAS INFINITAS
   Archivo: css/variables.css
   Función: variables globales del sistema visual
   ========================================================= */


/* =========================
   FUENTES
   ========================= */

    @font-face {
        font-family: "Trajan Pro";
        src: url("../assets/fuentes/Trajan Pro/trajanpro_bold.otf") format("opentype");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Cinzel";
        src: url("../assets/fuentes/Cinzel/static/Cinzel-Regular.ttf") format("truetype");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Cinzel";
        src: url("../assets/fuentes/Cinzel/static/Cinzel-SemiBold.ttf") format("truetype");
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Cinzel";
        src: url("../assets/fuentes/Cinzel/static/Cinzel-Bold.ttf") format("truetype");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Cinzel Decorative";
        src: url("../assets/fuentes/Cinzel_Decorative/CinzelDecorative-Regular.ttf") format("truetype");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Cinzel Decorative";
        src: url("../assets/fuentes/Cinzel_Decorative/CinzelDecorative-Bold.ttf") format("truetype");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Lato";
        src: url("../assets/fuentes/Lato/Lato-Light.ttf") format("truetype");
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Lato";
        src: url("../assets/fuentes/Lato/Lato-Regular.ttf") format("truetype");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Lato";
        src: url("../assets/fuentes/Lato/Lato-Bold.ttf") format("truetype");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }


/* =========================
   VARIABLES GLOBALES
   ========================= */

    :root {

        /* Tipografías */
        --font-logo: "Trajan Pro", "Cinzel", serif;
        --font-title: "Cinzel", serif;
        --font-decorative: "Cinzel Decorative", "Cinzel", serif;
        --font-body: "Lato", system-ui, sans-serif;

        /* Colores base inspirados en el kit de marca */
        --color-black: #0f1116;
        --color-obsidian: #171a20;
        --color-charcoal: #23262e;
        --color-slate: #323642;

        --color-fog: #b1b3ba;
        --color-mist: #e6e6e6;

        --color-gold: #b89b5e;
        --color-gold-soft: #d6c08a;
        --color-violet: #6b5d8e;

        /* Uso funcional */
        --bg-main: var(--color-black);
        --bg-panel: rgba(23, 26, 32, 0.86);
        --bg-panel-soft: rgba(35, 38, 46, 0.78);
        --bg-panel-hover: rgba(50, 54, 66, 0.9);

        --text-main: var(--color-mist);
        --text-secondary: var(--color-fog);
        --text-muted: #8f929c;

        --accent-main: var(--color-gold);
        --accent-soft: var(--color-gold-soft);
        --accent-mystic: var(--color-violet);

        --border-soft: rgba(255, 255, 255, 0.08);
        --border-gold: rgba(184, 155, 94, 0.42);

        /* Sombras */
        --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.35);
        --shadow-panel: 0 16px 40px rgba(0, 0, 0, 0.5);
        --shadow-gold: 0 0 18px rgba(184, 155, 94, 0.22);

        /* Bordes */
        --radius-xs: 4px;
        --radius-sm: 8px;
        --radius-md: 14px;
        --radius-lg: 22px;
        --radius-full: 999px;

        /* Espaciados */
        --space-xs: 0.35rem;
        --space-sm: 0.65rem;
        --space-md: 1rem;
        --space-lg: 1.5rem;
        --space-xl: 2rem;
        --space-xxl: 3rem;

        /* Tamaños */
        --max-width: 1280px;
        --header-height: 72px;

        /* Transiciones */
        --transition-fast: 0.18s ease;
        --transition-base: 0.3s ease;
        --transition-slow: 0.5s ease;

        /* Capas */
        --z-background: -1;
        --z-base: 1;
        --z-header: 10;
        --z-modal: 100;
    }