/* Переменные для переключения тем */
:root {
  --bg: #ffffff;
  --text: #111111;
  --link:  #0066cc;
  --hover:  darkred;
  --table-lines: darkgray; 
  --table-even-bg:  #f2f2f2;
  --table-odd-bg:  white;
  --specs-color: white;
  --specs-bg: rgb(41, 59, 75);
  --specs-link: rgb(0, 150, 207);
  --specs-hover: rgba(255, 255, 0, 0.667);
  --border: rgb(144, 159, 183);
  --border-hover: rgb(19,90,70);
  --border-active: rgb(139,0,0);
  --shadow: rgba(1, 7, 39, 0.1) 0 0.25rem 1.2rem 0;
  --shadow-hover: rgba(19, 90, 170, 0.9) 0 0.25rem 0.6rem 0;
  --shadow-active: rgba(139, 0, 100, 0.9) 0 0.25rem 0.6rem 0;
  --price-bg: #e1e0e0e8;
  --chapter-dark: rgb(255,255,255);
  --chapter-dark-bg: rgb(41, 59, 75);
  --price-font-size: 90%;
  --product-select-width: 16rem;
  --price-result-width: 70%;
}
.dark {
  --bg: #1a1a1a;
  --text: rgb(197,197,197);
  --link:  rgb(0, 150, 207);
  --hover:  rgba(255, 255, 0, 0.667);
  --table-lines: gray; 
  --table-even-bg: rgb(21, 28, 35); 
  --table-odd-bg:  #1a1a1a;
  --specs-color: white;
  --specs-bg: rgb(27, 39, 50);
  --specs-link: rgb(0, 150, 207);
  --specs-hover: rgba(255, 255, 0, 0.667);
  --border: rgb(144, 159, 183);
  --border-hover: rgb(19,90,70);
  --border-active: rgb(161, 186, 5);
  --shadow: rgba(1, 7, 39, 0.1) 0 0.25rem 1.2rem 0;
  --shadow-hover: rgba(161, 186, 45, 0.9) 0 0.25rem 0.6rem 0;
  --shadow-active: rgba(209, 219, 11, 0.9) 0 0.25rem 0.6rem 0;  
  --price-bg: rgb(36, 36, 38);
  --chapter-dark: rgb(255,255,255);
  --chapter-dark-bg: rgb(41, 59, 75);
  --price-font-size: 90%;
  --product-select-width: 16rem;
}
/* Обнуляем отступы, чтобы хедер прилегал к краю */
html {
    font-size: 100%; /* 1rem = 16px (стандарт браузера) */
}
html, body {
    max-width: 75rem;
    margin: 0 auto;
    padding: 0;
}
body {
    background-color: var(--bg);
    color: var(--text);
    font-family: "Sans";
    font-size: 1rem;
}

a {
    color: var(--link);
    text-decoration: none;
}
a:hover {
    color: var(--hover);
    font-weight: 1.2rem;
}
h1 {
    font-size: calc(1rem + 2.1vw);
    font-weight: 300;
    line-height: 1.2;
}
table {
    width: 100%;
    margin: 0;
}
table:not([class]), thead:not([class]), tbody:not([class]), th:not([class]), tr:not([class]), td:not([class]) { 
    border: 2px solid var(--table-lines); 
    border-collapse: collapse; 
    background-color: var(--bg);
}
thead { 
    align-content: first baseline;
    font-size: 1rem;
    padding: 0.3rem 0.6rem 0.3rem 0.6rem;;
}
th { 
    align-content: first baseline;
    padding: 0.3rem 0.6rem 0.3rem 0.6rem;;
}
tr { 
    align-content: first baseline;
}
td { 
    align-content: first baseline;
    padding: 0.3rem 0.6rem 0.3rem 0.6rem;;
}
tr:nth-child(even) :not([class]) { background-color: var(--table-even-bg); }
tr:nth-child(odd)  :not([class]) { background-color: var(--table-odd-bg);  }


.theme {
    display: flex;
    gap: 0;
}
.theme-button {
    color: var(--text);
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.theme-button:hover {
    opacity: 1;
}