:root {
    --m2p-bg-app: var(--background);
    --m2p-bg-sidebar: var(--surface);
    --m2p-bg-surface: var(--surface);
    --m2p-bg-surface-muted: var(--surface_muted);
    --m2p-bg-surface-hover: var(--surface_hover);
    --m2p-border-subtle: var(--border);
    --m2p-border-strong: var(--border_strong);
    --m2p-text-primary: var(--text_main);
    --m2p-text-secondary: var(--text_muted);
    --m2p-text-muted: var(--text_soft);
    --m2p-accent: var(--accent);
    --m2p-accent-hover: var(--accent_hover);
    --m2p-accent-text: var(--accent_text);
    --m2p-accent-soft: var(--selected_background);
    --m2p-accent-border: var(--selected_border);
    --m2p-selected-bg: var(--selected_background);
    --m2p-selected-border: var(--selected_border);
    --m2p-focus-ring: color-mix(in srgb, var(--accent) 18%, transparent);
}

:root[data-theme="light"] {
    --m2p-bg-app: #F8FAFC;
    --m2p-bg-sidebar: #FFFFFF;
    --m2p-bg-surface: #FFFFFF;
    --m2p-bg-surface-muted: #F1F5F9;
    --m2p-bg-surface-hover: #F8FAFC;
    --m2p-border-subtle: #E2E8F0;
    --m2p-border-strong: #CBD5E1;
    --m2p-text-primary: #0F172A;
    --m2p-text-secondary: #475569;
    --m2p-text-muted: #64748B;
    --m2p-accent: #7C3AED;
    --m2p-accent-hover: #6D28D9;
    --m2p-accent-text: #FFFFFF;
    --m2p-accent-soft: #F5F3FF;
    --m2p-accent-border: #A78BFA;
    --m2p-selected-bg: #F5F3FF;
    --m2p-selected-border: #A78BFA;
    --m2p-focus-ring: rgba(124, 58, 237, .14);

    --background: var(--m2p-bg-app);
    --surface: var(--m2p-bg-surface);
    --surface_elevated: var(--m2p-bg-surface);
    --surface_muted: var(--m2p-bg-surface-muted);
    --surface_hover: var(--m2p-bg-surface-hover);
    --border: var(--m2p-border-subtle);
    --border_strong: var(--m2p-border-strong);
    --text_main: var(--m2p-text-primary);
    --text_muted: var(--m2p-text-secondary);
    --text_soft: var(--m2p-text-muted);
    --accent: var(--m2p-accent);
    --accent_hover: var(--m2p-accent-hover);
    --accent_text: var(--m2p-accent-text);
    --thumbnail_border: var(--m2p-border-subtle);
    --selected_border: var(--m2p-selected-border);
    --selected_background: var(--m2p-selected-bg);
}