/* 2026 brand-guideline CTA hierarchy and digital contrast rules. */
:root {
    --cta-foam-white: #F4EBDF;
    --cta-espresso-black: #000000;
    --cta-rich-brown: #472426;
    --cta-smooth-yellow: #FBEAA0;
    --cta-rich-pink: #B22F66;
    --cta-rich-purple: #472B74;
}

/* CTA typography: ICONESSO Text Medium, uppercase. */
body:not(.cms-page) .button {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
}

/* The primary action remains the only filled action in each CTA group. */
body:not(.cms-page) .button-primary {
    --cta-primary-background: var(--cta-rich-pink);
    --cta-primary-foreground: var(--cta-foam-white);
    border-color: var(--cta-primary-background) !important;
    background: var(--cta-primary-background) !important;
    color: var(--cta-primary-foreground) !important;
}

body:not(.cms-page) .button-primary::before {
    display: none;
}

body:not(.cms-page) .button-primary:hover,
body:not(.cms-page) .button-primary:focus-visible {
    border-color: var(--cta-primary-background) !important;
    background: var(--cta-primary-background) !important;
    color: var(--cta-primary-foreground) !important;
}

/* Approved contextual families: dark text on Smooth Yellow or Foam White. */
body:not(.cms-page) main :is(
    .zenius-premium-hero,
    .editorial-hero,
    .support-hero,
    .support-route-card:first-child
) .button-primary {
    --cta-primary-background: var(--cta-smooth-yellow);
    --cta-primary-foreground: var(--cta-espresso-black);
}

body:not(.cms-page) main :is(
    .coffee-lifestyle-section,
    #engineer-booking .form-column:first-child
) .button-primary {
    --cta-primary-background: var(--cta-foam-white);
    --cta-primary-foreground: var(--cta-espresso-black);
}

/* Machine-page closing actions use the Rich Brown family. */
body:not(.cms-page) main .zenius-demo-cta .button-primary {
    --cta-primary-background: var(--cta-rich-brown);
    --cta-primary-foreground: var(--cta-foam-white);
}

/* Lyreco shop actions retain the approved partner colour used for the collaboration. */
body:not(.cms-page) main .coffee-pdp-hero .button-primary {
    --cta-primary-background: #3D7500;
    --cta-primary-foreground: var(--cta-foam-white);
}

/* Secondary actions are outlined and never compete with the filled primary action. */
body:not(.cms-page) .button-secondary {
    --cta-secondary-foreground: var(--cta-rich-pink);
    border: 1px solid var(--cta-secondary-foreground) !important;
    background: transparent !important;
    color: var(--cta-secondary-foreground) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body:not(.cms-page) .button-secondary::before {
    display: none;
}

body:not(.cms-page) .button-secondary:hover,
body:not(.cms-page) .button-secondary:focus-visible {
    border-color: var(--cta-secondary-foreground) !important;
    background: transparent !important;
    color: var(--cta-secondary-foreground) !important;
    box-shadow: none !important;
}

body:not(.cms-page) main .why-pro-hero-actions .button-secondary {
    --cta-secondary-foreground: var(--cta-rich-brown);
}

body:not(.cms-page) main :is(
    .zenius-featured-section
) .button-secondary {
    --cta-secondary-foreground: var(--cta-rich-purple);
}

/* Dark and photographic panels use Foam White over their existing dark overlays. */
body:not(.cms-page) main :is(
    .zenius-premium-hero,
    .product-detail-hero,
    .coffee-page-hero,
    .accessories-hero,
    .why-pro-cta,
    .home-zenius-hero,
    .coffee-experience-panel,
    .zenius-faq-intro,
    .coffee-lifestyle-section .card-actions
) .button-secondary {
    --cta-secondary-foreground: var(--cta-foam-white);
}

body:not(.cms-page) main .coffee-quiz-teaser .button-secondary {
    --cta-secondary-foreground: var(--cta-smooth-yellow);
}

/* A two-tone focus ring stays visible on both Rich and Smooth surfaces. */
body:not(.cms-page) .button:focus-visible {
    outline: 3px solid var(--cta-espresso-black);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--cta-foam-white);
}