/* Token set re-implemented independently per docs/architecture/
   ui-ux-decisions.md's UI framework/log sections — no CMP-Toolkit values,
   names, or files copied; only the wholesale-token-swap mechanism and the
   neutral-base-plus-one-accent / 4-tier status-color decisions. */
:root {
    --afp-bg: #f7f8fa;
    --afp-surface: #ffffff;
    --afp-border: #e2e5e9;
    --afp-text: #1c1f24;
    --afp-muted: #6b7280;
    --afp-accent: #2f6fed;

    --afp-status-good: #2e9e5b;
    --afp-status-warning: #d9a01d;
    --afp-status-serious: #d9711d;
    --afp-status-critical: #d92d2d;
}

@media (prefers-color-scheme: dark) {
    :root {
        --afp-bg: #14171c;
        --afp-surface: #1c2027;
        --afp-border: #2c313a;
        --afp-text: #eceef1;
        --afp-muted: #9aa1ac;
        --afp-accent: #6c9bff;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--afp-bg);
    color: var(--afp-text);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.app-shell {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "topbar topbar"
        "sidebar content";
    min-height: 100vh;
}

.app-topbar {
    grid-area: topbar;
    padding: 0.75rem 1.25rem;
    background: var(--afp-surface);
    border-bottom: 1px solid var(--afp-border);
}

.app-brand {
    font-weight: 600;
    color: var(--afp-accent);
}

.app-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 0.5rem;
    background: var(--afp-surface);
    border-right: 1px solid var(--afp-border);
}

.app-nav-link {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    color: var(--afp-text);
    text-decoration: none;
}

.app-nav-link.active {
    background: var(--afp-accent);
    color: white;
}

.app-content {
    grid-area: content;
    padding: 1.5rem;
}

.app-kpi-strip {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.app-kpi-card {
    background: var(--afp-surface);
    border: 1px solid var(--afp-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    min-width: 160px;
}

.app-kpi-label {
    display: block;
    color: var(--afp-muted);
    font-size: 0.85rem;
}

.app-kpi-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
}

.app-widget {
    background: var(--afp-surface);
    border: 1px solid var(--afp-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

.app-sparkline {
    width: 100%;
    max-height: 160px;
    color: var(--afp-accent);
}

.app-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--afp-surface);
}

.app-table th, .app-table td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--afp-border);
}

.app-alert {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--afp-status-warning);
    background: color-mix(in srgb, var(--afp-status-warning) 15%, var(--afp-surface));
}

.app-status-good { color: var(--afp-status-good); }
.app-status-warning { color: var(--afp-status-warning); }
.app-status-serious { color: var(--afp-status-serious); }
.app-status-critical { color: var(--afp-status-critical); }