/*
 * Soft theme for the pages that keep their own content (promotions, news, events, app, contact,
 * franchise, legal pages and every detail page).
 *
 * [CHANGE 2026-10-24] what: re-colours the previous pages with the soft palette and type
 * · why: every page in the menu follows one theme
 * · verify: open /promotions, /news, /events, /app, /contact, /franchise — cream ground, DM Sans,
 *   sand cards, dark pill buttons, no dark bands
 *
 * The previous pages are built from utility classes that read colour tokens, so most of the work is
 * re-pointing those tokens; the rest turns their dark bands into the soft sand band.
 */

body.dz-classic {
    background: #f8f1ea;
    --color-shell: #f8f1ea;
    --color-surface: #ffffff;
    --color-surface-2: #f1e3d5;
    --color-line: #e6d3c0;
    --color-ink: #3b3b3b;

    --color-brand-50: #f1e3d5;
    --color-brand-100: #ead7c4;
    --color-brand-200: #dcbfa5;
    --color-brand-300: #dcbfa5;
    --color-brand-400: #0e7f77;
    --color-brand-500: #0c6f68;
    --color-brand-600: #0a5f59;
    --color-brand-700: #0c6f68;
    --color-brand-800: #094f4a;
    --color-brand-900: #073b37;

    --color-deep-700: #5a524c;
    --color-deep-800: #2b2b2b;
    --color-deep-900: #3b3b3b;

    --color-roast: #0c6f68;
    --color-roast-soft: #e4f0ee;

    --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
}

.dz-classic-main {
    font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
    color: #3b3b3b;
    background: #f8f1ea;
}
@layer dz {
    .dz-classic-main :is(h1, h2, h3) {
        font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
        color: #3b3b3b;
        letter-spacing: -0.01em;
    }
    .dz-classic-main a { text-decoration: none; }
}

/* ---- page masthead: dark band -> soft sand band, big centred title ---- */
.dz-classic-main section.bg-deep-900 {
    background: #efe2d4 !important;
    color: #3b3b3b !important;
}
.dz-classic-main section.bg-deep-900 .text-white { color: #3b3b3b !important; }
.dz-classic-main section.bg-deep-900 [class*="text-white/"] { color: #6f6660 !important; }
.dz-classic-main section.bg-deep-900 .text-brand-300 { color: #0c6f68 !important; }

.dz-classic-main section.bg-deep-900:has(> .wrap > h1) { text-align: center; }
.dz-classic-main section.bg-deep-900:has(> .wrap > h1) > .wrap { padding-top: 96px; padding-bottom: 72px; }
.dz-classic-main section.bg-deep-900:has(> .wrap > h1) h1 {
    font: 700 clamp(34px, 5.6vw, 76px)/0.98 'DM Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.dz-classic-main section.bg-deep-900:has(> .wrap > h1) .eyebrow {
    font: italic 500 clamp(22px, 2.4vw, 32px)/1.1 'Playfair Display', serif;
    text-transform: none;
    letter-spacing: 0;
}
.dz-classic-main section.bg-deep-900:has(> .wrap > h1) p { margin-left: auto; margin-right: auto; font-size: 17px; }

/* ---- cards ---- */
.dz-classic-main [class*="rounded-2xl"][class*="border"],
.dz-classic-main [class*="rounded-3xl"][class*="border"] {
    border-color: #e6d3c0;
    border-radius: 18px;
}
.dz-classic-main [class*="rounded-2xl"][class*="border"][class*="bg-surface"]:hover { border-color: #dcbfa5; }

/* ---- buttons: dark pill, teal on hover ---- */
.dz-classic-main a.bg-brand-500,
.dz-classic-main button.bg-brand-500,
.dz-classic-main a.bg-deep-900,
.dz-classic-main button.bg-deep-900,
.dz-classic-main button[type="submit"] {
    background: #3b3b3b !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    border-color: #3b3b3b !important;
}
.dz-classic-main a.bg-brand-500:hover,
.dz-classic-main button.bg-brand-500:hover,
.dz-classic-main a.bg-deep-900:hover,
.dz-classic-main button.bg-deep-900:hover,
.dz-classic-main button[type="submit"]:hover {
    background: #0c6f68 !important;
    border-color: #0c6f68 !important;
}

/* ---- filter pills (news categories, search types): the soft sand pill ---- */
.dz-classic-main nav a.rounded-full {
    border-color: #e6d3c0;
    background: #ffffff;
    color: #3b3b3b;
}
.dz-classic-main nav a.rounded-full.bg-deep-900,
.dz-classic-main nav a.rounded-full:hover {
    background: #dcbfa5 !important;
    border-color: #dcbfa5 !important;
    color: #ffffff !important;
}

/* ---- form fields ---- */
.dz-classic-main input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.dz-classic-main select,
.dz-classic-main textarea {
    border-color: #e6d3c0;
    background: #ffffff;
    border-radius: 12px;
    font-family: 'DM Sans', sans-serif;
}
.dz-classic-main input:focus,
.dz-classic-main select:focus,
.dz-classic-main textarea:focus {
    outline: 2px solid #0c6f68;
    outline-offset: 1px;
    border-color: #0c6f68;
}

/* ---- long-form text (news articles, legal pages) ---- */
.dz-classic-main .prose-site a { color: #0c6f68; text-decoration: underline; }

/* the event package page has its own block; bring it onto the soft palette */
.dz-classic-main .evp-title { font-family: 'DM Sans', sans-serif; color: #3b3b3b; }
.dz-classic-main .evp-eyebrow { font: italic 500 22px/1.1 'Playfair Display', serif; color: #0c6f68; text-transform: none; letter-spacing: 0; }

@media (max-width: 767px) {
    .dz-classic-main section.bg-deep-900:has(> .wrap > h1) > .wrap { padding-top: 64px; padding-bottom: 48px; }
}

/* The design's sheets (layer "wp") size every h2, colour every link pink and space every paragraph.
   Layer "dz" sits above them and below the pages' own classes, so it puts plain elements back the way
   the previous pages expected, and every utility or prose class still wins. */
@layer dz {
    .dz-classic-main :is(h1, h2, h3, h4, h5, h6) {
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        text-transform: none;
        margin: 0;
    }
    .dz-classic-main :is(p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
    .dz-classic-main a { color: inherit; }
}