/**
 * Optional visual theme aligned with Landing Page / Multiapps (Indigo · violet accents).
 * Enable with: html[data-visual-theme="landing"] (see base.html + portal home toggle).
 */

/* ── Light ─────────────────────────────────────────────── */
:root[data-visual-theme="landing"][data-theme="light"],
html[data-visual-theme="landing"][data-theme="light"] {
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --primary-light: #e0e7ff;
    --primary-glow: rgba(99, 102, 241, 0.28);
    --secondary: #818cf8;
    --accent: #a78bfa;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ec4899;
    --info: #0ea5e9;

    --sidebar-bg: #0b0c14;
    --sidebar-text: rgba(236, 237, 245, 0.55);
    --sidebar-text-active: #ecedf5;
    --sidebar-item-hover: rgba(255, 255, 255, 0.06);
    --sidebar-item-active-bg: rgba(129, 140, 248, 0.18);
    --sidebar-item-active-border: #818cf8;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-section-label: #64748b;

    --topbar-bg: rgba(253, 253, 253, 0.92);
    --topbar-border: rgba(11, 12, 20, 0.08);

    --bg-body: #fdfdfd;
    --surface: #ffffff;
    --surface-elevated: #f6f6f9;
    --text-main: #0b0c14;
    --text-muted: rgba(11, 12, 20, 0.55);
    --border: rgba(11, 12, 20, 0.1);

    --landing-mono-stack: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
}

html[data-visual-theme="landing"][data-theme="light"] {
    font-feature-settings: "ss01" 1, "cv02" 1;
}

/* ── Dark (Variation‑C inspired) ─────────────────────────── */
:root[data-visual-theme="landing"][data-theme="dark"],
html[data-visual-theme="landing"][data-theme="dark"] {
    --primary: #818cf8;
    --primary-hover: #a5b4fc;
    --primary-light: #312e81;
    --primary-glow: rgba(129, 140, 248, 0.25);
    --secondary: #a78bfa;
    --accent: #ec4899;
    --success: #4ade80;
    --warning: #fbbf24;
    --danger: #f472b6;
    --info: #38bdf8;

    --sidebar-bg: #08090d;
    --sidebar-text: rgba(232, 233, 238, 0.5);
    --sidebar-text-active: #e8e9ee;
    --sidebar-item-hover: rgba(255, 255, 255, 0.05);
    --sidebar-item-active-bg: rgba(129, 140, 248, 0.15);
    --sidebar-item-active-border: #818cf8;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-section-label: #575b7a;

    --topbar-bg: rgba(15, 16, 24, 0.92);
    --topbar-border: rgba(255, 255, 255, 0.07);

    --bg-body: #08090d;
    --surface: #0f1018;
    --surface-elevated: #13141f;
    --text-main: #e8e9ee;
    --text-muted: rgba(232, 233, 238, 0.52);
    --border: rgba(255, 255, 255, 0.08);

    --landing-mono-stack: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
}

/* Full-width canvas behind main area — subtle technical grid */
html[data-visual-theme="landing"] .portal-main {
    background-color: var(--bg-body);
    background-image: linear-gradient(
            rgba(120, 120, 160, 0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(120, 120, 160, 0.06) 1px,
            transparent 1px
        );
    background-size: 56px 56px;
    background-position: -1px -1px;
}

html[data-visual-theme="landing"][data-theme="dark"] .portal-main {
    background-image: linear-gradient(
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px
        );
}

/* Dashboard home embellishments when theme active */
html[data-visual-theme="landing"] .landing-welcome-chip {
    font-family: var(--landing-mono-stack, ui-monospace, monospace);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
    display: inline-block;
    margin-bottom: 0.65rem;
    background: var(--surface-elevated);
}

html[data-visual-theme="landing"] .welcome-greeting {
    letter-spacing: -0.03em;
    font-weight: 800;
}

html[data-visual-theme="landing"][data-theme="dark"] .module-card:hover {
    box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.25),
        0 12px 40px rgba(0, 0, 0, 0.35);
}

html[data-visual-theme="landing"][data-theme="light"] .module-card:hover {
    box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2),
        0 8px 24px rgba(99, 102, 241, 0.08);
}