/* Color Variables */
:root {
    --color-sepia-body-bg: rgb(251, 240, 217);
    --color-sepia-text: rgb(55, 51, 45);
    --color-sepia-article-bg: rgb(247, 239, 224);
    --color-sepia-odd-section-bg: rgb(242, 233, 213);
    --color-sepia-odd-section-bg-transparent: rgba(242, 233, 213, 0.9);
    --color-sepia-selection-bg: rgb(200, 150, 80);
    --color-white: rgb(255, 255, 255);
    --color-sepia-link: rgb(140, 100, 60);
    --color-sepia-link-hover: rgb(100, 70, 40);
    --color-sepia-header-link-hover: rgb(226, 217, 205);
    --color-sepia-input-bg: rgb(246, 237, 217);
    --color-sepia-blue: rgb(160, 120, 80);
    --color-sepia-input-focus-bg: rgb(255, 243, 220);
    --color-sepia-header-gradient-start: rgb(160, 120, 80);
    --color-sepia-header-gradient-end: rgb(120, 90, 60);
    --color-sepia-breadcrumbs-bg: rgb(229, 220, 200);
    --color-sepia-notebox-border: rgb(228, 219, 199);
    --color-sepia-footer-text: rgb(100, 90, 80);
    --color-sepia-info-bg: rgb(235, 242, 246);
    --color-sepia-warning-bg: rgb(246, 240, 235);
    --color-sepia-warning-border: rgb(187, 134, 89);
    --color-sepia-warning-text: rgb(141, 101, 67);
    --color-sepia-error-bg: rgb(246, 235, 235);
    --color-sepia-error-border: rgb(187, 89, 89);
    --color-sepia-error-text: rgb(141, 67, 67);
    --color-sepia-settings-button-bg: rgb(247, 243, 233);
    --color-sepia-settings-button-text: rgb(150, 140, 125);
    --color-black: rgb(0, 0, 0);
    --color-sepia-mode-bg: rgb(228, 203, 164);
    --color-sepia-green: rgb(105, 140, 110);
    --color-primary-yellow-button: rgb(228, 203, 164);
    --color-primary-yellow-button-hover: rgb(210, 187, 151);
    --color-sepia-footer-link: rgb(90, 85, 75);
    --color-sepia-footer-link-hover: rgb(40, 35, 30);
    --color-sepia-mark-bg: rgb(240, 220, 190);
}

html.theme-sepia body {
    background-color: var(--color-sepia-body-bg);
    color: var(--color-sepia-text);
}

html.theme-sepia article {
    background-color: var(--color-sepia-article-bg);
}

html.theme-sepia main article section:nth-of-type(even) {
    background-color: var(--color-sepia-odd-section-bg);
}

html.theme-sepia ::selection {
    background-color: var(--color-sepia-selection-bg);
    color: var(--color-white);
}

html.theme-sepia a {
    color: var(--color-sepia-link);
}

html.theme-sepia a:hover {
    color: var(--color-sepia-link-hover);
}

html.theme-sepia a[href="/about/brackets#look"]:link,
html.theme-sepia a[href="/about/brackets#look"]:visited,
html.theme-sepia a[href="/about/brackets#look"]:link mark,
html.theme-sepia a[href="/about/brackets#look"]:visited mark {
    color: var(--color-sepia-text);
}

html.theme-sepia header a:link, html.theme-sepia header a:visited {
    color: var(--color-white);
}

html.theme-sepia header a:hover {
    color: var(--color-sepia-header-link-hover);
}

html.theme-sepia input[type="text"], html.theme-sepia input[type="number"], html.theme-sepia textarea, html.theme-sepia select, html.theme-sepia code {
    background-color: var(--color-sepia-input-bg);
    color: var(--color-sepia-text);
}

html.theme-sepia input[type="checkbox"]:checked + label::before {
    background-color: var(--color-sepia-blue);
    border-color: var(--color-sepia-blue);
}

html.theme-sepia input[type="text"]:focus, html.theme-sepia textarea:focus {
    background-color: var(--color-sepia-input-focus-bg);
}

html.theme-sepia header {
    background-color: var(--color-sepia-header-gradient-start);
    background-image: linear-gradient(140deg, var(--color-sepia-header-gradient-start) 0%, var(--color-sepia-header-gradient-end) 100%);
}

html.theme-sepia h2 {
    color: var(--color-sepia-blue);
    border-bottom-color: var(--color-sepia-blue);
}

html.theme-sepia nav#breadcrumbs {
    background-color: var(--color-sepia-breadcrumbs-bg);
    color: var(--color-sepia-text);
}

html.theme-sepia #frontPageBibleIndex {
    background-color: var(--color-sepia-odd-section-bg-transparent);
}

html.theme-sepia p.noteBox, html.theme-sepia aside.context {
    background-color: var(--color-sepia-odd-section-bg);
    border-color: var(--color-sepia-notebox-border);
}

html.theme-sepia section:nth-of-type(even) aside.context {
    background-color: var(--color-sepia-article-bg);
}

html.theme-sepia footer {
    background-color: var(--color-sepia-odd-section-bg);
}

html.theme-sepia footer a:link,
html.theme-sepia footer a:visited,
html.theme-sepia footer a[href*="commentaries.2001translation.org"]:link,
html.theme-sepia footer a[href*="commentaries.2001translation.org"]:visited {
    color: var(--color-sepia-footer-link);
    text-decoration: underline;
}

html.theme-sepia footer a:hover,
html.theme-sepia footer a[href*="commentaries.2001translation.org"]:hover {
    color: var(--color-sepia-footer-link-hover);
}

html.theme-sepia footer p {
    color: var(--color-sepia-footer-text);
}

html.theme-sepia #bible {
    background-color: var(--color-sepia-odd-section-bg);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

html.theme-sepia img, html.theme-sepia *[style*="background-image"] {
    filter: sepia(0.3) contrast(0.95);
}

html.theme-sepia aside.info {
    background-color: var(--color-sepia-info-bg);
    border-color: var(--color-sepia-blue);
    color: var(--color-sepia-header-gradient-end);
}

html.theme-sepia aside.info::before {
    color: var(--color-sepia-header-gradient-end);
}

html.theme-sepia aside.warning {
    background-color: var(--color-sepia-warning-bg);
    border-color: var(--color-sepia-warning-border);
    color: var(--color-sepia-warning-text);
}

html.theme-sepia aside.warning::before {
    color: var(--color-sepia-warning-text);
}

html.theme-sepia aside.error {
    background-color: var(--color-sepia-error-bg);
    border-color: var(--color-sepia-error-border);
    color: var(--color-sepia-error-text);
}

html.theme-sepia aside.error::before {
    color: var(--color-sepia-error-text);
}

html.theme-sepia aside.box {
    background-color: var(--color-sepia-odd-section-bg);
    border-color: var(--color-sepia-notebox-border);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

html.theme-sepia section:nth-of-type(even) aside.box {
    background-color: var(--color-sepia-article-bg);
}

html.theme-sepia aside.blurb {
    background-color: var(--color-sepia-odd-section-bg);
    color: var(--color-sepia-text);
    border-left-color: var(--color-sepia-blue);
}

html.theme-sepia aside.blurb a {
    color: var(--color-sepia-input-bg);
}

html.theme-sepia ul.panels li {
    background-color: var(--color-sepia-odd-section-bg);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

html.theme-sepia ul.panels li:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

html.theme-sepia table {
    background-color: var(--color-sepia-input-bg);
    border: 1px solid var(--color-sepia-notebox-border);
}

html.theme-sepia th {
    background-color: var(--color-sepia-blue);
    color: var(--color-sepia-input-bg);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

html.theme-sepia td {
    border-bottom: 1px solid var(--color-sepia-notebox-border);
    border-right: 1px solid var(--color-sepia-notebox-border);
}

html.theme-sepia tr:nth-child(even) {
    background-color: var(--color-sepia-odd-section-bg);
}

html.theme-sepia tr:hover {
    background-color: var(--color-sepia-info-bg);
}

html.theme-sepia #settings-panel, html.theme-sepia .panel {
    background-color: var(--color-sepia-odd-section-bg);
}

html.theme-sepia ul.chapterList li a {
    background-color: var(--color-sepia-blue);
    color: var(--color-sepia-input-bg);
}

html.theme-sepia ul.chapterList li a:hover {
    background-color: var(--color-sepia-header-gradient-end);
}

html.theme-sepia ul.chapterList li a:link,
html.theme-sepia ul.chapterList li a:visited {
    background-color: var(--color-sepia-blue);
    color: var(--color-sepia-input-bg);
}

html.theme-sepia ul.chapterList li a:hover {
    background-color: var(--color-sepia-header-gradient-end);
}

html.theme-sepia ul.verseList li a:link, html.theme-sepia ul.verseList li a:visited {
    background-color: var(--color-sepia-odd-section-bg);
    color: var(--color-sepia-blue);
    border: 1px solid var(--color-sepia-blue);
    font-size: 1rem;
    text-shadow: none;
    padding: 0.1rem 0rem 0rem 0rem;
}

html.theme-sepia ul.chapterList li a:hover, html.theme-sepia ul.verseList li a:hover {
    background-color: var(--color-sepia-header-gradient-end);
    color: var(--color-white);
}

html.theme-sepia p.editorNote {
    color: var(--color-sepia-header-gradient-end);
    font-weight: 600;
    font-style: italic;
}

/* Settings panel buttons */
html.theme-sepia #settings-panel label[for^="settings"],
html.theme-sepia #settings-panel label[for^="divineName"],
html.theme-sepia #settings-panel label[for^="son"],
html.theme-sepia #settings-panel label[for^="serif"],
html.theme-sepia #settings-panel label[for^="sans-serif"],
html.theme-sepia #settings-panel label[for^="camelcase"] {
    background-color: var(--color-sepia-settings-button-bg);
    border-color: var(--color-sepia-notebox-border);
    color: var(--color-sepia-settings-button-text);
}

/* Common hover/selected state for most buttons */
html.theme-sepia #settings-panel input[type="radio"]:checked + label,
html.theme-sepia #settings-panel label[for="radio"]:hover {
    background-color: var(--color-sepia-blue);
    color: var(--color-sepia-input-bg);
    border-color: var(--color-sepia-blue);
}

/* Display mode specific buttons */
html.theme-sepia #settings-panel label[for="settingsLightMode"]:hover,
html.theme-sepia #settings-panel input[type="radio"]:checked + label[for="settingsLightMode"] {
    background-color: var(--color-white);
    color: var(--color-black);
}

html.theme-sepia #settings-panel label[for="settingsDarkMode"]:hover,
html.theme-sepia #settings-panel input[type="radio"]:checked + label[for="settingsDarkMode"] {
    background-color: var(--color-black);
    color: var(--color-white);
}

html.theme-sepia #settings-panel label[for="settingsSepiaMode"]:hover,
html.theme-sepia #settings-panel input[type="radio"]:checked + label[for="settingsSepiaMode"] {
    background-color: var(--color-sepia-mode-bg);
    color: var(--color-sepia-text);
}

html.theme-sepia #settings-panel label[for="settingsAutoMode"]:hover,
html.theme-sepia #settings-panel input[type="radio"]:checked + label[for="settingsAutoMode"] {
    background-color: var(--color-sepia-blue);
    color: var(--color-sepia-input-bg);
}

html.theme-sepia #settings-panel input[type="radio"]:checked + label {
    border-color: var(--color-sepia-blue);
    font-weight: 600;
}

html.theme-sepia #context-menu {
    background-color: var(--color-sepia-odd-section-bg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

html.theme-sepia #context-menu ul li label {
    background-color: var(--color-sepia-settings-button-bg);
    color: var(--color-sepia-settings-button-text);
}

html.theme-sepia #context-menu ul li label:hover {
    background-color: var(--color-sepia-blue);
    color: var(--color-sepia-input-bg);
}

html.theme-sepia header div#location-container span {
    background-color: var(--color-sepia-input-bg);
    color: var(--color-sepia-text);
}

html.theme-sepia header div#location-container span:hover {
    background-color: var(--color-sepia-article-bg);
}

html.theme-sepia button, html.theme-sepia a.button {
    background-color: var(--color-primary-yellow-button);
    color: var(--color-black);
}

html.theme-sepia button:hover, html.theme-sepia a.button:hover {
    background-color: var(--color-primary-yellow-button-hover);
}

html.theme-sepia article a[href*="/notes/"],
html.theme-sepia article a[href*="/notes/"] mark, html.theme-sepia article.notes h2,
html.theme-sepia #floating-preview a[href*="/notes/"],
html.theme-sepia #floating-preview a[href*="/notes/"] mark {
    color: var(--color-sepia-green);
}

html.theme-sepia a[href*="commentaries.2001translation.org"]:link,
html.theme-sepia a[href*="commentaries.2001translation.org"]:visited,
html.theme-sepia #floating-preview a[href*="commentaries.2001translation.org"]:link,
html.theme-sepia #floating-preview a[href*="commentaries.2001translation.org"]:visited {
    color: rgb(120, 80, 50);
}

html.theme-sepia main article #hero {
    background-color: rgb(221, 199, 103);
    background-image: url(/img/sunset.jpg);
    background-position: top;
}

html.theme-sepia main article #hero #dove img {
    filter: brightness(0.9) contrast(0.9) sepia(0.5) saturate(1);
}

/* Mark tag */
html.theme-sepia mark {
    background-color: var(--color-sepia-mark-bg);
}

/* Floating Preview */
html.theme-sepia #floating-preview {
    background-color: var(--color-sepia-article-bg);
    border-color: var(--color-sepia-notebox-border);
    color: var(--color-sepia-text); /* Ensure text color is sepia-toned */
}

html.theme-sepia #floating-preview section {
    border-top: 1px solid var(--color-sepia-notebox-border);
}

html.theme-sepia article.interlinears h4.interlinearVerseNumber + ul li.opened {
    background-color:var(--color-sepia-article-bg);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Interlinear highlights */
html.theme-sepia article.interlinears h4.interlinearVerseNumber + ul:nth-of-type(odd) {
    background-color: var(--color-sepia-odd-section-bg);
}

html.theme-sepia article.interlinears h4.interlinearVerseNumber:target {
    background-color: var(--color-sepia-mark-bg);
}

html.theme-sepia article.interlinears h4.interlinearVerseNumber:target + ul, html.theme-sepia article.interlinears h4.interlinearVerseNumber:target + ul:nth-child(odd) {
    background-color: var(--color-sepia-input-focus-bg);
}