/* Call Santa 2026 style (scheme E4 "Jade & cherry", chosen 16 Oct 2026).
   One primary (cherry, every main button), one secondary (jade tint), a very light
   white-to-grey-green page gradient. Loaded on every page after the page's own stylesheet. */

:root {
    --cs-ink: #10241F;            /* text */
    --cs-muted: #4D605A;          /* secondary text */
    --cs-primary: #C8233F;        /* cherry: main buttons, links, selected states */
    --cs-primary-grad: linear-gradient(180deg, #E8576F 0%, #C8233F 55%, #A5162E 100%);
    --cs-primary-grad-hover: linear-gradient(180deg, #DC4A62 0%, #B81D37 55%, #951229 100%);
    --cs-secondary: #DCEFE7;      /* jade tint: tiles, avatars, number badges, info pills */
    --cs-bg-top: #FFFFFF;
    --cs-bg-bottom: #F1F5F3;
    --cs-bg: linear-gradient(180deg, var(--cs-bg-top) 0%, var(--cs-bg-bottom) 100%);
    --cs-card: #FFFFFF;
    --cs-line: #D3DED9;           /* input borders, dividers */
    --cs-edge: #E2ECE8;           /* faint separators */
    --cs-shadow: 0 1px 2px rgba(16, 36, 31, .06), 0 6px 16px rgba(16, 36, 31, .07);
    --cs-radius-card: 22px;
    --cs-font-display: 'Fraunces', Georgia, serif;
    --cs-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ONE type scale. Fraunces (always 800) for titles, Inter 400/600 for everything else.
       Inter sizes: 17 body and item titles, 15 secondary, 13 captions. */
    --fs-hero: 46px;              /* home hero title only */
    --fs-h1: 40px;                /* page title */
    --fs-h2: 30px;                /* section title */
    --fs-h3: 20px;                /* card title, review quote */
    --fs-body: 17px;              /* body text, item titles, labels, prices */
    --fs-small: 15px;             /* secondary text: card descriptions, helper text, nav */
    --fs-caption: 13px;           /* names, legal lines, small labels */
    --lh-body: 1.5;

    /* Older variable names used across the site, pointed at the new palette */
    --primary-color: var(--cs-primary);
    --dark-color: var(--cs-ink);
}

@media (max-width: 640px) {
    :root {
        --fs-hero: 36px;
        --fs-h1: 32px;
        --fs-h2: 26px;
    }
}

body {
    font-family: var(--cs-font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--cs-ink);
    background: var(--cs-bg-bottom) var(--cs-bg) no-repeat fixed;
}

/* Form elements do not inherit the page font by default (they fell back to Arial) */
button, input, select, textarea, summary, optgroup {
    font-family: inherit;
}

h1, h2, h3, .cs-display {
    font-family: var(--cs-font-display);
    font-weight: 800;
    font-variation-settings: 'SOFT' 100;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--cs-ink);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
/* h4-h6 are item titles: Inter 600 at body size */
h4, h5, h6 {
    font-family: var(--cs-font-body);
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--cs-ink);
}

/* Main call-to-action: always cherry with a slight gradient */
.cs-btn-primary {
    background: var(--cs-primary-grad);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-family: var(--cs-font-body);
    font-weight: 600;
}
.cs-btn-primary:hover { background: var(--cs-primary-grad-hover); color: #fff; }

/* Secondary button: white with a dark outline */
.cs-btn-secondary {
    background: #fff;
    color: var(--cs-ink);
    border: 1.5px solid var(--cs-ink);
    border-radius: 999px;
    font-family: var(--cs-font-body);
    font-weight: 600;
}

/* White card with the soft shadow */
.cs-card {
    background: var(--cs-card);
    border-radius: var(--cs-radius-card);
    box-shadow: var(--cs-shadow);
}

/* Information pill (e.g. call minutes): jade tint, no border, not a button look */
.cs-pill {
    background: var(--cs-secondary);
    color: var(--cs-ink);
    border: 0;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: var(--fs-small);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   ONE main-button look everywhere. Every page had its own red-button class with
   its own size, lettering and hover; they are all forced to the same look here.
   Two sizes only: regular (56px) and compact (44px, for buttons inside a row,
   the header and the cookie banner). !important because page styles load later.
   --------------------------------------------------------------------------- */
.cs-btn-primary, .btn-primary, .cta-button, .cta-button:visited, .hero-cta-btn,
.register-submit-btn, .pl-btn, .login-button, .checkout-button, .landing-cta,
.submit-button, .nav-btn-next, .modal-btn-save,
.nav-link-cta, .purchase-button, .share-copy, .cookie-btn:not(.secondary) {
    background: var(--cs-primary-grad) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 2px rgba(16, 36, 31, .10), 0 4px 12px rgba(200, 35, 63, .22) !important;
    font-family: var(--cs-font-body) !important;
    font-weight: 600 !important;
    font-size: 17px !important;
    line-height: 24px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-align: center;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 28px !important;
    transform: none !important;
    transition: background .15s ease, box-shadow .15s ease !important;
    cursor: pointer;
}
/* compact size */
.nav-link-cta, .purchase-button, .share-copy, .cookie-btn:not(.secondary) {
    font-size: 15px !important;
    line-height: 20px !important;
    padding: 12px 20px !important;
}
.cs-btn-primary:hover, .btn-primary:hover, .cta-button:hover, .hero-cta-btn:hover,
.register-submit-btn:hover, .pl-btn:hover, .login-button:hover, .checkout-button:hover, .landing-cta:hover,
.submit-button:hover, .nav-btn-next:hover, .modal-btn-save:hover,
.nav-link-cta:hover, .purchase-button:hover, .share-copy:hover, .cookie-btn:not(.secondary):hover {
    background: var(--cs-primary-grad-hover) !important;
    color: #fff !important;
    transform: none !important;
}
.cs-btn-primary:disabled, .btn-primary:disabled, .hero-cta-btn:disabled, .register-submit-btn:disabled,
.pl-btn:disabled, .login-button:disabled, .checkout-button:disabled, .submit-button:disabled,
.nav-btn-next:disabled, .modal-btn-save:disabled {
    background: var(--cs-primary-grad) !important;
    opacity: .4 !important;
    box-shadow: none !important;
    cursor: default;
}
/* Selected tab / chip: same red, same gradient */
.secondary-nav-link.active, .gender-option.selected {
    background: var(--cs-primary-grad) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* ONE secondary-button look: white, dark outline, dark text */
.cs-btn-secondary, .btn-secondary, .btn-outline, .hero-secondary-btn, .modal-btn-secondary,
.need-help-section .cta-button {
    background: #fff !important;
    color: var(--cs-ink) !important;
    border: 1.5px solid var(--cs-ink) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-family: var(--cs-font-body) !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    transform: none !important;
}
.cs-btn-secondary:hover, .btn-secondary:hover, .btn-outline:hover, .hero-secondary-btn:hover, .modal-btn-secondary:hover,
.need-help-section .cta-button:hover {
    background: #fff !important;
    color: var(--cs-primary) !important;
    border-color: var(--cs-primary) !important;
}

/* No button is ever in capitals */
button, input[type=submit], .btn, [class*="btn"], [class*="button"], .nav-link-cta, .landing-cta {
    text-transform: none !important;
}