/* =========================================================
   KIVOR · Design Tokens (marca + temas light/dark)
   (con densidad más compacta)
   ========================================================= */

:root {
    /* Tipografía base */
    --font-sans: 'Urbanist', Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    /* Escala tipográfica fluida */
    --step--1: clamp(.84rem, .78rem + .25vw, .94rem);
    --step-0: clamp(1.00rem, .94rem + .35vw, 1.13rem);
    --step-1: clamp(1.25rem, 1.10rem + .60vw, 1.44rem);
    --step-2: clamp(1.56rem, 1.30rem + 1.10vw, 1.95rem);
    --step-3: clamp(1.95rem, 1.50rem + 1.80vw, 2.44rem);
    --step-4: clamp(2.44rem, 1.80rem + 2.60vw, 3.05rem);
    --step-5: clamp(3.10rem, 2.20rem + 3.10vw, 3.90rem);
    /* -7% */

    /* Spacing (8pt) */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    /* -16% */
    --space-6: 1.75rem;
    /* -12% */
    --space-8: 2.5rem;
    /* -17% */
    --space-10: 3.5rem;
    /* -12% */

    /* Bordes & sombras */
    --radius-sm: .5rem;
    --radius-md: 1rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.5rem;

    --shadow-sm: 0 1px 2px rgba(12, 18, 28, .12), 0 1px 1px rgba(12, 18, 28, .08);
    --shadow-md: 0 10px 26px rgba(0, 0, 0, .28);
    --shadow-lg: 0 26px 60px rgba(0, 0, 0, .45);

    /* Contenedor (padding más contenido) */
    --container-max: 1240px;
    --container-pad: clamp(14px, 2.2vw, 28px);

    /* Timing */
    --speed-fast: 160ms;
    --speed: 260ms;
    --speed-slow: 480ms;
    --ease: cubic-bezier(.2, .8, .2, 1);

    /* Z */
    --z-navbar: 50;
    --z-modal: 100;
}

/* ============================  DARK (por defecto) ======================== */
:root,
:root[data-theme="dark"] {
    /* Marca (navy KIVOR) */
    --brand-950: #071B2A;
    --brand-900: #0E2A3B;
    --brand-800: #14384E;
    --brand-700: #18445E;
    --brand-600: #1C5C84;
    --brand-500: #2678AF;
    /* CTA base */
    --brand-400: #3D8FC4;
    /* hover/active */
    --brand-300: #8CC0E6;
    --brand-100: #E7F3FF;

    /* Fondo y texto */
    --bg-50: #0F1F2E;
    --bg-100: #132636;
    --bg-200: #183244;

    --text-100: #FFFFFF;
    /* sobre fondos oscuros */
    --text-900: #EAF1FA;
    /* copy principal */
    --text-700: #C9D5E4;
    /* copy secundaria */
    --text-500: #9FB2C7;
    /* muted */

    /* Superficies coherentes (cards/paneles) */
    --surface-0: #0F1F2E;
    /* fondo página */
    --surface-1: rgba(13, 24, 36, .84);
    /* cards blandas */
    --surface-2: rgba(13, 24, 36, .92);
    /* cards medias */
    --surface-3: rgba(9, 17, 27, .68);
    /* glass sutil (home) */
    --surface-border: rgba(255, 255, 255, .08);

    /* Estados */
    --ok-500: #20C997;
    --warn-500: #F59E0B;
    --err-500: #EF4444;
    --info-500: #3B82F6;

    /* Gradiente hero (oscuro) */
    --grad-hero:
        radial-gradient(1200px 600px at 90% -10%, rgba(38, 120, 175, .22), transparent 60%),
        radial-gradient(1200px 600px at -10% 10%, rgba(28, 92, 132, .22), transparent 60%),
        linear-gradient(180deg, var(--brand-900) 0%, var(--brand-950) 100%);

    /* Texto para superficies claras */
    --surface-text: #0E1116;
    --surface-muted: #2B2F36;

    /* Acentos del rotador */
    --rotator-start: #B4DAF3;
    --rotator-end: #6EAAD4;
    --rotator-caret: #9FC6E6;

    /* Resalte para títulos/acento */
    --grad-highlight: linear-gradient(90deg, #4FB0E9 0%, #72D2FF 100%);
}

/* ==============================  LIGHT =================================== */
:root[data-theme="light"] {
    --brand-950: #071B2A;
    --brand-900: #0E2A3B;
    --brand-800: #153B51;
    --brand-700: #1D4B69;
    --brand-600: #1C5C84;
    --brand-500: #2475AB;
    --brand-300: #6FB0DD;
    --brand-100: #DCEFFF;

    /* Fondo y texto */
    --bg-50: #F1F5F9;
    --bg-100: #E9F0F6;
    --bg-200: #E1EBF3;

    --text-900: #0E1116;
    --text-700: #2C3340;
    --text-500: #68758A;
    --text-100: #0E1116;

    /* Superficies */
    --surface-0: #F4F7FB;
    /* body */
    --surface-1: #FFFFFF;
    /* cards/chips */
    --surface-2: #FFFFFF;
    --surface-3: #FFFFFF;
    --surface-border: rgba(12, 18, 28, .10);

    /* Gradiente hero (claro) */
    --grad-hero:
        radial-gradient(1200px 600px at -10% 10%, rgba(28, 92, 132, .10), transparent 60%),
        radial-gradient(1200px 600px at 90% -10%, rgba(36, 117, 171, .10), transparent 60%),
        linear-gradient(180deg, #F8FAFE 0%, #EDF4FA 100%);

    /* Acentos del rotador */
    --rotator-start: #2678AF;
    --rotator-end: #6FB0DD;
    --rotator-caret: #1C5C84;

    /* Resalte para títulos/acento */
    --grad-highlight: linear-gradient(90deg, #1C5C84 0%, #2475AB 100%);
}

/* Sombras en dark por preferencia del SO */
@media (prefers-color-scheme: dark) {
    :root {
        --shadow-md: 0 10px 28px rgba(0, 0, 0, .35);
        --shadow-lg: 0 28px 65px rgba(0, 0, 0, .55);
    }
}

/* =========================================================
   Alturas fluidas (header/footer) + logos que llenan
   ========================================================= */
:root {
    /* Header más compacto y fluido */
    --topbar-h: clamp(54px, 4.6vw, 78px);
    --logo-nav-h: calc(var(--topbar-h) - 1.2rem);

    /* Footer compacto */
    --footer-brand-h: clamp(110px, 16vw, 220px);
    --logo-foot-h: calc(var(--footer-brand-h) - 22px);
}