/* ======================================================
   VARIABLES DE DISEÑO — GENKIA (rebranding · Fase B)
   ======================================================
   Fuente ÚNICA de color, espaciado y tipografía. No repetir
   hexadecimales sueltos en el resto de archivos.

   Identidad GenkIA (manual de Marketing / GenkIA_Brand_Kit):
     morado profundo  = texto / legibilidad / confianza
     morado Genk      = tecnología / marca
     FUCSIA           = acción, CTA, énfasis y selección  (NO fondo de todo)
     rosa / lavanda    = calidez y superficies suaves
     verde  = ingreso / positivo
     rojo-rosa = gasto (icono/indicador) / alerta / destructivo
     gris-lavanda = metadata / secundario

   Color FUNCIONAL (los nombres --color-* NO cambian respecto a la versión
   anterior: los componentes siguen igual; sólo cambian los valores):
     --color-primary  = fucsia interactivo (CTA/links/selección/foco)
     --color-income   = verde ingreso     --color-expense = rojo-rosa gasto
     --color-text     = morado profundo

   Accesibilidad: --color-primary es un fucsia un punto más oscuro que el
   swatch de marca (--genkia-fuchsia) para alcanzar contraste AA sobre blanco
   con texto normal (4.8:1). El swatch puro #EC4899 (--genkia-fuchsia) se
   reserva para rellenos grandes, gradientes, iconos y decoración. */

:root {
    /* --- Swatches de marca (referencia; usar los --color-* de abajo en UI) --- */
    --genkia-purple:        #581CCB;   /* Morado Genk — tecnología / marca */
    --genkia-purple-deep:   #1A0F2E;   /* Morado profundo — texto principal */
    --genkia-fuchsia:       #EC4899;   /* Fucsia Genk — swatch puro (rellenos/decoración) */
    --genkia-pink-soft:     #FFB3D6;   /* Rosa suave — cercanía / bienestar */
    --genkia-pink-bg:       #FFD6EA;   /* Fondos rosados suaves */
    --genkia-lavender:      #F8F6FF;   /* Lavanda — claridad / simplicidad */
    --genkia-accent:        #6C5CE7;   /* Acento / info */
    --genkia-white:         #FFFFFF;

    /* Gradientes de marca. DEFINIDOS pero SIN USAR todavía: reservados para
       superficies destacadas / momentos de marca en Fase C. */
    --genkia-gradient-brand: linear-gradient(135deg, #581CCB 0%, #EC4899 100%);
    --genkia-gradient-soft:  linear-gradient(135deg, #F8F6FF 0%, #FFD6EA 100%);

    /* --- Fucsia interactivo (identidad / acción) -------------------------- */
    --color-primary:        #D6266E;   /* CTA, links, selección, foco — AA 4.8:1 sobre blanco */
    --color-primary-strong: #B01E5C;   /* hover / active — 6.6:1 */
    --color-primary-light:  #F27AB6;   /* fucsia claro — rellenos de gráfico, detalles */
    --color-primary-soft:   #FBD9EA;   /* superficie rosa suave — chips, avatar, imark.accent */
    --color-primary-tint:   #FDF2F8;   /* acento casi imperceptible — hover de filas, balance-block */

    /* Texto --------------------------------------------- */
    --color-text:           #1A0F2E;   /* morado profundo */
    --color-muted:          #6B6478;   /* secundario — 5.6:1 sobre blanco */
    --color-faint:          #9990A6;   /* metadata terciaria / chevrons */

    /* Superficies (claras, lavanda) -------------------- */
    --color-background:     #F5F2FE;   /* fondo de la app */
    --color-frame:          #E9E3F7;   /* marco exterior en ≥480px (más oscuro que la app) */
    --color-surface:        #FFFFFF;   /* contenido principal */
    --color-surface-2:      #F6F3FF;   /* zonas / filas alternas / pista de controles */
    --color-border:         #E9E3F5;
    --color-border-strong:  #D8CEEC;

    /* Semántico financiero (discreto, distinguible por color + texto) ----- */
    --color-income:         #0F7D55;   /* verde sereno — AA 5.1:1 (el #178F6D del kit no llega a AA) */
    --color-income-soft:    #E3F4EC;
    --color-expense:        #C2374C;   /* rojo-rosa — icono/indicador de gasto (el importe va en --color-text) */
    --color-expense-soft:   #FBE9EC;

    --color-danger:         #C2374C;
    --color-danger-soft:    #FBE9EC;
    --color-success:        #0F7D55;
    --color-success-soft:   #E3F4EC;
    --color-warning:        #9A5B00;   /* preparado para estados de advertencia (aún sin uso) */
    --color-warning-soft:   #FBF0E1;

    /* Mensajes de chat — RESERVADOS (no hay chat en-app todavía; ver roadmap) */
    --color-msg-user:       #FDF2F8;   /* burbuja del usuario */
    --color-msg-genkia:     #F1ECFC;   /* burbuja de GenkIA */

    /* Tipografía --------------------------------------- */
    /* Poppins (self-host, ver css/fonts.css). Fallback: system + Arial. */
    --font-sans: "Poppins", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --text-xs:   0.8125rem;   /* 13px — metadata */
    --text-sm:   0.9375rem;   /* 15px */
    --text-base: 1rem;        /* 16px */
    --text-lg:   1.125rem;    /* 18px — subtítulos */
    --text-xl:   1.375rem;    /* 22px — título de pantalla */
    --text-2xl:  1.75rem;     /* 28px */
    --text-balance: clamp(2.1rem, 8.5vw, 2.6rem);

    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --tracking-tight: -0.02em;

    /* Espaciado --------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.75rem;
    --space-8: 2.5rem;

    /* Escala más redondeada, acorde al estilo de tarjetas del manual
       (panel 09). Ajuste moderado sobre los valores previos (8/12/16). */
    --radius-sm: 10px;
    --radius:    14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* Layout ----------------------------------------- */
    --app-max-width: 460px;
    --bottom-nav-height: 58px;
    --header-height: 46px;
    /* Espacio superior consistente en TODAS las pantallas. */
    --screen-top: var(--space-4);
    --content-bottom-gap: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--space-6));

    --transition: 140ms ease;
    --shadow-soft: 0 1px 2px rgba(26, 15, 46, 0.04), 0 4px 16px rgba(26, 15, 46, 0.05);
    /* Sombras del kit (aún sin uso; reservadas para superficies elevadas). */
    --shadow-card:     0 8px 24px rgba(26, 15, 46, 0.08);
    --shadow-elevated: 0 16px 40px rgba(26, 15, 46, 0.14);
}

@media (prefers-reduced-motion: reduce) {
    :root { --transition: 0ms; }
}

/* ======================================================
   TEMA OSCURO — PREPARADO, NO ACTIVO
   ======================================================
   La app NO tiene selector de tema todavía y ningún elemento recibe
   `data-theme`, así que este bloque no tiene efecto en runtime. Se deja
   listo (valores del GenkIA_Brand_Kit, adaptados a los nombres --color-*)
   para cuando se implemente la preferencia de apariencia. NO es "invertir
   colores": usa morados profundos y superficies diferenciadas. */
:root[data-theme="dark"] {
    --color-primary:        #F65BA6;   /* fucsia más claro para fondo oscuro */
    --color-primary-strong: #FB8AC3;
    --color-primary-light:  #C77BF0;
    --color-primary-soft:   #3A1D4E;
    --color-primary-tint:   #241436;

    --color-text:           #FFFFFF;
    --color-muted:          #CBBED9;
    --color-faint:          #9E90B2;

    --color-background:     #120A20;
    --color-frame:          #0B0616;
    --color-surface:        #1A0F2E;
    --color-surface-2:      #25143F;
    --color-border:         #3A2455;
    --color-border-strong:  #4A3168;

    --color-income:         #3DD9A0;
    --color-income-soft:    #123A2E;
    --color-expense:        #FF6B84;
    --color-expense-soft:   #3A1620;
    --color-danger:         #FF6B84;
    --color-danger-soft:    #3A1620;
    --color-success:        #3DD9A0;
    --color-success-soft:   #123A2E;
    --color-warning:        #E0A34B;
    --color-warning-soft:   #3A2A12;

    --color-msg-user:       #241436;
    --color-msg-genkia:     #221830;

    --shadow-soft:     0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-card:     0 8px 24px rgba(0, 0, 0, 0.40);
    --shadow-elevated: 0 16px 40px rgba(0, 0, 0, 0.50);
}