:root {
    --cont: 87.5rem;
    --cont-p: 1rem;
    /* Mobile-first padding: 320/360/375/390/414 → 16–20px, 768 → 24px, 1024 → 32px, 1280 → 40px, 1440 → 48px */
    --touch-target: 2.75rem; /* 44px min tap target */

    --c-white: #fff;
    --c-black: #2B2140;
    --c-body-bg: #FFFBF5;
    --c-tWhite: #F6F6F6;
    --c-tBlack: #2B2140;
    --c-tGrey: #6B6080;
    --c-blue: #2F72E7;
    --c-greyBg: #F7F7F7;

    --headerHeight: 4.5rem;

    --panel: rgba(255,255,255,0.92);
    --panel-border: rgba(43, 33, 64, 0.10);
    --text: #2B2140;
    --text-on-dark: #f0f0ff;
    --muted: rgba(43, 33, 64, 0.58);
    --muted-on-dark: rgba(240,240,255,0.74);

    --accent-1: #7B5CFF;
    --accent-2: #E07B5E;
    --accent-3: #B06AFF;
    --accent-warm: #D4941A;
    --accent-gold: #E8A83A;
    --accent-red: #A03050;

    --section-bg: #FFF7EE;
    --section-bg-alt: #F9F5FF;
    --card-bg: #FFFFFF;
    --card-border: rgba(43, 33, 64, 0.07);
    --card-shadow: 0 0.5rem 2rem rgba(43, 33, 64, 0.06);
    --card-shadow-hover: 0 1rem 3rem rgba(43, 33, 64, 0.10);
}

/* 320px */
@media (max-width: 20rem) {
    :root {
        --cont-p: 1rem;
    }
}

/* 360–414px */
@media (min-width: 20rem) and (max-width: 25.875rem) {
    :root {
        --cont-p: 1rem;
    }
}

@media (min-width: 23.4375rem) and (max-width: 25.875rem) {
    :root {
        --cont-p: 1.25rem;
    }
}

/* 768px tablet */
@media (min-width: 48rem) {
    :root {
        --cont-p: 1.5rem;
        --headerHeight: 5rem;
    }
}

/* 1024px */
@media (min-width: 64rem) {
    :root {
        --cont-p: 2rem;
    }
}

/* 1280px */
@media (min-width: 80rem) {
    :root {
        --cont-p: 2.5rem;
    }
}

/* 1440px */
@media (min-width: 90rem) {
    :root {
        --cont-p: 3rem;
    }
}