/* ===========================================================
   MONUMENTAS — themem.css
   Rules for a saved theme (see themem.js). Everything is scoped to
   `html.themed`, so with no theme saved nothing here applies and the site looks
   exactly as built. Variables: --hdr-*, --body-*, --accent, --ftr-*.
   Loaded after the other stylesheets. Header, body and footer each get their own
   background, text colour and font.
=========================================================== */

/* ----- body ----- */

html.themed body{
    background:var(--body-bg);
    color:var(--body-fg);
    font-family:var(--body-font);
}

html.themed .hero h1,
html.themed .howItWorks h2,
html.themed .membersPreview h2,
html.themed .cmsSection h2,
html.themed .membersHero h1,
html.themed .membersSection > h2,
html.themed .step h3{
    color:var(--body-fg);
}

html.themed .step p,
html.themed .cmsSection p,
html.themed .stats .card span,
html.themed .membersEyebrow,
html.themed .joinNote,
html.themed .fieldHint,
html.themed .signinText,
html.themed .membersEmpty,
html.themed .previewEmpty,
html.themed .wallCount,
html.themed .planName,
html.themed .planPerMonth,
html.themed .fieldLabel,
html.themed .styleLabel,
html.themed .stepper{
    color:var(--body-fg);
    opacity:.7;
}

html.themed .step,
html.themed .stats .card,
html.themed .planOption,
html.themed .cardForm,
html.themed .siteGroup{
    background:var(--body-surface);
    color:var(--body-fg);
}

html.themed .planPrice,
html.themed .stats .card h2{
    color:var(--body-fg);
}

html.themed .planOption.selected{
    border-color:var(--accent);
}

html.themed .number,
html.themed .stepper li.active .stepDot{
    background:var(--accent);
    color:var(--accent-fg);
}

html.themed .stepper li.active{
    color:var(--body-fg);
    opacity:1;
}

html.themed .fieldInput{
    background:var(--body-bg);
    color:var(--body-fg);
    border-color:color-mix(in srgb, var(--body-fg) 22%, transparent);
}

html.themed .membersPrimary,
html.themed .heroButtons button,
html.themed #exploreButton{
    background:var(--accent);
    color:var(--accent-fg);
}

html.themed .heroButtons button:hover,
html.themed .membersPrimary:hover:not(:disabled),
html.themed .navbar .loginButton:hover{
    background:var(--accent);
    filter:brightness(.9);
}

html.themed .membersGhost{
    color:var(--body-fg);
    border-color:color-mix(in srgb, var(--body-fg) 30%, transparent);
}

html.themed .membersGhost:hover:not(:disabled){
    background:var(--body-surface);
    border-color:var(--body-fg);
}

/* ----- header ----- */

html.themed .navbar{
    background:color-mix(in srgb, var(--hdr-bg) 88%, transparent);
    color:var(--hdr-fg);
    font-family:var(--hdr-font);
    border-bottom-color:color-mix(in srgb, var(--hdr-fg) 14%, transparent);
}

html.themed .navbar nav h1,
html.themed .navbar nav a,
html.themed .navbar .navHomeLink{
    color:var(--hdr-fg);
}

html.themed .navbar button,
html.themed .navbar a{
    font-family:inherit;
}

html.themed .navbar .leaderboardButton,
html.themed .navbar .cmsNavLink{
    background:transparent;
    color:var(--hdr-fg);
    border-color:color-mix(in srgb, var(--hdr-fg) 28%, transparent);
}

html.themed .navbar .loginButton{
    background:var(--accent);
    color:var(--accent-fg);
}

/* ----- footer ----- */

html.themed footer{
    background:var(--ftr-bg);
    color:var(--ftr-fg);
    font-family:var(--ftr-font);
    border-top-color:color-mix(in srgb, var(--ftr-fg) 25%, transparent);
}

html.themed footer a,
html.themed footer p{
    color:var(--ftr-fg);
}