/* ============================================================
   Content Platform — app-level styling on the Richardson DS.
   Light is the default (DS base tokens); dark overrides below.
   ============================================================ */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: var(--surface-page);
    color: var(--text-body);
    font-family: var(--font-body);
}

.cp-app-root {
    height: 100vh;
}

a:focus-visible,
button:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* ---- Dark theme overrides (token remap) ---- */
[data-cp-theme="dark"] {
    --surface-page: #130B30;
    --surface-card: #1E1547;
    --surface-muted: #241A55;
    --surface-inverse: #1E1547;
    --text-strong: #FFFFFF;
    --text-body: rgba(255, 255, 255, 0.84);
    --text-muted: rgba(255, 255, 255, 0.55);
    --border-subtle: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.20);
    --desert-200: rgba(255, 255, 255, 0.10);
    --desert-300: rgba(255, 255, 255, 0.22);
    --plum-050: rgba(255, 255, 255, 0.06);
    --plum-100: rgba(255, 255, 255, 0.12);
    --text-link: #94B7BB;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
}

/* ---- Theme toggle icon visibility (vanilla, no Blazor needed) ---- */
[data-cp-theme="light"] .cp-icon-sun { display: none; }
[data-cp-theme="dark"] .cp-icon-moon { display: none; }

/* ---- Custom scrollbars on scroll regions ---- */
.cp-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.cp-scroll::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.cp-scroll::-webkit-scrollbar-track { background: transparent; }

@keyframes cpspin { to { transform: rotate(360deg); } }

::selection { background: rgba(164, 90, 149, 0.25); }

.cp-app-root ul { margin: 0; }

/* ---- Sidebar nav links ---- */
.cp-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--text-body);
    text-decoration: none;
    transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.cp-nav:hover { background: var(--plum-050); text-decoration: none; color: var(--text-strong); }
.cp-nav.active { background: color-mix(in srgb, var(--ocean) 12%, transparent); color: var(--text-strong); }
.cp-nav .cp-nav-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--lilac); margin-left: auto; opacity: 0; }
.cp-nav.active .cp-nav-dot { opacity: 1; }