/*
 * Platform themes (App\Enums\Theme), switched by <html data-theme="...">.
 *
 * Views are styled with Tailwind utilities, and Tailwind v4 reads every color, font and radius
 * from CSS variables. Each theme re-maps those variables (slate = neutrals, indigo = primary,
 * lime = secondary accent), so all pages restyle without touching their markup. These rules are
 * unlayered, so they win over Tailwind's layered theme and utilities.
 *
 * Extra theme tokens: --ink (outline color), --font-display (h1/h2), --display-weight.
 * The header itself is transparent; a theme may give `body > header` a background.
 */

.theme-mascot { display: none; }

html[data-theme]:not([data-theme="classic"]) body { background-color: var(--color-slate-50); }
html[data-theme]:not([data-theme="classic"]) h1,
html[data-theme]:not([data-theme="classic"]) h2 {
    font-family: var(--font-display, var(--font-sans));
    font-weight: var(--display-weight, 800);
}

html[data-theme="mascot"] .theme-mascot,
html[data-theme="hybrid"] .theme-mascot { display: block; }

/* ── 1 · Яркие блоки ─────────────────────────────────────────── */
html[data-theme="blocks"] {
    --ink: #1F1B2E;
    --font-sans: 'Nunito', ui-sans-serif, system-ui, sans-serif;
    --display-weight: 900;
    --radius-md: 10px; --radius-lg: 14px; --radius-xl: 22px; --radius-2xl: 28px;
    --color-slate-50: #FFF8E7; --color-slate-100: #F7EDD3; --color-slate-200: #E9DDBF; --color-slate-300: #D6C8A6;
    --color-slate-400: #A99F88; --color-slate-500: #5B5670; --color-slate-600: #4A4560; --color-slate-700: #35304A;
    --color-slate-800: #1F1B2E; --color-slate-900: #1F1B2E;
    --color-indigo-50: #EEF3FF; --color-indigo-100: #DCE7FF; --color-indigo-200: #BCD0FF; --color-indigo-300: #93B3FF;
    --color-indigo-500: #3D7BFF; --color-indigo-600: #2B5FE0; --color-indigo-700: #1F48B0; --color-indigo-800: #17367F;
    --color-lime-50: #FFF6D1; --color-lime-100: #FFEDA3; --color-lime-300: #FFE17A; --color-lime-400: #FFD23F;
    --color-lime-500: #F5B800; --color-lime-700: #8A6400;
}
html[data-theme="blocks"] body > header { background: #FFD23F; border-bottom: 3px solid var(--ink); }
html[data-theme="blocks"] .rounded-xl.border,
html[data-theme="blocks"] .rounded-2xl.border { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
html[data-theme="blocks"] .rounded-lg.bg-indigo-600 { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
html[data-theme="blocks"] input.border, html[data-theme="blocks"] select.border, html[data-theme="blocks"] textarea.border { border-width: 2px; }

/* ── 2 · Космос (тёмная) ─────────────────────────────────────── */
html[data-theme="space"] {
    color-scheme: dark;
    --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
    --display-weight: 700;
    --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px;
    --color-white: #1C2252;
    --color-slate-50: #12163A; --color-slate-100: #252B62; --color-slate-200: #2B3270; --color-slate-300: #3A4285;
    --color-slate-400: #8E8BB8; --color-slate-500: #B5B2DA; --color-slate-600: #C9C6E8; --color-slate-700: #DCD9F5;
    --color-slate-800: #F4F1FF; --color-slate-900: #FFFFFF;
    --color-indigo-50: #20305C; --color-indigo-100: #234068; --color-indigo-200: #2C5A78; --color-indigo-300: #3E8C88;
    --color-indigo-500: #5EE6B8; --color-indigo-600: #5EE6B8; --color-indigo-700: #8FF0CF; --color-indigo-800: #B8F7E2;
    --color-lime-50: #2E2A4A; --color-lime-100: #3A2F4A; --color-lime-300: #C98A6E; --color-lime-400: #FFB38A;
    --color-lime-500: #FF9A6A; --color-lime-700: #FFB38A;
    --color-emerald-50: #173B3A; --color-emerald-100: #1E4B47; --color-emerald-200: #2A6359; --color-emerald-300: #3B8A72;
    --color-emerald-400: #4FB08C; --color-emerald-500: #5EE6B8; --color-emerald-600: #6EE7B7; --color-emerald-700: #8FF0C4;
    --color-emerald-800: #B6F5DA;
    --color-amber-50: #3A3020; --color-amber-100: #4A3B1E; --color-amber-200: #6B5222; --color-amber-500: #FFC145;
    --color-amber-600: #FFC857; --color-amber-700: #FFD27A; --color-amber-800: #FFE0A3;
    --color-rose-50: #3D2033; --color-rose-100: #4D2440; --color-rose-300: #8A3E5E; --color-rose-400: #D86A8E;
    --color-rose-500: #FF7FA3; --color-rose-600: #FF8FB0; --color-rose-700: #FFA6C1; --color-rose-800: #FFC2D4;
    --color-violet-600: #B9A7FF;
}
html[data-theme="space"] body {
    background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px);
    background-size: 44px 44px;
}
html[data-theme="space"] .rounded-xl.border,
html[data-theme="space"] .rounded-2xl.border { border-color: transparent; }

/* ── 3 · Тетрадь ─────────────────────────────────────────────── */
html[data-theme="notebook"] {
    --font-sans: 'Golos Text', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Caveat', cursive;
    --display-weight: 700;
    --radius-md: 4px; --radius-lg: 6px; --radius-xl: 6px; --radius-2xl: 8px;
    --color-slate-50: #FBFAF4; --color-slate-100: #F1F0E8; --color-slate-200: #E3E8F2; --color-slate-300: #C9D1E2;
    --color-slate-400: #9AA3B5; --color-slate-500: #5A6070; --color-slate-600: #4A505E; --color-slate-700: #363B47;
    --color-slate-800: #22252E; --color-slate-900: #16181E;
    --color-indigo-50: #EEF2FB; --color-indigo-100: #DCE4F7; --color-indigo-200: #BACAEE; --color-indigo-300: #8FA7E0;
    --color-indigo-500: #3A62C4; --color-indigo-600: #2148A8; --color-indigo-700: #163178; --color-indigo-800: #10255A;
    --color-lime-50: #FFFBE0; --color-lime-100: #FFF6B8; --color-lime-300: #FFF07A; --color-lime-400: #F5DC3A;
    --color-lime-500: #E8C800; --color-lime-700: #7A6300;
}
html[data-theme="notebook"] body {
    background-image: linear-gradient(#E3E8F2 1px, transparent 1px), linear-gradient(90deg, #E3E8F2 1px, transparent 1px);
    background-size: 28px 28px;
}
html[data-theme="notebook"] body > header { background: transparent; border-bottom: 2px solid #D6402F; }
html[data-theme="notebook"] h1 { font-size: 2.75rem; line-height: 1.1; color: var(--color-indigo-600); }
html[data-theme="notebook"] h2 { font-size: 1.85rem; line-height: 1.15; }
html[data-theme="notebook"] .rounded-xl.border,
html[data-theme="notebook"] .rounded-2xl.border { box-shadow: 0 2px 0 #E3E8F2, 0 10px 24px rgba(33, 72, 168, 0.08); }

/* ── 4 · Тропа приключений ───────────────────────────────────── */
html[data-theme="path"] {
    --font-sans: 'Rubik', ui-sans-serif, system-ui, sans-serif;
    --radius-md: 12px; --radius-lg: 14px; --radius-xl: 22px; --radius-2xl: 28px;
    --color-slate-50: #E9F6FF; --color-slate-100: #DCEEFA; --color-slate-200: #CFE2EF; --color-slate-300: #B9CAD8;
    --color-slate-400: #8AA1B3; --color-slate-500: #4A6478; --color-slate-600: #3E566A; --color-slate-700: #2C4558;
    --color-slate-800: #12324A; --color-slate-900: #0B2236;
    --color-indigo-50: #E3F6EC; --color-indigo-100: #C8EDD8; --color-indigo-200: #9EDDBB; --color-indigo-300: #6FCB99;
    --color-indigo-500: #22A06B; --color-indigo-600: #167A50; --color-indigo-700: #11603F; --color-indigo-800: #0C4A30;
    --color-lime-50: #FFF4E3; --color-lime-100: #FFE6C2; --color-lime-300: #FFC266; --color-lime-400: #FFAB3D;
    --color-lime-500: #FF9F1C; --color-lime-700: #A85A00;
}
html[data-theme="path"] .rounded-xl.border,
html[data-theme="path"] .rounded-2xl.border { border-color: transparent; }
html[data-theme="path"] .rounded-lg.bg-indigo-600 { box-shadow: 0 4px 0 var(--color-indigo-800); }

/* ── 5 · Спокойная пастель ───────────────────────────────────── */
html[data-theme="calm"] {
    --font-sans: 'Golos Text', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Comfortaa', ui-sans-serif, system-ui, sans-serif;
    --display-weight: 700;
    --radius-md: 12px; --radius-lg: 16px; --radius-xl: 28px; --radius-2xl: 36px;
    --color-slate-50: #F7F4FB; --color-slate-100: #EFEBF6; --color-slate-200: #E6E1F0; --color-slate-300: #D5CEE4;
    --color-slate-400: #A39DB8; --color-slate-500: #6B6680; --color-slate-600: #57526B; --color-slate-700: #433E55;
    --color-slate-800: #2E2A3D; --color-slate-900: #211E2D;
    --color-indigo-50: #F1EEFE; --color-indigo-100: #E4DEFD; --color-indigo-200: #CDC3FA; --color-indigo-300: #A99BF5;
    --color-indigo-500: #7B69E0; --color-indigo-600: #5A48C8; --color-indigo-700: #4A3BB0; --color-indigo-800: #3E2FA0;
    --color-lime-50: #EEF8F2; --color-lime-100: #DCF0E3; --color-lime-300: #A8D9BB; --color-lime-400: #7CC49A;
    --color-lime-500: #4FA874; --color-lime-700: #2D6B47;
}
html[data-theme="calm"] body > header { background: transparent; border-color: transparent; }
html[data-theme="calm"] .rounded-xl.border,
html[data-theme="calm"] .rounded-2xl.border { border-color: transparent; box-shadow: 0 12px 40px rgba(90, 72, 200, 0.07); }

/* ── 6 · Игровой квест ───────────────────────────────────────── */
html[data-theme="quest"] {
    --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Montserrat Alternates', ui-sans-serif, system-ui, sans-serif;
    --radius-md: 12px; --radius-lg: 14px; --radius-xl: 24px; --radius-2xl: 28px;
    --color-slate-50: #F4F2FF; --color-slate-100: #EAE6FF; --color-slate-200: #DDD7FA; --color-slate-300: #C9C2F0;
    --color-slate-400: #9C94C8; --color-slate-500: #6A6390; --color-slate-600: #554E7A; --color-slate-700: #3F3866;
    --color-slate-800: #1D1640; --color-slate-900: #140F30;
    --color-indigo-50: #EEEAFF; --color-indigo-100: #DED6FF; --color-indigo-200: #C3B6FF; --color-indigo-300: #A08CFF;
    --color-indigo-500: #6A4DF0; --color-indigo-600: #4B2BD6; --color-indigo-700: #3A1FB0; --color-indigo-800: #2F1898;
    --color-lime-50: #F6FDE0; --color-lime-100: #ECFBC0; --color-lime-300: #DCF77F; --color-lime-400: #C6F432;
    --color-lime-500: #A8DB12; --color-lime-700: #4D6B00;
}
html[data-theme="quest"] body > header { background: #4B2BD6; border-color: #4B2BD6; }
html[data-theme="quest"] .site-logo { color: #FFFFFF; }
html[data-theme="quest"] .site-header nav .bg-indigo-600 { background: #C6F432; color: #1D1640; }
html[data-theme="quest"] .site-logo .text-slate-800 { color: #C6F432; }
html[data-theme="quest"] .rounded-xl.border,
html[data-theme="quest"] .rounded-2xl.border { border-color: transparent; box-shadow: 0 12px 32px rgba(75, 43, 214, 0.10); }

/* ── 7 · Цвет по смыслу ──────────────────────────────────────── */
html[data-theme="colors"] {
    --font-sans: 'Onest', ui-sans-serif, system-ui, sans-serif;
    --radius-md: 10px; --radius-lg: 14px; --radius-xl: 22px; --radius-2xl: 26px;
    --color-slate-50: #F6F7F9; --color-slate-100: #EEF0F3; --color-slate-200: #E3E6EB; --color-slate-300: #CDD2DA;
    --color-slate-400: #9AA1AD; --color-slate-500: #5D6270; --color-slate-600: #4A4F5C; --color-slate-700: #373B46;
    --color-slate-800: #1A1D24; --color-slate-900: #111318;
    --color-indigo-50: #E8F0FF; --color-indigo-100: #D3E2FF; --color-indigo-200: #A9C6FF; --color-indigo-300: #7FA9FF;
    --color-indigo-500: #2F7BFF; --color-indigo-600: #1F5FD6; --color-indigo-700: #1D4FB8; --color-indigo-800: #153B8A;
    --color-lime-50: #E6F6EE; --color-lime-100: #C9EDDA; --color-lime-300: #7FD3A7; --color-lime-400: #3DC07E;
    --color-lime-500: #20B26B; --color-lime-700: #157A49;
}
html[data-theme="colors"] .rounded-xl.border,
html[data-theme="colors"] .rounded-2xl.border { border-color: transparent; }

/* ── 8 · Друг-маскот ─────────────────────────────────────────── */
html[data-theme="mascot"] {
    --font-sans: 'Nunito', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Balsamiq Sans', 'Nunito', sans-serif;
    --display-weight: 700;
    --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 28px;
    --color-slate-50: #EAF8F3; --color-slate-100: #DDF1E9; --color-slate-200: #C3E6DA; --color-slate-300: #A6D3C3;
    --color-slate-400: #7FA89A; --color-slate-500: #3F6A60; --color-slate-600: #2F5A51; --color-slate-700: #234A42;
    --color-slate-800: #173A33; --color-slate-900: #0F2924;
    --color-indigo-50: #E2F5EE; --color-indigo-100: #C6EBDD; --color-indigo-200: #9BD9C2; --color-indigo-300: #6CC4A4;
    --color-indigo-500: #14967A; --color-indigo-600: #0B7A5E; --color-indigo-700: #065F49; --color-indigo-800: #054A39;
    --color-lime-50: #FFF2E6; --color-lime-100: #FFE2C7; --color-lime-300: #FFBE8A; --color-lime-400: #FFA05E;
    --color-lime-500: #FF8F3F; --color-lime-700: #9A4A00;
}
html[data-theme="mascot"] .site-logo { font-family: 'Balsamiq Sans', 'Nunito', sans-serif; }
html[data-theme="mascot"] .rounded-xl.border,
html[data-theme="mascot"] .rounded-2xl.border { border-color: transparent; }
html[data-theme="mascot"] .rounded-lg.bg-indigo-600 { box-shadow: 0 4px 0 var(--color-indigo-800); }

/* ── 9 · Смелая типографика ──────────────────────────────────── */
html[data-theme="bold"] {
    --ink: #111111;
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Dela Gothic One', 'Inter', sans-serif;
    --display-weight: 400;
    --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-2xl: 0;
    --color-slate-50: #F5F1E8; --color-slate-100: #ECE6D8; --color-slate-200: #D9D2C2; --color-slate-300: #BFB7A6;
    --color-slate-400: #8F897C; --color-slate-500: #5F5A50; --color-slate-600: #4A463E; --color-slate-700: #2E2B26;
    --color-slate-800: #111111; --color-slate-900: #000000;
    --color-indigo-50: #EAEFFF; --color-indigo-100: #D5DFFF; --color-indigo-200: #AFC2FF; --color-indigo-300: #8AA5FF;
    --color-indigo-500: #4A72FF; --color-indigo-600: #2448E0; --color-indigo-700: #1A36B0; --color-indigo-800: #13288A;
    --color-lime-50: #FFEDE6; --color-lime-100: #FFD9CC; --color-lime-300: #FFA588; --color-lime-400: #FF8660;
    --color-lime-500: #FF6A3D; --color-lime-700: #B23A12;
}
html[data-theme="bold"] h1, html[data-theme="bold"] h2 { text-transform: uppercase; letter-spacing: 0.01em; }
html[data-theme="bold"] body > header { border-bottom: 3px solid var(--ink); }
html[data-theme="bold"] .site-logo { font-family: 'Dela Gothic One', sans-serif; font-weight: 400; text-transform: uppercase; }
html[data-theme="bold"] .rounded-xl.border,
html[data-theme="bold"] .rounded-2xl.border { border: 2px solid var(--ink); }
html[data-theme="bold"] .rounded-lg.bg-indigo-600 { background: var(--ink); text-transform: uppercase; letter-spacing: 0.04em; }
html[data-theme="bold"] .rounded-lg.bg-indigo-600:hover { background: var(--color-indigo-600); }

/* ── 10 · Альбом наклеек ─────────────────────────────────────── */
html[data-theme="stickers"] {
    --font-sans: 'Nunito', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Pangolin', cursive;
    --display-weight: 400;
    --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 28px;
    --color-slate-50: #FFF6D6; --color-slate-100: #FBEFC9; --color-slate-200: #EBD9A0; --color-slate-300: #D9C79A;
    --color-slate-400: #A8977A; --color-slate-500: #6E5A44; --color-slate-600: #5A4836; --color-slate-700: #4A3A2A;
    --color-slate-800: #3A2A1A; --color-slate-900: #2A1D10;
    --color-indigo-50: #FFF0EA; --color-indigo-100: #FFDDD0; --color-indigo-200: #FFBBA3; --color-indigo-300: #F7937A;
    --color-indigo-500: #E35A3A; --color-indigo-600: #B83A20; --color-indigo-700: #96301A; --color-indigo-800: #7E2210;
    --color-lime-50: #EAF6FF; --color-lime-100: #D3EDFF; --color-lime-300: #9AD8FF; --color-lime-400: #6CC4F5;
    --color-lime-500: #3AA8E8; --color-lime-700: #1A6A9A;
}
html[data-theme="stickers"] .site-logo { font-family: 'Pangolin', cursive; font-weight: 400; font-size: 1.5rem; }
html[data-theme="stickers"] .rounded-xl.border,
html[data-theme="stickers"] .rounded-2xl.border { border-color: transparent; box-shadow: 0 4px 0 #EBD9A0; }
html[data-theme="stickers"] span.rounded-full { transform: rotate(-2deg); }

/* ── 11 · Тропа с наклейками (гибрид) ────────────────────────── */
html[data-theme="hybrid"] {
    --ink: #1F1B2E;
    --font-sans: 'Nunito', ui-sans-serif, system-ui, sans-serif;
    --display-weight: 900;
    --radius-md: 12px; --radius-lg: 14px; --radius-xl: 24px; --radius-2xl: 32px;
    --color-slate-50: #FFF8EC; --color-slate-100: #F6ECDA; --color-slate-200: #EADFCB; --color-slate-300: #D6C8AE;
    --color-slate-400: #A99F8A; --color-slate-500: #5B5670; --color-slate-600: #4A4560; --color-slate-700: #35304A;
    --color-slate-800: #1F1B2E; --color-slate-900: #15121F;
    --color-indigo-50: #F3EEFF; --color-indigo-100: #E6DCFF; --color-indigo-200: #CDB9FF; --color-indigo-300: #B193FB;
    --color-indigo-500: #8B5CF6; --color-indigo-600: #6D3FE0; --color-indigo-700: #5528C2; --color-indigo-800: #43209A;
    --color-lime-50: #E8F0FF; --color-lime-100: #D3E2FF; --color-lime-300: #93B3FF; --color-lime-400: #5B93FF;
    --color-lime-500: #2F7BFF; --color-lime-700: #1D4FB8;
}
html[data-theme="hybrid"] body > header { border-bottom: 2px solid var(--ink); }
html[data-theme="hybrid"] .site-logo { font-family: 'Pangolin', cursive; font-weight: 400; font-size: 1.5rem; }
html[data-theme="hybrid"] h1 { display: inline-block; padding: 0 4px; background: linear-gradient(transparent 62%, #FFE36E 62%); }
html[data-theme="hybrid"] .rounded-xl.border,
html[data-theme="hybrid"] .rounded-2xl.border { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
html[data-theme="hybrid"] .rounded-lg.bg-indigo-600 { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }