/* =====================================================================
   CHUM GLOBAL DESIGN SYSTEM
   CLEAN PREMIUM ECOMMERCE + LIQUID GLASS
   ===================================================================== */

:root {
    --chum-primary: #e84164;
    --chum-primary-hover: #d9365b;
    --chum-primary-soft: rgba(232, 65, 100, 0.10);

    --chum-navy: #171b4f;
    --chum-navy-2: #222865;

    --text-primary: #111820;
    --text-secondary: #46515d;
    --text-muted: #6f7a86;

    --success: #139a68;

    --chum-page-bg: #eef6f9;

    --chum-page-gradient:
        radial-gradient(
            900px 620px at -8% -2%,
            rgba(73, 213, 255, 0.28),
            transparent 62%
        ),
        radial-gradient(
            820px 560px at 108% 18%,
            rgba(92, 139, 255, 0.10),
            transparent 62%
        ),
        linear-gradient(
            135deg,
            #e8f8fc 0%,
            #f5f9fb 46%,
            #eef3f7 100%
        );

    --glass-card: rgba(255, 255, 255, 0.56);
    --glass-card-hover: rgba(255, 255, 255, 0.68);

    --glass-control: rgba(228, 238, 245, 0.74);
    --glass-control-hover: rgba(241, 247, 250, 0.88);

    --glass-border: rgba(255, 255, 255, 0.94);
    --glass-border-soft: rgba(255, 255, 255, 0.72);
    --glass-edge: rgba(255, 255, 255, 0.98);

    --glass-line: rgba(32, 48, 61, 0.08);

    --shadow-card:
        0 18px 44px rgba(20, 39, 54, 0.10),
        0 2px 8px rgba(20, 39, 54, 0.05);

    --shadow-card-hover:
        0 28px 60px rgba(20, 39, 54, 0.14),
        0 4px 12px rgba(20, 39, 54, 0.06);

    --shadow-control:
        0 8px 18px rgba(20, 39, 54, 0.09);

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

    --radius-control: 14px;
    --radius-card: 26px;

    --container-width: 1600px;

    --transition-fast: 160ms ease;

    --transition-normal:
        240ms cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );
}


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

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    margin: 0;
    padding: 0;

    min-width: 320px;

    scroll-behavior: smooth;

    background: var(--chum-page-bg);

    color-scheme: light;
}


body {
    margin: 0;
    padding: 0;

    min-width: 320px;
    min-height: 100vh;

    background:
        var(--chum-page-gradient);

    background-attachment: fixed;

    color:
        var(--text-primary);

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

    font-size: 16px;

    line-height: 1.5;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;
}


/* =====================================================================
   TYPOGRAPHY
   ===================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-family:
        var(--chum-font);
}


h1,
h2,
h3,
h4,
h5,
h6 {
    color:
        var(--text-primary);
}


/* =====================================================================
   FORMS
   ===================================================================== */

button,
input,
select,
textarea {
    font:
        inherit;

    font-family:
        var(--chum-font);
}


button {
    border: 0;
}


button,
a {
    -webkit-tap-highlight-color:
        transparent;
}


/* =====================================================================
   LINKS
   ===================================================================== */

a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
    color:
        inherit;

    text-decoration:
        none;
}


/* =====================================================================
   MEDIA
   ===================================================================== */

img,
svg {
    display: block;
}


img {
    max-width: 100%;
}


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

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        3px solid
        rgba(232, 65, 100, 0.22);

    outline-offset:
        3px;
}


/* =====================================================================
   PAGE
   ===================================================================== */

.page-shell {
    width: 100%;

    min-height: 500px;

    background:
        transparent;
}


/* =====================================================================
   SELECTION
   ===================================================================== */

::selection {
    color: #ffffff;

    background:
        var(--chum-primary);
}


/* =====================================================================
   SCROLLBAR
   ===================================================================== */

::-webkit-scrollbar {
    width: 10px;

    height: 10px;
}


::-webkit-scrollbar-track {
    background:
        #eaf1f5;
}


::-webkit-scrollbar-thumb {
    border:
        3px solid #eaf1f5;

    border-radius:
        999px;

    background:
        #aebbc5;
}


::-webkit-scrollbar-thumb:hover {
    background:
        #8999a6;
}


/* =====================================================================
   GLASS FALLBACK
   ===================================================================== */

@supports not (
    (
        backdrop-filter:
            blur(10px)
    )
    or
    (
        -webkit-backdrop-filter:
            blur(10px)
    )
) {

    :root {
        --glass-card:
            rgba(247, 250, 252, 0.96);

        --glass-card-hover:
            rgba(255, 255, 255, 0.98);

        --glass-control:
            rgba(239, 245, 248, 0.98);

        --glass-control-hover:
            rgba(248, 251, 252, 1);
    }

}


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

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

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}