/* ==========================================================================
   VantIA Studio — sistema visual
   Fuente única de color, tipografía, espacio, radios, sombras y tiempos.
   Ningún otro archivo debe declarar un color literal.
   ========================================================================== */

:root {
    /* --- Marca ---------------------------------------------------------- */
    --color-navy-900: #071e45;
    --color-navy-800: #0a2b5e;
    --color-blue-700: #075ddb;
    --color-blue-600: #0a6cff;
    --color-blue-500: #087af5;
    --color-cyan-500: #04ccd8;
    --color-cyan-400: #0bd6db;

    /* --- Roles semánticos ----------------------------------------------- */
    --color-primary: var(--color-blue-700);
    --color-primary-strong: var(--color-navy-900);
    --color-secondary: var(--color-navy-800);
    --color-accent: var(--color-cyan-500);

    --color-background: #ffffff;
    --color-surface: #ffffff;
    --color-surface-muted: #f8fafd;
    --color-surface-tint: #f6f9fc;
    --color-surface-blue: #eef5fb;

    --color-text: #07172e;
    --color-text-muted: #53657a;
    --color-text-placeholder: #6b7a8b;
    --color-text-inverse: #ffffff;
    --color-text-on-dark-muted: #b9cbe4;

    --color-border: rgba(7, 60, 120, 0.10);
    --color-border-strong: rgba(7, 60, 120, 0.18);
    /* Sólo para la barra superior: un filo más tenue que el de las tarjetas. */
    --color-border-subtle: rgba(7, 30, 69, 0.06);
    --color-border-focus: var(--color-blue-600);

    /* Verde y rojo elegidos para superar 4.5:1 sobre su propia superficie. */
    --color-success: #0a7a55;
    --color-success-surface: #e8f7f1;
    --color-danger: #c42744;
    --color-danger-surface: #fdedf0;

    /* --- Gradientes ------------------------------------------------------ */
    --gradient-brand: linear-gradient(90deg, var(--color-blue-700), var(--color-cyan-500));
    /* El cian remataba en 160%, fuera del recorrido: el botón salía azul plano.
       A 125% se insinúa en el borde derecho sin volverse turquesa. */
    --gradient-cta: linear-gradient(100deg, var(--color-blue-700) 0%, var(--color-blue-600) 48%, var(--color-cyan-500) 125%);
    --gradient-deep: linear-gradient(150deg, var(--color-navy-900) 0%, var(--color-navy-800) 55%, #0d3d84 100%);
    --gradient-soft: linear-gradient(180deg, #ffffff 0%, var(--color-surface-tint) 100%);

    /* --- Telón de fondo del hero ------------------------------------------
       Lo comparten el hero y la capa de bienvenida. Al retirarse el velo el
       fondo no cambia: sólo desaparece el logotipo que había encima.
       ---------------------------------------------------------------------- */
    --backdrop-hero:
        radial-gradient(760px 620px at 74% 36%, rgba(4, 204, 216, 0.11), transparent 64%),
        radial-gradient(880px 560px at 12% 18%, rgba(10, 108, 255, 0.075), transparent 62%),
        linear-gradient(180deg, #fdfeff 0%, #f1f7ff 26%, #fafcff 74%, var(--color-background) 100%);

    --backdrop-grid:
        linear-gradient(rgba(7, 60, 120, 0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(7, 60, 120, 0.032) 1px, transparent 1px);
    /* En una máscara el negro significa opaco: no es un color de la paleta. */
    --backdrop-grid-mask: radial-gradient(circle at 50% 38%, #000 0%, transparent 70%);

    /* --- Tipografía ------------------------------------------------------ */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-md: 1.0625rem;    /* 17px */
    --text-lg: clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
    --text-xl: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
    --text-2xl: clamp(1.5rem, 1vw + 1.25rem, 1.875rem);
    --text-3xl: clamp(1.875rem, 1.8vw + 1.35rem, 2.5rem);
    --text-4xl: clamp(2rem, 2.4vw + 1.1rem, 2.875rem);
    /* Sube el arranque y baja el techo: el titular del hero gana cuerpo en
       portátiles sin dispararse en monitores de 1920. */
    --text-5xl: clamp(2.4rem, 3.4vw + 0.6rem, 3.75rem);

    --leading-tight: 1.02;
    --leading-snug: 1.25;
    --leading-normal: 1.6;
    --leading-relaxed: 1.7;

    --tracking-tight: -0.022em;
    --tracking-tighter: -0.035em;
    --tracking-wide: 0.08em;
    --tracking-widest: 0.14em;

    /* --- Espacio --------------------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 5rem;

    /* Densidad de software empresarial: las secciones respiran, pero la página
       no se convierte en una sucesión de pantallas medio vacías. */
    --section-padding: clamp(3.5rem, 5vw, 6rem);
    --container-max: 1280px;
    --container-wide: 1320px;
    --container-gutter: clamp(1.25rem, 3vw, 2rem);

    /* --- Formas ---------------------------------------------------------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-pill: 999px;

    /* --- Sombras (siempre azuladas, nunca negras) ------------------------ */
    --shadow-xs: 0 1px 2px rgba(17, 66, 120, 0.06);
    --shadow-sm: 0 6px 18px rgba(7, 46, 91, 0.06);
    --shadow-md: 0 14px 36px rgba(7, 46, 91, 0.09);
    --shadow-lg: 0 18px 48px rgba(17, 66, 120, 0.10);
    --shadow-xl: 0 28px 70px rgba(17, 66, 120, 0.14);
    --shadow-brand: 0 10px 26px rgba(7, 108, 244, 0.16);
    --shadow-brand-hover: 0 14px 32px rgba(7, 108, 244, 0.22);

    /* --- Movimiento ------------------------------------------------------ */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    /* Salida casi exponencial: arranca rápido y se posa muy despacio. Es la
       curva de los revelados del hero, donde el frenado final es el gesto. */
    --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 200ms;
    --duration-base: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 700ms;

    /* --- Estructura ------------------------------------------------------ */
    --header-height: 76px;
    --z-header: 100;
    --z-menu: 110;
    --z-toast: 200;
}