/* ============================================================
 S TAGE 9 — Preferences: theme, compact, reduced motion            *
 ============================================================ */

/* Light theme override */
html[data-theme="light"] {
    --vx-bg-primary: #f4f4f7;
    --vx-bg-secondary: #ffffff;
    --vx-bg-tertiary: #ebebef;
    --vx-bg-elevated: #ffffff;
    --vx-surface: #f4f4f7;
    --vx-surface-hover: #e4e4ea;

    --vx-border-subtle: rgba(0,0,0,0.06);
    --vx-border-default: rgba(0,0,0,0.10);
    --vx-border-strong: rgba(0,0,0,0.18);

    --vx-text-primary: #131318;
    --vx-text-secondary: #4a4a56;
    --vx-text-tertiary: #6e6e7c;
    --vx-text-muted: #a1a1ad;

    --vx-accent: #4a7d86;
    --vx-accent-hover: #3b6b73;
    --vx-accent-muted: rgba(74,125,134,0.12);

    --vx-void: #6e5f9b;
    --vx-void-muted: rgba(110,95,155,0.12);
    --vx-admin: #a87a4a;
    --vx-admin-muted: rgba(168,122,74,0.12);
    --vx-member: #4a7d86;
    --vx-member-muted: rgba(74,125,134,0.12);

    --vx-danger: #b94b4b;
    --vx-danger-muted: rgba(185,75,75,0.10);
    --vx-warning: #a8874a;
    --vx-warning-muted: rgba(168,135,74,0.10);
    --vx-success: #3fa377;
    --vx-success-muted: rgba(63,163,119,0.10);
    --vx-info: #4a7aad;
    --vx-info-muted: rgba(74,122,173,0.10);
}
html[data-theme="light"] body {
    background: var(--vx-bg-primary);
    color: var(--vx-text-primary);
}
html[data-theme="light"] .vx-sidebar {
    background: var(--vx-bg-secondary);
}
html[data-theme="light"] .vx-topbar {
    background: rgba(255,255,255,0.78);
}
html[data-theme="light"] .vx-content {
    background-image:
    linear-gradient(rgba(0,0,0,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.018) 1px, transparent 1px);
}

/* Compact mode */
html.vx-compact {
    --vx-space-3: 0.5rem;
    --vx-space-4: 0.75rem;
    --vx-space-5: 0.9rem;
    --vx-space-6: 1.1rem;
    --vx-space-8: 1.5rem;
}
html.vx-compact .vx-card__body { padding: var(--vx-space-4); }
html.vx-compact .vx-card__header { padding: var(--vx-space-3) var(--vx-space-4); }
html.vx-compact .vx-content { padding: var(--vx-space-4); }

/* Reduced motion */
html.vx-reduced-motion *,
html.vx-reduced-motion *::before,
html.vx-reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}
html.vx-reduced-motion .vx-dot--live { animation: none !important; }