/**
 * Relatia Reader - Themes: light, dark, sepia, high-contrast.
 * Includes @font-face for OpenDyslexic.
 */

/* ============================================================
   OpenDyslexic Font
   ============================================================ */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('../media/fonts/OpenDyslexic-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('../media/fonts/OpenDyslexic-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Font Family Mappings
   ============================================================ */
.relatia-reader[data-font="serif"] {
  font-family: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  font-weight: 300;
}

.relatia-reader[data-font="sans-serif"] {
  font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.relatia-reader[data-font="monospace"] {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}

.relatia-reader[data-font="opendyslexic"] {
  font-family: 'OpenDyslexic', sans-serif;
}

/* ============================================================
   Light Theme (default)
   ============================================================ */
.relatia-reader[data-theme="light"] {
  background-color: #ffffff;
  color: #222222;
}

.relatia-reader[data-theme="light"] .relatia-reader-content,
.relatia-reader[data-theme="light"] .relatia-reader-content p,
.relatia-reader[data-theme="light"] .relatia-reader-content .wp-block-paragraph {
  color: #222222;
}

.relatia-reader[data-theme="light"] .relatia-reader-toolbar {
  background: #fafafa;
  border-color: #e0e0e0;
}

.relatia-reader[data-theme="light"] .relatia-reader-config-panel {
  background: #f5f5f5;
  border-color: #e0e0e0;
}

.relatia-reader[data-theme="light"] .relatia-reader-nav-bottom {
  background: #fafafa;
  border-color: #e0e0e0;
}

.relatia-reader[data-theme="light"] .relatia-reader-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.relatia-reader[data-theme="light"] .relatia-reader-select,
.relatia-reader[data-theme="light"] .relatia-reader-columns-select {
  background: #fff;
  color: #222;
  border-color: #ccc;
}

/* ============================================================
   Sepia Theme
   ============================================================ */
.relatia-reader[data-theme="sepia"] {
  background-color: #f4ecd8;
  color: #5b4636;
}

.relatia-reader[data-theme="sepia"] .relatia-reader-content,
.relatia-reader[data-theme="sepia"] .relatia-reader-content p,
.relatia-reader[data-theme="sepia"] .relatia-reader-content .wp-block-paragraph {
  color: #5b4636;
}

.relatia-reader[data-theme="sepia"] .relatia-reader-toolbar {
  background: #efe6d0;
  border-color: #d4c9a8;
}

.relatia-reader[data-theme="sepia"] .relatia-reader-config-panel {
  background: #ebe2cc;
  border-color: #d4c9a8;
}

.relatia-reader[data-theme="sepia"] .relatia-reader-nav-bottom {
  background: #efe6d0;
  border-color: #d4c9a8;
}

.relatia-reader[data-theme="sepia"] .relatia-reader-btn:hover {
  background: rgba(91, 70, 54, 0.1);
}

.relatia-reader[data-theme="sepia"] .relatia-reader-select,
.relatia-reader[data-theme="sepia"] .relatia-reader-columns-select {
  background: #f4ecd8;
  color: #5b4636;
  border-color: #c5b898;
}

.relatia-reader[data-theme="sepia"] .relatia-reader-sentence:hover {
  background: rgba(91, 70, 54, 0.06);
}

.relatia-reader[data-theme="sepia"] .relatia-reader-tts-active {
  background: rgba(180, 140, 80, 0.25);
  outline-color: rgba(180, 140, 80, 0.5);
}

/* ============================================================
   Dark Theme
   ============================================================ */
.relatia-reader[data-theme="dark"] {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border-color: #333;
}

.relatia-reader[data-theme="dark"] .relatia-reader-content,
.relatia-reader[data-theme="dark"] .relatia-reader-content p,
.relatia-reader[data-theme="dark"] .relatia-reader-content .wp-block-paragraph {
  color: #e0e0e0;
}

.relatia-reader[data-theme="dark"] .relatia-reader-toolbar {
  background: #252525;
  border-color: #333;
}

.relatia-reader[data-theme="dark"] .relatia-reader-config-panel {
  background: #2a2a2a;
  border-color: #333;
}

.relatia-reader[data-theme="dark"] .relatia-reader-nav-bottom {
  background: #252525;
  border-color: #333;
}

.relatia-reader[data-theme="dark"] .relatia-reader-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.relatia-reader[data-theme="dark"] .relatia-reader-btn:focus-visible {
  outline-color: #6ab0f3;
}

.relatia-reader[data-theme="dark"] .relatia-reader-select,
.relatia-reader[data-theme="dark"] .relatia-reader-columns-select {
  background: #333;
  color: #e0e0e0;
  border-color: #555;
}

.relatia-reader[data-theme="dark"] .relatia-reader-slider {
  accent-color: #6ab0f3;
}

.relatia-reader[data-theme="dark"] .relatia-reader-sentence:hover {
  background: rgba(255, 255, 255, 0.05);
}

.relatia-reader[data-theme="dark"] .relatia-reader-tts-active {
  background: rgba(106, 176, 243, 0.2);
  outline-color: rgba(106, 176, 243, 0.4);
}

.relatia-reader[data-theme="dark"] .relatia-reader-theme-btn.active {
  border-color: #6ab0f3;
}

/* ============================================================
   High Contrast Theme
   ============================================================ */
.relatia-reader[data-theme="high-contrast"] {
  background-color: #000000;
  color: #ffffff;
  border-color: #fff;
}

.relatia-reader[data-theme="high-contrast"] .relatia-reader-content,
.relatia-reader[data-theme="high-contrast"] .relatia-reader-content p,
.relatia-reader[data-theme="high-contrast"] .relatia-reader-content .wp-block-paragraph {
  color: #ffffff;
}

.relatia-reader[data-theme="high-contrast"] .relatia-reader-toolbar {
  background: #111;
  border-color: #fff;
}

.relatia-reader[data-theme="high-contrast"] .relatia-reader-config-panel {
  background: #111;
  border-color: #fff;
}

.relatia-reader[data-theme="high-contrast"] .relatia-reader-nav-bottom {
  background: #111;
  border-color: #fff;
}

.relatia-reader[data-theme="high-contrast"] .relatia-reader-btn {
  color: #fff;
}

.relatia-reader[data-theme="high-contrast"] .relatia-reader-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.relatia-reader[data-theme="high-contrast"] .relatia-reader-btn:focus-visible {
  outline-color: #ffff00;
}

.relatia-reader[data-theme="high-contrast"] .relatia-reader-select,
.relatia-reader[data-theme="high-contrast"] .relatia-reader-columns-select {
  background: #000;
  color: #fff;
  border-color: #fff;
}

.relatia-reader[data-theme="high-contrast"] .relatia-reader-slider {
  accent-color: #ffff00;
}

.relatia-reader[data-theme="high-contrast"] .relatia-reader-sentence:hover {
  background: rgba(255, 255, 255, 0.1);
}

.relatia-reader[data-theme="high-contrast"] .relatia-reader-tts-active {
  background: rgba(255, 255, 0, 0.3);
  outline-color: rgba(255, 255, 0, 0.6);
}

.relatia-reader[data-theme="high-contrast"] .relatia-reader-theme-btn.active {
  border-color: #ffff00;
}

.relatia-reader[data-theme="high-contrast"] .relatia-reader-theme-preview-high-contrast {
  border: 2px solid #ffff00;
}