/* ==========================================================================
   Mealovate Sunlit Shell
   Shared, page-agnostic finishing layer for the legendary public experience.
   Page styles still own their layouts; this file guarantees one bright canvas,
   one form language, one focus treatment, and one tactile surface vocabulary.
   ========================================================================== */

html.legendary,
html.legendary body {
    background-color: #fbf8f1 !important;
    color: var(--text-color);
}

html.legendary body > main:not(.cook-stage) {
    background-color: #fbf8f1 !important;
}

html.legendary body {
    font-family: var(--font-body);
    text-rendering: optimizeLegibility;
}

html.legendary :where(input, select, textarea) {
    border-color: var(--border-color);
    background-color: #fffdf8;
    color: var(--text-color);
}

html.legendary :where(input, select, textarea)::placeholder {
    color: #7c7164;
    opacity: 1;
}

html.legendary :where(button, a, input, select, textarea, summary):focus-visible {
    outline: 3px solid rgba(184, 78, 49, .46);
    outline-offset: 3px;
}

html.legendary :where(.ds-card, .modal-content, .auth-modal-content) {
    background-color: #fffdf8;
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

/* Public contrast contract. Page templates declare their surface role and
   receive a known AA-safe background/ink pair. Descendant components may use
   a different pair, but must declare that surface explicitly. */
html.legendary [data-contrast-surface="light"] {
    background-color: var(--contrast-light-bg);
    color: var(--contrast-light-ink);
}

html.legendary [data-contrast-surface="paper"] {
    background-color: var(--contrast-paper-bg);
    color: var(--contrast-light-ink);
}

html.legendary [data-contrast-surface="dark"] {
    background-color: var(--contrast-dark-bg);
    color: var(--contrast-dark-ink);
}

html.legendary [data-contrast-surface="accent"] {
    background-color: var(--contrast-accent-bg);
    color: var(--contrast-accent-ink);
}

html.legendary ::selection {
    background: #f1c6b5;
    color: #231f1a;
}

@media (prefers-contrast: more) {
    html.legendary {
        --border-color: rgba(35, 31, 26, .42);
        --text-secondary: #3f3932;
        --text-muted: #514a42;
    }
}