/* ============================================================================
 * THEME (COLORES) — RÚPULO EDICIONES
 *
 * Objetivo:
 * - Que puedas manejar TODOS los colores desde UN solo archivo.
 * - Evitar inconsistencias (ej: HEX vs RGB desalineados).
 *
 * Cómo usar:
 * - Editá SOLO el bloque "EDITAR ACÁ".
 * - NO toques los valores *-rgb: se recalculan solos con `js/theme.js`.
 *
 * Propuesta definitiva (base):
 * - Fondo grafito neutro.
 * - Superficies oscuras limpias.
 * - Acento editorial moderno (color de marca).
 * - Encabezados de tabla (PIEZA/AÑO/AUTOR/DESCRIPCIÓN/...) en el mismo color de marca.
 * ============================================================================ */

:root {
    /* ========================================================================
     * EDITAR ACÁ (colores principales)
     * ======================================================================== */

    /* Acento principal (marca) */
    --color-marca: #c59100;

    /* Fondo y superficies */
    --color-fondo: #0b0c10;
    --color-superficie: #12131a;
    --color-superficie-2: #171826;
    --color-superficie-3: #1d1e2e;

    /* Textos */
    --color-texto: #f3f4f6;
    --color-texto-suave: #d1d5db;
    --color-texto-muy-suave: #9ca3af;
    --color-texto-secundario: var(--color-texto-suave);

    /* Texto sobre el color de marca (ej: botones con fondo marca) */
    --color-texto-sobre-marca: #0b0b0f;

    /* Botones especiales (auth) */
    --color-boton-google-fondo: #ffffff;
    --color-boton-google-texto: #121212;
    --color-boton-google-hover: #f1f1f1;
    --color-boton-secundario-fondo: #444444;
    --color-boton-secundario-texto: #ffffff;
    --color-boton-secundario-hover: #555555;

    /* ========================================================================
     * NO EDITAR (derivados y compatibilidad)
     * ======================================================================== */

    /*
     * IMPORTANTE (para que sea fácil):
     * - Si ves colores "fantasma" (rojizos/dorados) suele ser por un RGB desfasado.
     * - Acá NO editás números.
     * - Editás SOLO los *-rgb-source (son HEX y tienen el cuadradito de color).
     * - `js/theme.js` calcula los *-rgb reales automáticamente.
     */

    /* Fuente para RGB (por defecto, sigue a los colores base) */
    --color-marca-rgb-source: var(--color-marca);
    --color-fondo-rgb-source: var(--color-fondo);
    --color-encabezado-tabla-rgb-source: var(--color-encabezado-tabla);

    /* Valores RGB reales (NO editar) */
    --color-marca-rgb: 197, 145, 0;
    --color-fondo-rgb: 11, 12, 16;

    /* Tabla: color uniforme de labels (usa el mismo color de marca) */
    --color-encabezado-tabla: var(--color-marca);
    --color-encabezado-tabla-rgb: var(--color-marca-rgb);

    /* Enlaces */
    --color-enlace: var(--color-marca);
    --color-enlace-hover: #fecdd3;

    /* Estados */
    --color-exito: #34d399;
    --color-advertencia: #fbbf24;
    --color-error: #fb7185;
    --color-info: #60a5fa;

    /* Bordes */
    --color-borde-sutil: rgba(255, 255, 255, 0.04);
    --color-borde: rgba(246, 241, 241, 0.415);
    --color-borde-fuerte: rgba(255, 255, 255, 0.16);

    /* Auth */
    --color-input-fondo: var(--color-superficie-2);
}