/* =========================================================
   Sistema de diseño FinanzApp — tokens compartidos
   Aprobado el 2026-09-23. Referencia visual: artifact "Sistema de diseño FinanzApp".
   Prefijo --fz- para convivir con las variables viejas (global.css, presupuesto/variables.css)
   hasta que cada módulo migre; las viejas se eliminan al final del roadmap.
   ========================================================= */
:root {
    /* FinanzApp es solo clara: "only" impide que el navegador (p. ej. Samsung Internet con el teléfono en modo
       oscuro, que es el que usa la app) oscurezca las páginas a la fuerza. */
    color-scheme: only light;

    /* Marca: el violeta es SOLO la marca (acción principal, activo, enlaces, progreso general) */
    --fz-violeta: #7F3DED;
    --fz-violeta-700: #5B21B6;
    --fz-violeta-100: #EDE4FD;
    --fz-violeta-50: #F6F1FE;

    /* Neutros con leve tinte violeta */
    --fz-fondo: #F6F4FA;
    --fz-superficie: #FFFFFF;
    --fz-superficie-2: #FAF9FC;
    --fz-tinta: #1F1A2E;
    --fz-tinta-2: #4A4458;
    --fz-suave: #6B6478;
    --fz-linea: #E7E3EF;

    /* Estados: solo para decir cómo va algo. Ninguna categoría ni sección los usa. */
    --fz-positivo: #1E9E62;
    --fz-advertencia: #D98E1A;
    --fz-advertencia-texto: #A86A0C; /* ámbar con contraste suficiente para texto */
    --fz-alerta: #D64545;

    /* Flujos del presupuesto (secciones de Presupuesto y filas de Flujo de caja) */
    --fz-ingresos: #1E9E62;
    --fz-gastos: #4E4A63;
    --fz-deudas: #9A4A7C;
    --fz-ahorro: #1F7A8C;
    /* Los colores de CATEGORÍA no viven aquí: su fuente única es categorias_gastos.color */

    /* Tipografía: Fraunces solo en títulos de página y cifras protagonistas (nunca < 18px) */
    --fz-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --fz-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fz-texto-xs: 0.6875rem;   /* 11px — etiqueta superior (ceja), Manrope 800 mayúsculas */
    --fz-texto-sm: 0.8125rem;   /* 13px — ayuda y datos secundarios */
    --fz-texto-base: 0.9375rem; /* 15px — texto de interfaz */
    --fz-texto-lg: 1.0625rem;   /* 17px — título de tarjeta, Manrope 700 */
    --fz-cifra-md: 1.375rem;    /* 22px — cifra de tarjeta, Fraunces 600 */
    --fz-titulo: 2rem;          /* 32px — título de página, Fraunces 600 */
    --fz-cifra-xl: 2.5rem;      /* 40px — cifra protagonista, Fraunces 600 (una por tarjeta) */

    /* Radios */
    --fz-radio-sm: 0.6rem;
    --fz-radio-control: 0.85rem;
    --fz-radio-md: 1.1rem;
    --fz-radio-tarjeta: 1.5rem;
    --fz-radio-pildora: 999px;

    /* Sombras: suaves y direccionales, nunca una sombra plana genérica */
    --fz-sombra-sm: 0 1px 2px rgba(31, 23, 58, 0.05);
    --fz-sombra: 0 24px 48px -28px rgba(31, 23, 58, 0.22), 0 2px 8px -2px rgba(31, 23, 58, 0.08);
    --fz-sombra-primario: 0 14px 28px -14px rgba(127, 61, 237, 0.55);

    /* Espaciado */
    --fz-esp-1: 0.25rem;
    --fz-esp-2: 0.5rem;
    --fz-esp-3: 0.75rem;
    --fz-esp-4: 1rem;
    --fz-esp-5: 1.25rem;
    --fz-esp-6: 1.5rem;
    --fz-esp-8: 2rem;

    /* Movimiento: solo en lo que cambia */
    --fz-transicion: 0.2s ease;
}

/* Samsung Internet (el navegador de la app en los Galaxy) oscurece a la fuerza las páginas cuando el teléfono está
   en modo oscuro, y por defecto ignora color-scheme. Solo NO lo hace si la hoja de estilos tiene una regla para
   (prefers-color-scheme: dark): esta existe para eso y deja todo igual, en claro. No borrar. */
@media (prefers-color-scheme: dark) {
    :root { color-scheme: only light; }
}