/* Цветовые темы — общие для кабинета (/app) и открытых страниц.
   10 палитр — те же, что на Hero (see hero/symfony/assets/styles/home/themes.css).
   Переключаются классом body.theme-tXX, ставится по куки buy_theme
   (App\Theme\PlatformTheme). t01 «Океан» — значение по умолчанию в :root. */
:root,
body.theme-t01 {
    --app-bg: #f0f9ff;
    --app-surface: #ffffff;
    --app-border: #bae6fd;
    --app-text: #0c4a6e;
    --app-text-muted: #5b7f95;
    --app-primary: #0284c7;
    --app-primary-dark: #0c4a6e;
    --app-danger: #be123c;
    --app-success: #15803d;
    --app-radius: 12px;
    --app-gap: 16px;
}

body.theme-t02 {
    --app-bg: #f0fdf4;
    --app-surface: #ffffff;
    --app-border: #bbf7d0;
    --app-text: #052e16;
    --app-text-muted: #4d7c5f;
    --app-primary: #15803d;
    --app-primary-dark: #052e16;
}

body.theme-t03 {
    --app-bg: #fff7ed;
    --app-surface: #ffffff;
    --app-border: #fed7aa;
    --app-text: #431407;
    --app-text-muted: #8a5a3f;
    --app-primary: #c2410c;
    --app-primary-dark: #431407;
}

body.theme-t04 {
    --app-bg: #fff1f2;
    --app-surface: #ffffff;
    --app-border: #fecdd3;
    --app-text: #4c0519;
    --app-text-muted: #97596a;
    --app-primary: #be123c;
    --app-primary-dark: #4c0519;
}

body.theme-t05 {
    --app-bg: #f1f5f9;
    --app-surface: #ffffff;
    --app-border: #cbd5e1;
    --app-text: #0f172a;
    --app-text-muted: #64748b;
    --app-primary: #334155;
    --app-primary-dark: #0f172a;
}

body.theme-t06 {
    --app-bg: #fffbeb;
    --app-surface: #ffffff;
    --app-border: #fde68a;
    --app-text: #451a03;
    --app-text-muted: #92764f;
    --app-primary: #d97706;
    --app-primary-dark: #451a03;
}

body.theme-t07 {
    --app-bg: #f0fdfa;
    --app-surface: #ffffff;
    --app-border: #99f6e4;
    --app-text: #042f2e;
    --app-text-muted: #4f7f7a;
    --app-primary: #0f766e;
    --app-primary-dark: #042f2e;
}

body.theme-t08 {
    --app-bg: #eff6ff;
    --app-surface: #ffffff;
    --app-border: #bfdbfe;
    --app-text: #1e3a8a;
    --app-text-muted: #5c72a3;
    --app-primary: #1d4ed8;
    --app-primary-dark: #1e3a8a;
}

body.theme-t09 {
    --app-bg: #171717;
    --app-surface: #262626;
    --app-border: #404040;
    --app-text: #fafafa;
    --app-text-muted: #a3a3a3;
    --app-primary: #a3e635;
    --app-primary-dark: #84cc16;
}

body.theme-t10 {
    --app-bg: #fafaf9;
    --app-surface: #ffffff;
    --app-border: #e7e5e4;
    --app-text: #292524;
    --app-text-muted: #8a8177;
    --app-primary: #a16207;
    --app-primary-dark: #292524;
}

/* Theme switcher */
.app-theme-switcher {
    position: relative;
}

.app-theme-switcher__toggle {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
}

.app-theme-switcher__toggle::-webkit-details-marker { display: none; }
.app-theme-switcher__toggle::marker { content: ""; }

.app-theme-switcher__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    padding: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.app-theme-switcher__panel form {
    margin: 0;
}

.app-theme-switcher__swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}

.app-theme-switcher__swatch.is-active {
    border-color: var(--app-text);
}