/* ==========================================================================
   MailSprout garden theme (Sproutwick Post & Garden)
   Loaded LAST by every app layout. Restyles through the app's own design
   tokens, so layouts, forms and handlers stay untouched.
   Fonts: Caprasimo (display, large sizes only) + Gabarito (text/UI), from google/fonts,
   self-hosted WOFF2, SIL Open Font License (fonts/OFL-*.txt). No font CDN.
   Palette contrast (WCAG, computed): ink #22301F on paper #F6EFDC 12.1:1,
   soft #4A5642 on paper 6.8:1, white on leaf #2F6B2A 6.5:1, leaf on paper 5.6:1,
   paper on moss #1F3A24 10.8:1, sage #C8D2B4 on moss 7.9:1, sun on moss 6.9:1,
   dark mode: #F3EEDC on #0F1A12 15.4:1, muted #B4BCA4 on card 8.2:1.
   ========================================================================== */

@font-face { font-family: "Caprasimo"; src: url("fonts/Caprasimo.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gabarito"; src: url("fonts/Gabarito.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }

/* ---------- Light tokens (refactor UI) ---------- */
html:not([data-theme="dark"]) {
    --ms-paper: #F6EFDC; --ms-paper-2: #EFE3C4; --ms-card: #FFFCF4; --ms-ink: #22301F; --ms-soft: #4A5642;
    --ms-moss: #1F3A24; --ms-leaf: #2F6B2A; --ms-lime: #8CBF26; --ms-soil: #6B4A2E; --ms-terra: #A44A26; --ms-sun: #F2B830;

    --color-text:           #22301F;
    --color-text-secondary: #2E3B2A;
    --color-text-muted:     #4A5642;
    --color-text-disabled:  #6F7461;
    --color-page-bg:        #F6EFDC;
    --color-card-bg:        #FFFCF4;
    --color-hover-bg:       #F3EAD2;
    --color-active-bg:      #EFE3C4;
    --color-subtle-bg:      #FAF5E6;
    --color-bg-subtle:      #FAF5E6;
    --color-banner-bg:      #EFE3C4;
    --color-border:         #E4D7B6;
    --color-border-strong:  #CBBB93;
    --color-success:        #2F6B2A;
    --color-success-dark:   #1F3A24;
    --color-error:          #B3261E;
    --color-error-dark:     #8C1D18;
    --color-warning:        #9A4A0C;
    --color-warning-dark:   #7A3A08;
    --color-info:           #1F5F8B;
    --chart-1:              #8CBF26;
    --chart-2:              #2F6B2A;
    --chart-3:              #9EC3C9;
    --chart-4:              #F2B830;
    --chart-5:              #E9879A;
    --chart-6:              #6B4A2E;
    --illust-teal:          rgba(47, 107, 42, 0.16);
    --illust-teal-bold:     rgba(47, 107, 42, 0.30);
    --shadow-card:          0 1px 0 rgba(31, 58, 36, 0.06), 0 2px 10px rgba(107, 74, 46, 0.06);
    --shadow-dropdown:      0 6px 22px rgba(31, 58, 36, 0.14), 0 0 1px rgba(31, 58, 36, 0.2);
}
/* Primary colour only for the default scheme, so a customer's chosen colour scheme still applies */
html:not([data-theme="dark"]):not([data-color-scheme]),
html:not([data-theme="dark"])[data-color-scheme="default"],
html:not([data-theme="dark"])[data-color-scheme=""] {
    --color-teal:           #2F6B2A;
    --color-teal-hover:     #24561F;
    --color-teal-active:    #1F3A24;
    --color-teal-ring:      rgba(47, 107, 42, 0.20);
    --color-teal-light:     #EEF2DA;
    --color-border-focus:   #2F6B2A;
}

/* ---------- Dark tokens: night garden ---------- */
html[data-theme="dark"] {
    --color-text:           #F3EEDC;
    --color-text-secondary: #DCD8C4;
    --color-text-muted:     #B4BCA4;
    --color-page-bg:        #0F1A12;
    --color-card-bg:        #162419;
    --color-hover-bg:       #1D2E20;
    --color-active-bg:      #243829;
    --color-subtle-bg:      #122016;
    --color-bg-subtle:      #122016;
    --color-banner-bg:      #1A2A1D;
    --color-border:         #2C4231;
    --color-border-strong:  #3B573F;
}
html[data-theme="dark"]:not([data-color-scheme]),
html[data-theme="dark"][data-color-scheme="default"],
html[data-theme="dark"][data-color-scheme=""] {
    --color-teal:           #A6D44A;
    --color-teal-hover:     #B7E05F;
    --color-teal-active:    #8CBF26;
    --color-teal-ring:      rgba(166, 212, 74, 0.22);
    --color-teal-light:     rgba(166, 212, 74, 0.10);
    --color-border-focus:   #A6D44A;
}

/* ---------- Type ---------- */
:root {
    --font-family: "Gabarito", system-ui, sans-serif;
    --ms-display: "Caprasimo", Georgia, serif;
    --radius-input: 10px;
    --radius-card: 16px;
    --radius-lg: 20px;
}
body { font-family: var(--font-family); }
html { font-synthesis: style; }
/* Caprasimo is a display face: only large headings use it. Smaller titles stay in Gabarito. */
h1, .mc-content-header-inner h1, .auth-card-title, .mc-banner-title, .ms-display {
    font-family: var(--ms-display);
    font-weight: 400;
    letter-spacing: 0;
}
h2, h3, .mc-card-title, .mc-content-header-inner h2, .mc-empty-state-title, .mc-modal-title { font-weight: 700; }
.mc-content-header-inner h1 { font-size: 26px; line-height: 1.15; }
button, input, select, textarea { font-family: inherit; }

/* ---------- Visible keyboard focus ---------- */
:focus-visible { outline: 3px solid var(--color-border-focus, #2F6B2A); outline-offset: 2px; }
.mc-sidebar :focus-visible { outline-color: #F2B830; }

/* ---------- Buttons: rounded garden pills ---------- */
.mc-btn { border-radius: 999px; font-weight: 700; }
.mc-btn-group .mc-btn, .mc-input-group .mc-btn, [class*="-group"] > .mc-btn { border-radius: var(--radius-input); }
.mc-btn-primary { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
html:not([data-theme="dark"]) .mc-btn-primary:hover { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 2px 8px rgba(31, 58, 36, 0.22); }

/* ---------- Sidebar: moss green potting shed ---------- */
.mc-sidebar {
    --color-card-bg:        #1F3A24;
    --color-text:           #F6EFDC;
    --color-text-secondary: #E8E3CE;
    --color-text-muted:     #C8D2B4;
    --color-hover-bg:       rgba(255, 252, 244, 0.09);
    --color-active-bg:      rgba(255, 252, 244, 0.15);
    --color-border:         rgba(255, 252, 244, 0.13);
    --color-border-strong:  rgba(255, 252, 244, 0.24);
    --color-teal:           #F2B830;
    --color-teal-hover:     #F5C655;
    background: #1F3A24;
    color: #F6EFDC;
    border-right-color: #17301C;
}
html[data-theme="dark"] .mc-sidebar { --color-card-bg: #12231A; background: #12231A; }
.mc-sidebar .mc-nav-item.active { background: #FFFCF4; color: #1F3A24; font-weight: 700; }
.mc-sidebar .mc-nav-item.active .mc-nav-item-icon { color: #2F6B2A; }
.mc-sidebar .mc-nav-group-label { color: #F2B830; letter-spacing: .12em; font-weight: 800; }
.mc-sidebar .mc-nav-badge { color: #1F3A24; }
.mc-sidebar .mc-sidebar-logo { height: 64px; }
.mc-sidebar .mc-sidebar-logo img { height: 38px; }
/* On the moss sidebar always show the light-on-dark logo */
.mc-sidebar .mc-logo-light { display: none !important; }
.mc-sidebar .mc-logo-dark { display: inline !important; }

/* ---------- Cards, content header, tables ---------- */
.mc-content-header { background: var(--color-card-bg); }
html:not([data-theme="dark"]) .mc-topbar { background: rgba(255, 252, 244, 0.92); }
.mc-card { border-radius: var(--radius-card); }
html:not([data-theme="dark"]) .mc-table thead th { background: #F3EAD2; color: #22301F; }

/* ---------- Empty states: Burdock tends the empty beds ---------- */
.mc-empty-state-icon {
    width: 120px; height: 120px;
    background: url("art/burdock-hedgehog.webp") center / contain no-repeat;
}
.mc-empty-state-icon > * { opacity: 0; }

/* ---------- Auth pages (log in, register, forgot, reset, 2FA, admin log in) ---------- */
.ms-auth-art { display: none; }
html:not([data-theme="dark"]) body.ms-auth { background: #F6EFDC; }
body.ms-auth::before { opacity: 0.25; }
.ms-auth .auth-card { border: 2px solid #E4D7B6; box-shadow: 0 2px 0 #E4D7B6, 0 16px 40px rgba(31, 58, 36, 0.08); }
html[data-theme="dark"] .ms-auth .auth-card { border-color: #2C4231; box-shadow: none; }
.ms-auth .auth-card-logo img { height: 56px; }
.ms-auth .auth-card-title { font-size: 1.75rem; color: var(--color-text); }
@media (min-width: 1024px) {
    body.ms-auth { padding-left: 44vw; }
    .ms-auth-art {
        display: block; position: fixed; z-index: 2; left: 0; top: 0; bottom: 0; width: 44vw;
        background: #1F3A24; overflow: hidden;
    }
    .ms-auth-art img.ms-auth-hero { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; display: block; }
    .ms-auth-art .ms-auth-note {
        position: absolute; left: 28px; right: 28px; bottom: 28px; max-width: 26rem;
        background: rgba(255, 252, 244, 0.95); color: #22301F; border: 2px solid #1F3A24; border-radius: 16px;
        padding: 14px 18px; box-shadow: 0 3px 0 #1F3A24;
    }
    .ms-auth-art .ms-auth-note strong { display: block; font-family: var(--ms-display); font-weight: 400; font-size: 1.6rem; line-height: 1.15; margin-bottom: 4px; }
    .ms-auth-art .ms-auth-note span { font-size: .95rem; line-height: 1.45; }
}

/* ---------- Automation builder header ---------- */
.mc-auto-header-logo img { height: 30px; }

/* Error and status pages */
.ms-error-art { display: block; width: 168px; max-width: 45vw; height: auto; margin: 0 auto 1rem; }
body.ms-error { background: #F6EFDC; color: #22301F; font-family: "Gabarito", system-ui, sans-serif; }
body.ms-error .display-1, body.ms-error h1, body.ms-error h2.h2, body.ms-error h3.h2 { font-family: "Caprasimo", Georgia, serif; font-weight: 400; color: #1F3A24; }
body.ms-error h2, body.ms-error h3 { color: #1F3A24; }
body.ms-error .btn-dark { background: #1F3A24; border-color: #1F3A24; color: #FFFCF4; }
body.ms-error .btn-dark:hover { background: #2F6B2A; border-color: #2F6B2A; }
/* Bootstrap gutters pushed the error layout 8px past narrow viewports */
body.ms-error .row { margin-left: 0; margin-right: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
}