:root,
html[data-theme="dark"],
html.dark {
    --public-content-bg: #14182A;
    --public-content-surface: #000000;
    --public-content-border: rgba(255, 255, 255, 0.08);
    --main-bg: var(--public-content-bg);
    --iso-bg: var(--public-content-bg);
    --iso-surface: var(--public-content-surface);
    --iso-surface-alt: var(--public-content-surface);
    --iso-card-bg: var(--public-content-surface);
    --landing-bg: var(--public-content-bg);
    --landing-surface: var(--public-content-surface);
    --landing-card-bg: var(--public-content-surface);
    --prod-bg: var(--public-content-bg);
    --prod-surface: var(--public-content-surface);
    --prod-card: var(--public-content-surface);
    --card-bg: var(--public-content-surface);
    --bg-card: var(--public-content-surface);
    --aurora-bg: var(--public-content-bg);
    --aurora-bg-soft: var(--public-content-bg);
    --aurora-surface: var(--public-content-surface);
    --aurora-surface-strong: var(--public-content-surface);
}

html[data-theme="light"],
html.light {
    --public-content-bg: #EEF0F5;
    --public-content-surface: #FFFFFF;
    --public-content-border: rgba(15, 23, 42, 0.10);
    --main-bg: var(--public-content-bg);
    --iso-bg: var(--public-content-bg);
    --iso-surface: var(--public-content-surface);
    --iso-surface-alt: var(--public-content-surface);
    --iso-card-bg: var(--public-content-surface);
    --landing-bg: var(--public-content-bg);
    --landing-surface: var(--public-content-surface);
    --landing-card-bg: var(--public-content-surface);
    --prod-bg: var(--public-content-bg);
    --prod-surface: var(--public-content-surface);
    --prod-card: var(--public-content-surface);
    --card-bg: var(--public-content-surface);
    --bg-card: var(--public-content-surface);
    --aurora-bg: var(--public-content-bg);
    --aurora-bg-soft: var(--public-content-bg);
    --aurora-surface: var(--public-content-surface);
    --aurora-surface-strong: var(--public-content-surface);
}

/* Felles knappestandard for alle offentlige Lexico-sider. */
body:has(.public-shell) :is(
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    a[role="button"],
    a[class*="btn"],
    a[class*="button"],
    a[class*="cta"],
    a[class*="download"],
    a[class*="action"],
    #cookieConsentBtn
) {
    background: #1D4ED8 !important;
    background-image: none !important;
    border-color: #1D4ED8 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

body:has(.public-shell) :is(
    button,
    a[role="button"],
    a[class*="btn"],
    a[class*="button"],
    a[class*="cta"],
    a[class*="download"],
    a[class*="action"],
    #cookieConsentBtn
) * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

body:has(.public-shell) :is(
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    a[role="button"],
    a[class*="btn"],
    a[class*="button"],
    a[class*="cta"],
    a[class*="download"],
    a[class*="action"],
    #cookieConsentBtn
):hover {
    background: #1E40AF !important;
    background-image: none !important;
    border-color: #1E40AF !important;
    color: #FFFFFF !important;
}

body:has(.public-shell) :where(button, input, a):disabled,
body:has(.public-shell) :where(button, input, a)[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

body:has(.public-shell),
.public-shell,
.public-shell .public-main {
    background: var(--public-content-bg) !important;
}

.public-shell .public-main {
    padding: 80px clamp(16px, 2vw, 32px) 64px !important;
}

.public-main > .iso-page {
    width: 100%;
    min-width: 0;
}

.public-main > section,
.public-main > article,
.public-main > .press-container,
.public-main > .iso-page > section {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 24px !important;
    border: 1px solid var(--public-content-border) !important;
    border-radius: 16px;
    background-color: var(--public-content-surface) !important;
    background-image: none !important;
    overflow: hidden;
}

.public-main :where(
    [class$="-card"],
    [class*="-card "],
    [class$="-panel"],
    [class*="-panel "],
    [class$="-box"],
    [class*="-box "],
    .landing-card,
    .feature-card,
    .pricing-card,
    .press-factbox
) {
    background-color: var(--public-content-surface) !important;
    background-image: none !important;
}

@media (max-width: 900px) {
    .public-shell .public-main {
        padding-inline: 16px !important;
    }

    .public-main > section,
    .public-main > article,
    .public-main > .press-container,
    .public-main > .iso-page > section {
        margin-bottom: 16px !important;
        border-radius: 12px;
    }
}