/* =============================================
   GForce — Design Tokens (variables.css)
   Mobile-first: base = mobile, overrides for tablet/desktop
   ============================================= */

:root {
    /* ── Primary Colors ── */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-red: #ff0000;

    /* ── Secondary Colors ── */
    --color-dark-orange: #b50500;
    --color-orange: #ff6e38;
    --color-soft-orange: #ffd9ba;
    --color-dark-green: #005151;
    --color-green: #54d9ab;
    --color-soft-green: #bdf5d4;
    --color-dark-pink: #93003e;
    --color-pink: #ff6e87;
    --color-soft-pink: #ffd4d9;
    --color-dark-purple: #5c21d6;
    --color-purple: #995efc;
    --color-soft-purple: #f0bdff;
    --color-dark-blue: #004fbd;
    --color-blue: #739eff;
    --color-soft-blue: #d8defb;
    --color-dark-yellow: #cc6b00;
    --color-yellow: #ffb047;
    --color-soft-yellow: #fff2b0;

    /* ── Neutral Tints ── */
    --color-gray-100: #e6e6e6;
    --color-gray-200: #cccccc;
    --color-gray-300: #b3b3b3;
    --color-gray-400: #999999;
    --color-gray-500: #808080;
    --color-gray-600: #666666;
    --color-gray-700: #4d4d4d;
    --color-gray-800: #333333;
    --color-gray-900: #1a1a1a;

    /* ── Red Tints ── */
    --color-red-100: #f4f1f1;

    /* ── Typography ── */
    --font-display: 'Funnel Display', serif;
    --font-sans: 'Funnel Sans', sans-serif;

    /* ── Spacing ── */
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 40px;
    --space-2xl: 60px;

    /* ── Layout ── */
    --container-width: 1280px;
    --padding-mobile: 20px;
    --padding-tablet: 40px;
    --padding-desktop: 40px;
    --gap-mobile: 8px;
    --gap-tablet: 10px;
    --gap-desktop: 10px;

    /* ── Grid ── */
    --gutter: var(--padding-mobile);
    --col-gap: var(--gap-mobile);
}

/* Tablet+ */
@media (min-width: 768px) {
    :root {
        --gutter: var(--padding-tablet);
        --col-gap: var(--gap-tablet);
    }
}

/* Desktop */

@media (min-width: 1280px) {
    :root {
        --gutter: var(--padding-desktop);
        --col-gap: var(--gap-desktop);
    }
}

body{
    background-color: var(--color-white);
}

.row {
    width: 100vw;
}

.site-wrapper{
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}