/* Темы сайта. Классы Tailwind остаются, цвета подменяются переменными. */

html[data-site-theme="paper"] {
    color-scheme: light;
    --c-page: #f4efe6;
    --c-header: rgba(244, 239, 230, 0.92);
    --c-surface: #fffdf8;
    --c-surface-2: #f3ece1;
    --c-surface-3: #e7dccb;
    --c-ink: #1c1917;
    --c-ink-soft: #44403c;
    --c-muted: #5c564e;
    --c-faint: #756e64;
    --c-line: #e3d7c6;
    --c-accent: #0f766e;
    --c-accent-strong: #0f766e;
    --c-accent-soft: rgba(15, 118, 110, 0.12);
    --c-on-accent: #f7f3ea;
    --c-amber: #9a3412;
    --c-amber-bg: rgba(154, 52, 18, 0.1);
    --c-danger: #b42318;
    --c-danger-strong: #8f1d18;
    --c-danger-soft: rgba(180, 35, 24, 0.12);
    --c-danger-line: rgba(143, 29, 24, 0.45);
    --c-shadow: 0 18px 40px -28px rgba(70, 48, 16, 0.55);
}

html[data-site-theme="night"] {
    color-scheme: dark;
    --c-page: #171a21;
    --c-header: rgba(23, 26, 33, 0.92);
    --c-surface: #22262f;
    --c-surface-2: #2a303b;
    --c-surface-3: #343b48;
    --c-ink: #e8e4dc;
    --c-ink-soft: #d4cfc6;
    --c-muted: #b7b1a8;
    --c-faint: #8f897f;
    --c-line: rgba(232, 228, 220, 0.12);
    --c-accent: #8fd9cc;
    --c-accent-strong: #1f8a7c;
    --c-accent-soft: rgba(143, 217, 204, 0.14);
    --c-on-accent: #f4f1ea;
    --c-amber: #e4c27a;
    --c-amber-bg: rgba(228, 194, 122, 0.12);
    --c-danger: #ffc9c9;
    --c-danger-strong: #fff1f1;
    --c-danger-soft: rgba(255, 110, 110, 0.18);
    --c-danger-line: rgba(255, 176, 176, 0.55);
    --c-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.55);
}

html[data-site-theme="quiet"] {
    color-scheme: light;
    --c-page: #f7f6f3;
    --c-header: rgba(247, 246, 243, 0.96);
    --c-surface: #ffffff;
    --c-surface-2: #f3f1ec;
    --c-surface-3: #e7e4dc;
    --c-ink: #1f1e1b;
    --c-ink-soft: #3f3d38;
    --c-muted: #6b675f;
    --c-faint: #8a857c;
    --c-line: #e6e2da;
    --c-accent: #3d6b64;
    --c-accent-strong: #2f5650;
    --c-accent-soft: rgba(61, 107, 100, 0.12);
    --c-on-accent: #f7f6f3;
    --c-amber: #8a5a2b;
    --c-amber-bg: rgba(138, 90, 43, 0.1);
    --c-danger: #9f2d2d;
    --c-danger-strong: #7f1d1d;
    --c-danger-soft: rgba(159, 45, 45, 0.1);
    --c-danger-line: rgba(127, 29, 29, 0.35);
    --c-shadow: none;
}

html[data-site-theme="sheet"] {
    color-scheme: light;
    --c-page: #e7ebf0;
    --c-header: rgba(238, 242, 246, 0.96);
    --c-surface: #f7f9fb;
    --c-surface-2: #e7edf3;
    --c-surface-3: #d5dee8;
    --c-ink: #1c2430;
    --c-ink-soft: #334155;
    --c-muted: #5b6b7c;
    --c-faint: #7b8b9c;
    --c-line: #d5dee8;
    --c-accent: #0f6e86;
    --c-accent-strong: #0c5c70;
    --c-accent-soft: rgba(15, 110, 134, 0.12);
    --c-on-accent: #f4f7f8;
    --c-amber: #9a5b16;
    --c-amber-bg: rgba(154, 91, 22, 0.12);
    --c-danger: #b42318;
    --c-danger-strong: #8f1d18;
    --c-danger-soft: rgba(180, 35, 24, 0.1);
    --c-danger-line: rgba(143, 29, 24, 0.4);
    --c-shadow: 0 10px 24px -18px rgba(28, 36, 48, 0.45);
    --c-sheet: #f6f1e8;
    --c-sheet-ink: #2a2118;
}

html[data-site-theme="book"] {
    color-scheme: light;
    --c-page: #f3ead7;
    --c-header: rgba(243, 234, 215, 0.94);
    --c-surface: #faf6ee;
    --c-surface-2: #f1e6d2;
    --c-surface-3: #e6d6bc;
    --c-ink: #2a2118;
    --c-ink-soft: #4a3b2c;
    --c-muted: #6b5644;
    --c-faint: #8a7260;
    --c-line: #e0d0b8;
    --c-accent: #8a5a32;
    --c-accent-strong: #7a4e2b;
    --c-accent-soft: rgba(138, 90, 50, 0.12);
    --c-on-accent: #faf6ee;
    --c-amber: #8a5a32;
    --c-amber-bg: rgba(138, 90, 50, 0.1);
    --c-danger: #a33b24;
    --c-danger-strong: #7c2416;
    --c-danger-soft: rgba(163, 59, 36, 0.12);
    --c-danger-line: rgba(124, 36, 22, 0.4);
    --c-shadow: none;
}

html[data-site-theme] body {
    background-color: var(--c-page);
    color: var(--c-ink);
}

html[data-site-theme] .ambient-glow {
    display: none;
}

html[data-site-theme] .glass {
    background: var(--c-surface);
    border-color: var(--c-line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html[data-site-theme] .glass-hover:hover {
    background: var(--c-surface);
    border-color: var(--c-accent);
    box-shadow: var(--c-shadow);
}

html[data-site-theme] header,
html[data-site-theme] header .h-16,
html[data-site-theme] header .h-16 > nav {
    overflow: visible;
}

html[data-site-theme] #auth-controls {
    flex-shrink: 0;
}

html[data-site-theme] .theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    margin-left: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--c-line);
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: Outfit, Inter, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

html[data-site-theme] .theme-toggle:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

html[data-site-theme] .theme-toggle-icon {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
}

html[data-site-theme] .theme-toggle-icon svg {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 720px) {
    html[data-site-theme] .theme-toggle-label {
        display: none;
    }
}

html[data-site-theme] .site-logo-test,
html[data-site-theme] .site-logo-english {
    color: var(--c-ink);
}

html[data-site-theme] .site-logo-hyphen,
html[data-site-theme] .site-logo-domain {
    color: var(--c-accent);
}

html[data-site-theme] .site-logo-tagline {
    color: var(--c-muted);
}

html[data-site-theme]::-webkit-scrollbar-track {
    background: var(--c-page);
}

html[data-site-theme]::-webkit-scrollbar-thumb {
    background: var(--c-surface-3);
}

html[data-site-theme] ::selection {
    background: var(--c-accent-soft);
    color: var(--c-ink);
}

html[data-site-theme] .bg-slate-950,
html[data-site-theme] .bg-slate-950\/20,
html[data-site-theme] .bg-slate-950\/40,
html[data-site-theme] .bg-slate-950\/60 {
    background-color: var(--c-page) !important;
}

html[data-site-theme] .bg-slate-950\/80 {
    background-color: var(--c-header) !important;
}

html[data-site-theme] .bg-slate-900,
html[data-site-theme] .bg-slate-900\/80,
html[data-site-theme] .bg-slate-900\/60,
html[data-site-theme] .bg-slate-900\/50,
html[data-site-theme] .bg-slate-900\/40,
html[data-site-theme] .bg-slate-900\/20,
html[data-site-theme] .bg-slate-900\/10 {
    background-color: var(--c-surface) !important;
}

html[data-site-theme] .bg-slate-800,
html[data-site-theme] .bg-slate-800\/80,
html[data-site-theme] .bg-slate-800\/60,
html[data-site-theme] .bg-slate-800\/50 {
    background-color: var(--c-surface-2) !important;
}

html[data-site-theme] .bg-slate-700,
html[data-site-theme] .bg-slate-700\/50,
html[data-site-theme] .bg-slate-700\/80 {
    background-color: var(--c-surface-3) !important;
}

html[data-site-theme] .bg-slate-400 {
    background-color: var(--c-accent) !important;
}

html[data-site-theme] .bg-emerald-500,
html[data-site-theme] .bg-emerald-400,
html[data-site-theme] .bg-emerald-500\/60,
html[data-site-theme] .bg-emerald-500\/70,
html[data-site-theme] .bg-amber-500 {
    background-color: var(--c-accent-strong) !important;
}

html[data-site-theme] .bg-emerald-500\/5,
html[data-site-theme] .bg-emerald-500\/10,
html[data-site-theme] .bg-emerald-500\/15,
html[data-site-theme] .bg-emerald-500\/20,
html[data-site-theme] .bg-blue-500\/10,
html[data-site-theme] .bg-purple-500\/10 {
    background-color: var(--c-accent-soft) !important;
}

html[data-site-theme] .bg-amber-500\/10,
html[data-site-theme] .bg-amber-500\/15,
html[data-site-theme] .bg-amber-500\/20 {
    background-color: var(--c-amber-bg) !important;
}

html[data-site-theme] .hover\:bg-slate-900:hover,
html[data-site-theme] .hover\:bg-slate-900\/40:hover,
html[data-site-theme] .hover\:bg-slate-900\/80:hover,
html[data-site-theme] .hover\:bg-slate-700:hover,
html[data-site-theme] .hover\:bg-slate-700\/80:hover {
    background-color: var(--c-surface-2) !important;
}

html[data-site-theme] .hover\:bg-emerald-500:hover,
html[data-site-theme] .hover\:bg-emerald-400:hover,
html[data-site-theme] .hover\:bg-blue-500:hover,
html[data-site-theme] .hover\:bg-purple-500:hover {
    background-color: var(--c-accent-strong) !important;
}

html[data-site-theme] .hover\:bg-emerald-500\/10:hover,
html[data-site-theme] .hover\:bg-emerald-500\/25:hover {
    background-color: var(--c-accent-soft) !important;
}

html[data-site-theme] .hover\:bg-amber-500\/10:hover {
    background-color: var(--c-amber-bg) !important;
}

html[data-site-theme] .text-slate-50,
html[data-site-theme] .text-slate-100,
html[data-site-theme] .text-slate-200 {
    color: var(--c-ink) !important;
}

html[data-site-theme] .text-slate-300 {
    color: var(--c-ink-soft) !important;
}

html[data-site-theme] .text-slate-400 {
    color: var(--c-muted) !important;
}

html[data-site-theme] .text-slate-500,
html[data-site-theme] .text-slate-600,
html[data-site-theme] .text-slate-700,
html[data-site-theme] .text-slate-800 {
    color: var(--c-faint) !important;
}

html[data-site-theme] .text-slate-950,
html[data-site-theme] .hover\:text-slate-950:hover {
    color: var(--c-on-accent) !important;
}

html[data-site-theme] .text-emerald-200,
html[data-site-theme] .text-emerald-300,
html[data-site-theme] .text-emerald-400,
html[data-site-theme] .text-emerald-400\/70,
html[data-site-theme] .text-emerald-400\/80,
html[data-site-theme] .text-emerald-400\/90,
html[data-site-theme] .text-emerald-500,
html[data-site-theme] .text-blue-400,
html[data-site-theme] .text-purple-400,
html[data-site-theme] .text-sky-300,
html[data-site-theme] .text-sky-400,
html[data-site-theme] .group:hover .group-hover\:text-emerald-200,
html[data-site-theme] .group:hover .group-hover\:text-emerald-300 {
    color: var(--c-accent) !important;
}

html[data-site-theme] .text-red-200,
html[data-site-theme] .text-red-300 {
    color: var(--c-danger-strong) !important;
}

html[data-site-theme] .text-red-400,
html[data-site-theme] .text-red-400\/80 {
    color: var(--c-danger) !important;
}

html[data-site-theme] .bg-red-500\/10,
html[data-site-theme] .bg-red-500\/20 {
    background-color: var(--c-danger-soft) !important;
}

html[data-site-theme] .border-red-500,
html[data-site-theme] .border-red-500\/30 {
    border-color: var(--c-danger-line) !important;
}

html[data-site-theme] .text-amber-300\/80,
html[data-site-theme] .text-amber-300\/90,
html[data-site-theme] .text-amber-400,
html[data-site-theme] .text-amber-400\/90,
html[data-site-theme] .text-amber-500 {
    color: var(--c-amber) !important;
}

html[data-site-theme] .hover\:text-slate-100:hover,
html[data-site-theme] .hover\:text-slate-200:hover,
html[data-site-theme] .hover\:text-slate-300:hover,
html[data-site-theme] .group:hover .group-hover\:text-slate-400 {
    color: var(--c-ink) !important;
}

html[data-site-theme] .hover\:text-emerald-300:hover,
html[data-site-theme] .hover\:text-emerald-400:hover,
html[data-site-theme] .hover\:text-sky-300:hover {
    color: var(--c-accent) !important;
}

html[data-site-theme] .border-slate-700,
html[data-site-theme] .border-slate-700\/60,
html[data-site-theme] .border-slate-700\/80,
html[data-site-theme] .border-slate-800,
html[data-site-theme] .border-slate-800\/50,
html[data-site-theme] .border-slate-800\/60,
html[data-site-theme] .border-slate-800\/80,
html[data-site-theme] .border-slate-900,
html[data-site-theme] .border-slate-900\/40,
html[data-site-theme] .border-slate-900\/80,
html[data-site-theme] .hover\:border-slate-600:hover,
html[data-site-theme] .hover\:border-slate-700:hover {
    border-color: var(--c-line) !important;
}

html[data-site-theme] .border-emerald-500,
html[data-site-theme] .border-emerald-500\/20,
html[data-site-theme] .border-emerald-500\/30,
html[data-site-theme] .border-emerald-500\/40,
html[data-site-theme] .border-emerald-500\/50,
html[data-site-theme] .border-blue-500\/20,
html[data-site-theme] .border-purple-500\/20,
html[data-site-theme] .focus\:border-emerald-500:focus,
html[data-site-theme] .focus\:border-emerald-500\/50:focus,
html[data-site-theme] .hover\:border-emerald-500:hover,
html[data-site-theme] .hover\:border-emerald-500\/40:hover,
html[data-site-theme] .hover\:border-emerald-500\/50:hover,
html[data-site-theme] .hover\:border-blue-500:hover,
html[data-site-theme] .hover\:border-purple-500:hover {
    border-color: var(--c-accent) !important;
}

html[data-site-theme] .border-amber-500\/20,
html[data-site-theme] .border-amber-500\/25,
html[data-site-theme] .border-amber-500\/30 {
    border-color: var(--c-amber) !important;
}

html[data-site-theme] .placeholder-slate-500::placeholder {
    color: var(--c-faint) !important;
}

html[data-site-theme] .from-slate-900 {
    --tw-gradient-from: var(--c-surface) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: transparent var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html[data-site-theme] .via-slate-900\/90 {
    --tw-gradient-stops: var(--tw-gradient-from), var(--c-surface) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

html[data-site-theme] .to-emerald-950\/40,
html[data-site-theme] .to-teal-400,
html[data-site-theme] .to-teal-500,
html[data-site-theme] .to-teal-500\/10 {
    --tw-gradient-to: var(--c-accent-strong) var(--tw-gradient-to-position) !important;
}

html[data-site-theme] .from-emerald-500,
html[data-site-theme] .from-emerald-500\/20,
html[data-site-theme] .hover\:from-emerald-500\/30:hover,
html[data-site-theme] .from-amber-500 {
    --tw-gradient-from: var(--c-accent-strong) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: transparent var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

html[data-site-theme] #hero-banner {
    background-image: none !important;
    background-color: var(--c-surface) !important;
    border-color: var(--c-line) !important;
    box-shadow: var(--c-shadow) !important;
}

html[data-site-theme="night"] #section-stories[data-theme="dark"] {
    --reader-bg: #1c2028;
    --reader-text: #e8e4dc;
    --reader-text-muted: #b7b1a8;
    --reader-border: #343b48;
    --reader-accent: #8fd9cc;
    --reader-accent-soft: rgba(143, 217, 204, 0.14);
    --reader-btn-bg: #2a303b;
    --reader-btn-text: #d4cfc6;
    --reader-hint-bg: rgba(143, 217, 204, 0.08);
    --reader-hint-border: rgba(143, 217, 204, 0.2);
    --reader-hint-text: #8fd9cc;
    --reader-settings-bg: rgba(34, 38, 47, 0.8);
    --reader-translation-text: #d5f3ec;
    --reader-translation-bg: rgba(143, 217, 204, 0.12);
}

html[data-site-theme] .grammar-mark {
    background: var(--c-accent-soft);
    color: var(--c-accent);
}

html[data-site-theme="book"] h1,
html[data-site-theme="book"] h2,
html[data-site-theme="book"] h3 {
    font-family: Fraunces, Literata, Georgia, serif;
    font-weight: 560;
    letter-spacing: -0.02em;
}

html[data-site-theme="book"] main {
    max-width: 54rem;
}

html[data-site-theme="book"] #hero-banner {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html[data-site-theme="book"] #hero-banner > .absolute,
html[data-site-theme="book"] #quote-of-day > .absolute {
    display: none;
}

html[data-site-theme="book"] #quote-of-day {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.25rem 0 0 !important;
}

html[data-site-theme="book"] #quote-of-day blockquote {
    font-family: Fraunces, Georgia, serif;
    font-weight: 500;
    font-size: 1.65rem;
    line-height: 1.35;
    font-style: italic;
}

html[data-site-theme="book"] #stories-list:not(.hidden) {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

html[data-site-theme="book"] #stories-list.hidden {
    display: none !important;
}

html[data-site-theme="book"] #stories-list > .glass {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 1rem 0 !important;
}

html[data-site-theme="book"] #story-reader-content {
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.125rem;
    line-height: 1.75;
}

html[data-site-theme="quiet"] .site-logo-tagline,
html[data-site-theme="quiet"] .site-logo-rule {
    display: none;
}

html[data-site-theme="quiet"] #hero-banner {
    box-shadow: none !important;
}

html[data-site-theme="quiet"] #hero-banner > .absolute {
    display: none;
}

html[data-site-theme="quiet"] header nav button,
html[data-site-theme="quiet"] header nav a {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
}

html[data-site-theme="quiet"] #genre-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
}

html[data-site-theme="quiet"] #genre-filters::-webkit-scrollbar {
    display: none;
}

html[data-site-theme="sheet"] #section-stories,
html[data-site-theme="sheet"] #section-grammar,
html[data-site-theme="sheet"] #section-constructor,
html[data-site-theme="sheet"] #section-polyglot,
html[data-site-theme="sheet"] #section-polyglot2,
html[data-site-theme="sheet"] #section-situational {
    background: var(--c-sheet);
    border-radius: 1.25rem;
    padding: 1.25rem 1.15rem 1.5rem;
}

html[data-site-theme="sheet"] #story-reader-content {
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.125rem;
    line-height: 1.75;
}

html[data-site-theme] header .h-16 {
    gap: 0.5rem;
}

html[data-site-theme] .site-logo {
    flex: 0 0 auto;
    min-width: max-content;
    margin-right: 0.35rem;
}

@media (max-width: 1023px) {
    html[data-site-theme] .theme-toggle {
        min-width: 2.5rem;
        min-height: 2.5rem;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    html[data-site-theme] .site-logo-sub {
        display: none;
    }
}

@media (max-width: 640px) {
    html[data-site-theme="sheet"] #section-stories,
    html[data-site-theme="sheet"] #section-grammar,
    html[data-site-theme="sheet"] #section-constructor,
    html[data-site-theme="sheet"] #section-polyglot,
    html[data-site-theme="sheet"] #section-polyglot2,
    html[data-site-theme="sheet"] #section-situational {
        padding: 0.85rem 0.75rem 1rem;
        border-radius: 0.9rem;
    }
}