:root {
    color-scheme: light;
    --app-bg: #f3f4f6;
    --surface: #ffffff;
    --surface-muted: #f9fafb;
    --surface-soft: #fef2f2;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border: #f3f4f6;
    --border-strong: #e5e7eb;
    --primary: #ef4444;
    --primary-hover: #dc2626;
    --shadow-color: rgba(15, 23, 42, 0.08);

    /* Shared shell tokens: the navigation follows the selected app theme. */
    --sidebar-bg: #e2e8f0;
    --sidebar-surface: #ffffff;
    --sidebar-border: #cbd5e1;
    --sidebar-text: #475569;
    --sidebar-text-strong: #0f172a;
    --sidebar-muted: #64748b;
    --sidebar-hover: #cbd5e1;
    --sidebar-active: #fee2e2;
    --sidebar-active-text: #dc2626;
    --sidebar-avatar-bg: #cbd5e1;
    --sidebar-overlay: rgba(15, 23, 42, 0.35);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --app-bg: #111827;
    --surface: #1f2937;
    --surface-muted: #374151;
    --surface-soft: #451a1a;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    --border: #374151;
    --border-strong: #4b5563;
    --primary: #f87171;
    --primary-hover: #ef4444;
    --shadow-color: rgba(0, 0, 0, 0.3);

    --sidebar-bg: #0f172a;
    --sidebar-surface: #1f2937;
    --sidebar-border: #374151;
    --sidebar-text: #cbd5e1;
    --sidebar-text-strong: #f9fafb;
    --sidebar-muted: #94a3b8;
    --sidebar-hover: #374151;
    --sidebar-active: #1e293b;
    --sidebar-active-text: #f87171;
    --sidebar-avatar-bg: #374151;
    --sidebar-overlay: rgba(0, 0, 0, 0.6);
}