/*
 * KituCloud — Design tokens (fuente única de verdad de color, tipografía,
 * espaciado, radios y sombras de las 5 vistas).
 *
 * Origen: sistema de diseño de KituCloud (skill kitucloud-design-system),
 * que replica la firma visual de kitucloud.com. Las clases de la firma
 * visual (.kitu-*) viven en marca.css, que depende de este archivo.
 *
 * Migración por vista (2026-09-28): las vistas migradas usan los tokens
 * nuevos (--kitu-*, --text-*, --state-*, --space-*, --radius-*,
 * --shadow-*, --font-kitu). Los nombres viejos (--primary, --text,
 * --text-light, --bg, --success, --danger, --font-principal...) quedan
 * con SU MISMO VALOR de antes, para que las vistas que todavía no se
 * migraron no cambien. Se retiran cuando ninguna vista los use.
 */

/* Inter, alojada en el repo (static/fonts/, licencia SIL OFL 1.1 en
   LICENSE-Inter.txt). Una sola fuente variable 100–900. El navegador
   solo la descarga en las vistas que usan --font-kitu. */
@font-face {
    font-family: "InterVariable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/fonts/InterVariable.woff2") format("woff2");
}

:root {
    /* ===== Marca ===== */
    --kitu-blue: #4F6EF7;
    --kitu-mid: #6D67F4;
    --kitu-purple: #8B5FF0;
    --kitu-gradient: linear-gradient(135deg, var(--kitu-blue), var(--kitu-purple));
    --kitu-gradient-light: linear-gradient(90deg, #8FA2FF 0%, #B79BFF 100%); /* texto en degradado sobre fondo oscuro */

    /* Superficie oscura de marca */
    --kitu-ink: #0E1120;
    --kitu-ink-2: #1A1F36;
    --kitu-surface-dark:
        radial-gradient(60% 80% at 85% 15%, rgba(139,95,240,.35) 0%, rgba(139,95,240,0) 60%),
        radial-gradient(50% 70% at 5% 95%, rgba(79,110,247,.30) 0%, rgba(79,110,247,0) 60%),
        var(--kitu-ink);

    /* ===== Texto (misma escala que kitucloud.com) ===== */
    --text-primary: #1A1F36;
    --text-strong: #2D3348;
    --text-medium: #5A6178;
    --text-secondary: #9AA1B4;
    --text-on-dark: #FFFFFF;
    --text-on-dark-soft: #C9CEE0;

    /* ===== Superficies ===== */
    --surface: #FFFFFF;
    --surface-sunken: #F7F8FD;
    --surface-tint: #EEF1FB;
    --border: #EAECF1;

    /* ===== Estados semánticos (mismos colores en todo el ecosistema) ===== */
    --state-activo: #1FAE6B;
    --state-activo-text: #059669;
    --state-activo-bg: #E7F8F1;
    --state-activo-dot: #34D399;
    --state-pendiente: #E3A008;
    --state-vencido: #E0453C;
    --state-construccion: #9AA1B4;
    /* Fondo y texto de cada estado en pastilla (.kitu-badge). El skill solo
       define los de "activo"; los demás siguen el mismo patrón: fondo muy
       claro del color del estado y texto oscuro del mismo tono. */
    --state-pendiente-bg: #FEF6E0;
    --state-pendiente-text: #92400E;
    --state-vencido-bg: #FDECEB;
    --state-vencido-text: #B42318;
    --state-neutro-bg: #F1F2F6;
    --state-neutro-text: #5A6178;

    /* ===== Espaciado ===== */
    --space-1: 4px; --space-2: 8px; --space-3: 12px;
    --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;

    /* ===== Radios ===== */
    --radius-sm: 8px;    /* inputs */
    --radius-btn: 10px;  /* todos los botones, web y apps */
    --radius-md: 12px;   /* tarjetas del interior */
    --radius-lg: 20px;   /* tarjetas destacadas y pantallas de entrada */
    --radius-pill: 999px;

    /* ===== Sombras ===== */
    --shadow-sutil: 0 1px 2px rgba(26,31,54,0.04);   /* interior: casi nunca */
    --shadow-btn: 0 10px 24px rgba(79,110,247,.30);  /* solo botón primario (piel de marca) */
    --shadow-float: 0 20px 60px rgba(0,0,0,.25);     /* solo tarjetas destacadas en piel de marca */

    /* ===== Tipografía ===== */
    --font-kitu: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* ===== Nombres de antes de la migración (mismo valor que tenían) ===== */
    --marca-inicio: var(--kitu-blue);
    --marca-fin: var(--kitu-purple);
    --marca-gradiente: linear-gradient(135deg, var(--marca-inicio) 0%, var(--marca-fin) 100%);
    --primary: var(--kitu-blue);
    --primary-hover: #435DD2;
    --primary-rgb: 79, 110, 247; /* --kitu-blue en rgb, para rgba(var(--primary-rgb), X) */
    --text: var(--text-primary);
    --text-light: var(--text-secondary);
    --bg: #f8fafc;
    --success: #10b981;
    --danger: #ef4444;
    --font-principal: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}