html:root {
    --site-bg: #eef0f2;
    --site-surface: #ffffff;
    --site-surface-soft: #f7f8f9;
    --site-text: #1f2933;
    --site-text-soft: #64707d;
    --site-border: #d6d9de;
    --site-accent: #4b5563;
    --site-accent-dark: #374151;
    --site-shadow: 0 18px 45px rgba(31, 41, 51, 0.10);

    --fp-article-content-bg: #ffffff;
    --fp-article-content-text: #1f2933;
    --fp-article-content-paragraph-text: #52606d;
    --fp-article-content-border: rgba(75, 85, 99, 0.18);
    --fp-article-content-radius: 22px;
    --fp-article-content-shadow: 0 24px 70px rgba(31, 41, 51, 0.10);

    --fpa-primary: #4b5563;
    --fpa-surface: #ffffff;
}

body {
    background:
        radial-gradient(circle at top left, rgba(107, 114, 128, 0.16), transparent 30rem),
        linear-gradient(180deg, #eef0f2 0%, #f8f9fa 100%);
    color: var(--site-text);
}

.site-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
}

.site-logo__img {
    display: block;
    width: auto;
    height: 40px;
    max-width: 220px;
    object-fit: contain;
}

.site-logo__text {
    font-weight: 700;
    font-size: 1.25rem;
    color: inherit;
}

.site-header {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--site-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.site-nav__link:hover,
.site-nav__link.is-active {
    background: rgba(75, 85, 99, 0.12);
    color: var(--site-accent-dark);
}

.site-hero,
.demo-banner__inner,
.article-card,
.article-read,
.article-cta,
.site-empty,
.card,
.form-card,
.panel,
.fpa-card,
.settings-card,
.license-card {
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    box-shadow: var(--site-shadow);
}

.site-btn--primary,
.button,
button,
input[type="submit"] {
    background: var(--site-accent);
    color: #ffffff;
}

.site-btn--primary:hover,
.button:hover,
button:hover,
input[type="submit"]:hover {
    background: var(--site-accent-dark);
    color: #ffffff;
}

.button.secondary,
button.secondary {
    background: #ffffff;
    color: var(--site-accent-dark);
    border: 1px solid rgba(75, 85, 99, 0.35);
    box-shadow: none;
}

.button.secondary:hover,
button.secondary:hover {
    background: #f1f3f5;
    color: #111827;
    border-color: rgba(75, 85, 99, 0.55);
}

input,
select,
textarea {
    background-color: #fbfcfd;
    color: #111827;
    border: 1px solid #c5cad1;
}

input:focus,
select:focus,
textarea:focus {
    background-color: #ffffff;
    border-color: var(--site-accent);
    outline: 3px solid rgba(75, 85, 99, 0.16);
    outline-offset: 1px;
}

table {
    background: #ffffff;
    border-color: var(--site-border);
}

th {
    background: #f3f4f6;
    color: #374151;
}

td {
    border-color: #e2e5e9;
}

.status-pill,
.status {
    border-color: rgba(75, 85, 99, 0.22);
}

.asset-stat-card {
    background: #ffffff;
    border-color: #d8dce2;
    box-shadow: 0 14px 32px rgba(31, 41, 51, 0.08);
}

.asset-stat-total {
    color: #4b5563;
}

.asset-stat-active {
    color: #2f7d57;
}

.asset-stat-retired {
    color: #9a6b22;
}

.asset-stat-showing {
    color: #5b6472;
}

.asset-hero {
    background:
        linear-gradient(135deg, rgba(75, 85, 99, 0.10), rgba(255, 255, 255, 0.96));
    border: 1px solid var(--site-border);
    box-shadow: var(--site-shadow);
}

.asset-tag {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.site-footer {
    background: var(--site-surface);
    border-top: 1px solid var(--site-border);
}