/*
 * MFA Advisor design tokens
 *
 * This is the canonical advisor-level theme. Page and component styles should
 * consume these semantic tokens instead of introducing page-specific colors,
 * font stacks, spacing scales, or shadows.
 */
:root,
.advisor-app {
    color-scheme: light;

    --advisor-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --advisor-font-display: "Newsreader", Georgia, "Times New Roman", serif;
    --advisor-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --advisor-color-canvas: #f2eadc;
    --advisor-color-canvas-deep: #e9dece;
    --advisor-color-surface: rgba(255, 253, 248, 0.86);
    /* The opaque form of the surface, for a card that must fully occlude the
       canvas grid behind it (charts, dense tables). The card system referenced
       this via a literal fallback; naming it keeps the two in step. */
    --advisor-color-surface-solid: #fffdf8;
    --advisor-color-surface-muted: rgba(245, 238, 226, 0.74);
    --advisor-color-surface-accent: rgba(247, 237, 217, 0.78);
    --advisor-color-surface-positive: rgba(234, 242, 236, 0.8);
    --advisor-color-surface-info: rgba(234, 242, 242, 0.8);
    --advisor-color-surface-negative: rgba(247, 235, 231, 0.82);
    --advisor-color-ink: #151917;
    --advisor-color-muted: #515b56;
    --advisor-color-subtle: #535c56;
    --advisor-color-border: #d9cdbb;
    --advisor-color-border-strong: #c4b49e;
    --advisor-color-accent: #80601d;
    --advisor-color-accent-strong: #654812;
    --advisor-color-positive: #3c7056;
    --advisor-color-positive-strong: #28563f;
    --advisor-color-negative: #a95243;
    --advisor-color-sidebar: #101714;
    --advisor-color-sidebar-ink: #f7f3ea;
    --advisor-color-tech-line: rgba(45, 94, 72, 0.052);
    --advisor-color-tech-glow: rgba(47, 111, 82, 0.078);
    --advisor-color-royal-glow: rgba(157, 111, 35, 0.085);
    --advisor-chart-1: #80601d;
    --advisor-chart-2: #3c7056;
    --advisor-chart-3: #60788a;
    --advisor-chart-4: #a9654d;
    --advisor-chart-5: #756d87;
    --advisor-chart-6: #b4935d;

    --advisor-space-1: 4px;
    --advisor-space-2: 8px;
    --advisor-space-3: 12px;
    --advisor-space-4: 16px;
    --advisor-space-5: 20px;
    --advisor-space-6: 24px;
    --advisor-space-7: 32px;
    --advisor-space-8: 40px;
    --advisor-space-9: 48px;
    --advisor-space-10: 64px;

    --advisor-radius-control: 6px;
    --advisor-radius-panel: 10px;
    --advisor-radius-feature: 14px;
    --advisor-radius-pill: 999px;

    --advisor-shadow-subtle: 0 1px 2px rgba(54, 43, 29, 0.04);
    --advisor-shadow-panel: 0 10px 30px rgba(54, 43, 29, 0.06);
    --advisor-shadow-modal: 0 24px 70px rgba(35, 28, 20, 0.2);
    --advisor-surface-filter: blur(16px) saturate(1.04);

    --advisor-content-width: 1200px;
    --advisor-reading-width: 68ch;
    --advisor-control-height: 40px;
    --advisor-transition: 160ms ease;

    /*
     * Compatibility aliases for the existing advisor UI. New code should use
     * the --advisor-* names above; these keep specialized legacy workspaces on
     * the same global palette and typography.
     */
    --book-bg: var(--advisor-color-canvas);
    --book-panel: var(--advisor-color-surface);
    --book-panel-soft: var(--advisor-color-surface-muted);
    /* Practice Cashflow referenced this in twelve places but nothing ever
       defined it, so every one of those surfaces silently fell back to pure
       white and fought the warm canvas. */
    --surface-elevated: var(--advisor-color-surface-solid, #fffdf8);
    --book-line: var(--advisor-color-border);
    --book-line-strong: var(--advisor-color-border-strong);
    --book-ink: var(--advisor-color-ink);
    --book-muted: var(--advisor-color-muted);
    --book-dim: var(--advisor-color-subtle);
    --book-sidebar: var(--advisor-color-sidebar);
    --book-gold: var(--advisor-color-accent);
    --book-green: var(--advisor-color-positive);
    --book-red: var(--advisor-color-negative);
    --book-radius: var(--advisor-radius-panel);
    --text-white: var(--advisor-color-ink);
    --text-muted: var(--advisor-color-muted);
    --text-dim: var(--advisor-color-subtle);
    --font-ui: var(--advisor-font-body);
    --font-display: var(--advisor-font-display);
    --radius: var(--advisor-radius-control);
    --radius-lg: var(--advisor-radius-feature);
}

.advisor-app {
    background: var(--advisor-color-canvas);
    color: var(--advisor-color-ink);
    font-family: var(--advisor-font-body);
}

/*
 * Cyber-royal atmosphere: a paper-white planning canvas with an etched data
 * grid and two extremely soft ambient fields. Content surfaces remain opaque
 * so the effect never competes with figures, forms, or tables.
 */
.advisor-app .workspace-main-content {
    background-color: var(--advisor-color-canvas);
    background-image:
        radial-gradient(circle at 12% 8%, var(--advisor-color-tech-glow), transparent 34%),
        radial-gradient(circle at 88% 4%, var(--advisor-color-royal-glow), transparent 28%),
        linear-gradient(var(--advisor-color-tech-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--advisor-color-tech-line) 1px, transparent 1px);
    background-position: 0 0, 0 0, 0 0, 0 0;
    background-size: auto, auto, 72px 72px, 72px 72px;
    animation: advisor-canvas-drift 42s ease-in-out infinite alternate;
}

.advisor-app .book-topbar {
    border-color: var(--advisor-color-border);
    background: rgba(250, 246, 238, 0.92);
    box-shadow: 0 1px 0 rgba(21, 25, 23, 0.025);
    backdrop-filter: blur(14px) saturate(1.05);
}

.advisor-app .workspace-sidebar {
    border-right-color: rgba(191, 196, 186, 0.16);
    background:
        radial-gradient(circle at 18% 4%, rgba(128, 96, 29, 0.12), transparent 26%),
        linear-gradient(180deg, #121b17, var(--advisor-color-sidebar) 58%);
}

@keyframes advisor-canvas-drift {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0;
    }

    100% {
        background-position: 22px 14px, -18px 10px, 8px 6px, 8px 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .advisor-app .workspace-main-content {
        animation: none;
    }
}

.advisor-app :where(h1, h2, h3, h4) {
    color: var(--advisor-color-ink);
    font-family: var(--advisor-font-display);
}

.advisor-app :where(button, input, select, textarea) {
    font-family: var(--advisor-font-body);
}