/* Mr. Sabor 507 app themes. The selected theme is stored in localStorage. */

:root,
:root[data-theme="light"] {
    color-scheme: light;
    --app-page-bg: #fdf8f5;
    --app-sidebar-bg: #ffffff;
    --app-panel-bg: #ffffff;
    --app-text: #1a1a1a;
    --app-muted: #9ca3af;
    --app-border: #f3f4f6;
    --app-nav-text: #4b5563;
    --app-nav-hover-bg: #f9fafb;
    --app-nav-active-bg: #fdf0e9;
    --app-brand: #f15b29;
    --app-brand-strong: #d94c1f;
    --app-switch-track: #f9fafb;
    --app-switch-active-bg: #ffffff;
    --app-shadow: rgba(17, 24, 39, 0.12);
}

    :root[data-theme="soft"] {
        color-scheme: light;
        --app-page-bg: #e6d7cc; /* Fondo general más oscuro y acogedor (tostado/mocha) */
        --app-sidebar-bg: #f5ede6; /* Sidebar con distinción visual clara */
        --app-panel-bg: #f9f4ef; /* Paneles y tarjetas con mejor contraste */
        --app-text: #2c1e18; /* Texto principal mucho más oscuro y legible */
        --app-muted: #735e52; /* Texto secundario con fuerza */
        --app-border: #d4bfb0; /* Bordes más marcados */
        --app-nav-text: #594236;
        --app-nav-hover-bg: #eadcd0;
        --app-nav-active-bg: #dfcbbd;
        --app-brand: #c95128; /* Tono de marca adaptado al ambiente cálido */
        --app-brand-strong: #a43f1e;
        --app-switch-track: #dfcbbe;
        --app-switch-active-bg: #f9f4ef;
        --app-shadow: rgba(60, 36, 22, 0.2); /* Sombra más cálida y profunda */
    }

    :root[data-theme="dark"] {
        color-scheme: dark;
        --app-page-bg: #121212;
        --app-sidebar-bg: #191919;
        --app-panel-bg: #1e1e1e;
        --app-text: #f4f4f5;
        --app-muted: #a1a1aa;
        --app-border: #303033;
        --app-nav-text: #d4d4d8;
        --app-nav-hover-bg: #27272a;
        --app-nav-active-bg: #3a241d;
        --app-brand: #ff845c;
        --app-brand-strong: #ffb199;
        --app-switch-track: #242426;
        --app-switch-active-bg: #38383b;
        --app-shadow: rgba(0, 0, 0, 0.35);
    }

html,
body {
    background-color: var(--app-page-bg);
    color: var(--app-text);
    transition: background-color 180ms ease, color 180ms ease;
}

.mud-dialog,
.mud-popover,
.mud-menu {
    color-scheme: inherit;
}