/* css/variables.css — tokens del sistema. Reglas de uso en DESIGN_BIBLE.md */

:root {
    /* Superficies y texto (modo claro: sala iluminada) */
    --bg-main: #fafafa;
    --bg-card: rgba(255, 255, 255, 0.85);
    --border-glass: rgba(0, 0, 0, 0.08);
    --text-primary: #1c1d1f;
    --text-secondary: #444444;

    /* Tinta: marcas estructurales (subrayado de nav, filete de títulos, CTA primario) */
    --accent: #1c1d1f;
    --accent-hover: #0a0a0a;

    /* Bronce: un solo acento de autor, en dos funciones.
       --accent-warm  decorativo (líneas, puntos, bordes, foco). No usar para texto chico.
       --accent-ink   bronce para texto; cumple AA (5.8:1 sobre --bg-main). */
    --accent-warm: #a67c52;
    --accent-ink: #7f5b38;
    --accent-glow: rgba(166, 124, 82, 0.08);
    /* Bronce claro para texto sobre imagen con velo oscuro (tarjetas de serie, visor) */
    --accent-on-image: #e3c9a4;

    /* Spacing scale tokens */
    --space-2xs: 0.25rem; /* 4px */
    --space-xs:  0.5rem;  /* 8px */
    --space-sm:  0.75rem; /* 12px */
    --space-md:  1rem;    /* 16px */
    --space-lg:  1.5rem;  /* 24px */
    --space-xl:  2rem;    /* 32px */
    --space-2xl: 3rem;    /* 48px */

    /* Tipografía */
    --font-display: "Bebas Neue", sans-serif;
    --font-serif: "EB Garamond", Georgia, serif;
    --font-sans: "Poppins", system-ui, -apple-system, sans-serif;

    /* Motion */
    --ease-out-editorial: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out-editorial: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-spring-subtle: cubic-bezier(0.32, 0.72, 0, 1);

    --duration-fast: 140ms;
    --duration-ui: 240ms;
    --duration-view: 380ms;

    /* Transition defaults (explicit GPU properties, avoiding unbounded 'all') */
    --transition-smooth: opacity var(--duration-view) var(--ease-out-editorial), transform var(--duration-view) var(--ease-out-editorial);
    --transition-fast: transform var(--duration-fast) var(--ease-out-editorial), opacity var(--duration-fast) var(--ease-out-editorial), border-color var(--duration-fast) ease, background-color var(--duration-fast) ease, color var(--duration-fast) ease;

    /* Shadow tokens */
    --shadow-premium: 0 15px 35px rgba(0, 0, 0, 0.05);
    --shadow-inset: inset 0 1px 1px rgba(255, 255, 255, 0.8);
    --blur-glass: 12px;

    /* Dynamic overlay gradients (kept for general uses) */
    --card-gradient: linear-gradient(to right, #fafafa 0%, rgba(250, 250, 250, 0.7) 55%, rgba(250, 250, 250, 0) 100%);
    --card-gradient-hover: linear-gradient(to right, #fafafa 0%, rgba(250, 250, 250, 0.6) 55%, rgba(250, 250, 250, 0) 100%);
    /* Scrollbar variables for standard/custom scrollbars */
    --scrollbar-thumb: var(--border-glass);
    --scrollbar-thumb-hover: var(--text-secondary);
}

/* Modo oscuro: sala de noche. Mismo bronce, solo más luminoso; la tinta pasa a blanco. */
html.dark-theme, body.dark-theme {
    --bg-main: #0e0e10;
    --bg-card: rgba(22, 22, 26, 0.92);
    --border-glass: rgba(255, 255, 255, 0.14);
    --text-primary: #f4f5f8;
    --text-secondary: #b8bac6;

    --accent: #f4f5f8;
    --accent-hover: #ffffff;
    --accent-warm: #b88d62;
    --accent-ink: #d2a97f;
    --accent-glow: rgba(184, 141, 98, 0.12);

    --shadow-premium: 0 20px 45px rgba(0, 0, 0, 0.65);
    --shadow-inset: inset 0 1px 1px rgba(255, 255, 255, 0.05);
    --blur-glass: 16px;

    --card-gradient: linear-gradient(to right, #0e0e10 0%, rgba(14, 14, 16, 0.75) 55%, rgba(14, 14, 16, 0) 100%);
    --card-gradient-hover: linear-gradient(to right, #0e0e10 0%, rgba(14, 14, 16, 0.65) 55%, rgba(14, 14, 16, 0) 100%);

    --scrollbar-thumb: rgba(184, 141, 98, 0.25);
    --scrollbar-thumb-hover: rgba(184, 141, 98, 0.5);
}