/*
 * 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: #f9f4e7;
    --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;

    /*
     * Folio values are staged behind .advisor-folio while routes migrate.
     * This is an implementation boundary, not a runtime theme or user choice.
     */
    --advisor-folio-font-body: "Finn Instrument", "Inter", sans-serif;
    --advisor-folio-font-display: "Finn Fraunces", "Newsreader", Georgia, serif;
    --advisor-folio-font-mono: "Finn Plex Mono", "SFMono-Regular", Consolas, monospace;
    --advisor-folio-canvas: #f9f4e7;
    --advisor-folio-canvas-deep: #e9d9b9;
    --advisor-folio-paper: #fffaf0;
    --advisor-folio-paper-solid: #fffdf8;
    --advisor-folio-ink: #171b18;
    --advisor-folio-muted: #59615b;
    --advisor-folio-subtle: #74786f;
    --advisor-folio-border: #d8c9ad;
    --advisor-folio-border-strong: #bfae8d;
    --advisor-folio-emerald: #236f5d;
    --advisor-folio-emerald-deep: #10231c;
    --advisor-folio-emerald-soft: #dfe9e2;
    --advisor-folio-gold: #a67708;
    --advisor-folio-gold-bright: #d4aa3f;
    --advisor-folio-gold-lumen: #efd37a;
    --advisor-folio-gold-soft: #f8edca;
    --advisor-folio-bronze: #7b5a1d;
    --advisor-folio-bronze-deep: #5f4314;

    --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-folio {
    --advisor-font-body: var(--advisor-folio-font-body);
    --advisor-font-display: var(--advisor-folio-font-display);
    --advisor-font-mono: var(--advisor-folio-font-mono);
    --advisor-color-canvas: var(--advisor-folio-canvas);
    --advisor-color-canvas-deep: var(--advisor-folio-canvas-deep);
    --advisor-color-surface: rgba(255, 250, 240, 0.9);
    --advisor-color-surface-solid: var(--advisor-folio-paper-solid);
    --advisor-color-surface-muted: rgba(239, 228, 201, 0.68);
    --advisor-color-surface-accent: rgba(248, 237, 202, 0.78);
    --advisor-color-ink: var(--advisor-folio-ink);
    --advisor-color-muted: var(--advisor-folio-muted);
    --advisor-color-subtle: var(--advisor-folio-subtle);
    --advisor-color-border: var(--advisor-folio-border);
    --advisor-color-border-strong: var(--advisor-folio-border-strong);
    --advisor-color-accent: var(--advisor-folio-gold);
    --advisor-color-accent-strong: var(--advisor-folio-bronze-deep);
    --advisor-color-positive: var(--advisor-folio-emerald);
    --advisor-color-positive-strong: var(--advisor-folio-emerald-deep);
    --advisor-chart-1: var(--advisor-folio-emerald);
    --advisor-chart-2: #75a982;
    --advisor-chart-3: #607f94;
    --advisor-chart-4: #c97b67;
    --advisor-chart-5: var(--advisor-folio-gold-bright);
    --advisor-chart-6: #8d7ca4;
    color: var(--advisor-color-ink);
    font-family: var(--advisor-font-body);
}

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

/*
 * The application canvas.
 *
 * This previously carried six stacked background layers -- a grid, three
 * radial fields and a vertical champagne gradient -- sized `100% 100%` with
 * `background-attachment: local` and no `background-repeat`, on an element
 * that is `height:100vh; overflow-y:auto`. The gradient was therefore sized
 * and TILED against the scroll box rather than the document, so its dark stop
 * at 56% re-appeared in the middle of the viewport at every scroll position.
 * A 42s `advisor-document-tide` animation moved it continuously on top of that.
 *
 * That was a reported bug, not a style choice. The canvas is now static and
 * carries only a measured architectural grid. Section rhythm belongs to
 * sections (`.folio-band` for a hard cut, `.folio-fade` for a subtle one) --
 * never to a tonal gradient painted behind the whole page. See
 * docs/architecture/folio-design-rules.md sections 3 and 6.
 */
.advisor-app .workspace-main-content {
    --advisor-canvas-grid-size: 64px;
    --advisor-canvas-grid-line: rgba(78, 66, 43, 0.035);
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    background-color: var(--advisor-color-canvas);
    background-image:
        linear-gradient(var(--advisor-canvas-grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--advisor-canvas-grid-line) 1px, transparent 1px);
    background-position: -1px -1px;
    background-size: var(--advisor-canvas-grid-size) var(--advisor-canvas-grid-size);
}

.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%);
}

.advisor-app .workspace-sidebar,
.advisor-app .book-topbar {
    font-family: var(--advisor-folio-font-body);
}

.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);
}

.advisor-app {
    scrollbar-color: rgba(35, 111, 93, 0.54) rgba(216, 201, 173, 0.24);
    scrollbar-width: thin;
}

.advisor-app ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.advisor-app ::-webkit-scrollbar-track {
    background: rgba(216, 201, 173, 0.2);
}

.advisor-app ::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(35, 111, 93, 0.52);
    background-clip: padding-box;
}

.advisor-app ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(35, 111, 93, 0.72);
}