/* =====================================================
   X WEDDIANA V2
   GLOBAL CSS
===================================================== */

:root {

    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-soft: #eff6ff;

    --color-text: #172033;
    --color-text-soft: #64748b;
    --color-text-muted: #94a3b8;

    --color-white: #ffffff;
    --color-border: #e2e8f0;

    --color-background: #f8fafc;

    --container-width: 1180px;

    --font-sans:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --transition:
        220ms ease;
}


/* =====================================================
   RESET
===================================================== */

*,
*::before,
*::after {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    background:
        var(--color-white);

    color:
        var(--color-text);

    font-family:
        var(--font-sans);

    font-size: 15px;

    line-height: 1.6;

    -webkit-font-smoothing:
        antialiased;

}


img {

    display: block;

    max-width: 100%;

}


button,
input,
textarea,
select {

    font: inherit;

}


button {

    cursor: pointer;

}


a {

    color: inherit;

    text-decoration: none;

}


h1,
h2,
h3,
h4,
p {

    margin-top: 0;

}


::selection {

    background:
        var(--color-primary);

    color:
        var(--color-white);

}


/* =====================================================
   CONTAINER
===================================================== */

.landing-container {

    width: 100%;

    max-width:
        var(--container-width);

    margin:
        0 auto;

    padding:
        0 24px;

}


/* =====================================================
   FOCUS
===================================================== */

:focus-visible {

    outline:
        3px solid
        rgba(37, 99, 235, .25);

    outline-offset:
        3px;

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}