/* ==========================================================================
   Markad Publicidad Estudio — Variables globales
   ========================================================================== */

:root {

    /* ----------------------------------------------------------------------
       Tipografías
       ---------------------------------------------------------------------- */

    --mk-font-heading: 'Roboto', sans-serif;
    --mk-font-body: 'Nunito Sans', sans-serif;


    /* ----------------------------------------------------------------------
       Azul índigo
       ---------------------------------------------------------------------- */

    --mk-indigo-950: #080d26;
    --mk-indigo-900: #101a45;
    --mk-indigo-850: #152052;
    --mk-indigo-800: #19265f;
    --mk-indigo-700: #26367d;
    --mk-indigo-600: #35499a;
    --mk-indigo-500: #4b60b5;


    /* ----------------------------------------------------------------------
       Magenta azulado
       ---------------------------------------------------------------------- */

    --mk-magenta-800: #7423a7;
    --mk-magenta-700: #872bbd;
    --mk-magenta-600: #a32ccc;
    --mk-magenta-500: #bd39dc;
    --mk-magenta-400: #d15bea;
    --mk-magenta-300: #df83f1;


    /* ----------------------------------------------------------------------
       Colores neutros
       ---------------------------------------------------------------------- */

    --mk-white: #ffffff;
    --mk-black: #070816;

    --mk-gray-50: #f8f8fc;
    --mk-gray-100: #f0f1f7;
    --mk-gray-200: #e1e3ec;
    --mk-gray-300: #c7cad8;
    --mk-gray-400: #a6abba;
    --mk-gray-500: #7c8294;
    --mk-gray-600: #5e6475;
    --mk-gray-700: #424758;
    --mk-gray-800: #292e3e;
    --mk-gray-900: #171b29;


    /* ----------------------------------------------------------------------
       Textos
       ---------------------------------------------------------------------- */

    --mk-text-primary: #171b29;
    --mk-text-secondary: #5e6475;
    --mk-text-muted: #7c8294;

    --mk-text-light: #ffffff;
    --mk-text-light-muted: #c7cbe0;


    /* ----------------------------------------------------------------------
       Fondos
       ---------------------------------------------------------------------- */

    --mk-background: #ffffff;
    --mk-background-soft: #f7f7fc;
    --mk-background-indigo: #101a45;
    --mk-background-dark: #080d26;


    /* ----------------------------------------------------------------------
       Colores funcionales
       ---------------------------------------------------------------------- */

    --mk-success: #159455;
    --mk-warning: #d98b12;
    --mk-error: #d63b4d;
    --mk-info: #3567cc;


    /* ----------------------------------------------------------------------
       Degradados
       ---------------------------------------------------------------------- */

    --mk-gradient-brand:
        linear-gradient(
            135deg,
            var(--mk-indigo-700) 0%,
            var(--mk-magenta-700) 55%,
            var(--mk-magenta-500) 100%
        );

    --mk-gradient-dark:
        linear-gradient(
            135deg,
            var(--mk-indigo-950) 0%,
            var(--mk-indigo-900) 100%
        );

    --mk-gradient-overlay:
        linear-gradient(
            90deg,
            rgba(8, 13, 38, 0.9) 0%,
            rgba(16, 26, 69, 0.55) 50%,
            rgba(16, 26, 69, 0.18) 100%
        );


    /* ----------------------------------------------------------------------
       Bordes
       ---------------------------------------------------------------------- */

    --mk-border-color: rgba(16, 26, 69, 0.12);
    --mk-border-light: rgba(255, 255, 255, 0.16);
    --mk-border-medium: rgba(255, 255, 255, 0.28);

    --mk-border-radius-sm: 6px;
    --mk-border-radius-md: 12px;
    --mk-border-radius-lg: 20px;
    --mk-border-radius-xl: 32px;
    --mk-border-radius-pill: 999px;


    /* ----------------------------------------------------------------------
       Sombras
       ---------------------------------------------------------------------- */

    --mk-shadow-sm:
        0 4px 14px rgba(8, 13, 38, 0.08);

    --mk-shadow-md:
        0 12px 32px rgba(8, 13, 38, 0.12);

    --mk-shadow-lg:
        0 24px 70px rgba(8, 13, 38, 0.18);

    --mk-shadow-magenta:
        0 16px 42px rgba(163, 44, 204, 0.3);


    /* ----------------------------------------------------------------------
       Contenedores
       ---------------------------------------------------------------------- */

    --mk-container-width: 1240px;
    --mk-container-wide: 1440px;
    --mk-container-padding: 24px;


    /* ----------------------------------------------------------------------
       Alturas
       ---------------------------------------------------------------------- */

    --mk-header-height: 100px;
    --mk-header-height-mobile: 76px;


    /* ----------------------------------------------------------------------
       Espaciados
       ---------------------------------------------------------------------- */

    --mk-space-1: 4px;
    --mk-space-2: 8px;
    --mk-space-3: 12px;
    --mk-space-4: 16px;
    --mk-space-5: 20px;
    --mk-space-6: 24px;
    --mk-space-8: 32px;
    --mk-space-10: 40px;
    --mk-space-12: 48px;
    --mk-space-16: 64px;
    --mk-space-20: 80px;
    --mk-space-24: 96px;
    --mk-space-28: 112px;
    --mk-space-32: 128px;


    /* ----------------------------------------------------------------------
       Transiciones
       ---------------------------------------------------------------------- */

    --mk-transition-fast:
        160ms ease;

    --mk-transition-base:
        280ms ease;

    --mk-transition-slow:
        600ms cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );


    /* ----------------------------------------------------------------------
       Capas
       ---------------------------------------------------------------------- */

    --mk-z-background: 0;
    --mk-z-content: 10;
    --mk-z-header: 100;
    --mk-z-dropdown: 200;
    --mk-z-overlay: 500;
    --mk-z-modal: 1000;
}


/* ==========================================================================
   Ajustes responsivos
   ========================================================================== */

@media (max-width: 1024px) {

    :root {
        --mk-container-padding: 20px;
        --mk-header-height: 88px;
    }

}


@media (max-width: 767px) {

    :root {
        --mk-container-padding: 18px;
        --mk-header-height: var(
            --mk-header-height-mobile
        );
    }

}