/* ===================================================================== themes.css — temas (claro / sépia / escuro), fonte e tamanho do texto Controlados por atributos no : data-theme, data-font, data-size ===================================================================== */ /* ---------- Tema Claro (padrão) ---------- */ :root, [data-theme="light"] { --bg: #f6f4ee; --surface: #ffffff; --text: #16263a; --muted: #6a7787; --accent: #0d3b66; /* Azul Profundo (3 círculos) */ --accent-soft: #e7eef6; --gold: #d4a017; /* Dourado */ --gold-on-dark: #f0c043; --border: #e4e0d6; --hover: #eef0f3; --header-bg: #ffffff; --header-text: #16263a; --mark-bg: #ffe45e; /* destaque de busca */ } /* ---------- Tema Sépia ---------- */ [data-theme="sepia"] { --bg: #f3ead6; --surface: #faf3e1; --text: #463a28; --muted: #8a7a5c; --accent: #8a5a1c; --accent-soft: #efe2c6; --gold: #b5851f; --gold-on-dark: #e6c068; --border: #e0d2b2; --hover: #ece0c6; --header-bg: #faf3e1; --header-text: #463a28; --mark-bg: #f3d36b; } /* ---------- Tema Escuro ---------- */ [data-theme="dark"] { --bg: #0f1722; --surface: #16202e; --text: #e2e8f0; --muted: #8ea2b8; --accent: #4f9be0; /* azul mais claro p/ contraste */ --accent-soft: #1d2c3e; --gold: #f0b429; --gold-on-dark: #f7cf63; --border: #25344a; --hover: #1c2838; --header-bg: #111b27; --header-text: #e2e8f0; --mark-bg: #b59512; } /* ---------- Fonte de leitura ---------- */ :root { --reading-font: Georgia, "Times New Roman", serif; } [data-font="serif"] { --reading-font: Georgia, "Times New Roman", serif; } [data-font="sans"] { --reading-font: Inter, -apple-system, "Segoe UI", Arial, sans-serif; } /* ---------- Tamanho do texto (zoom dinâmico) ---------- */ [data-size="1"] { --reading-size: 0.95rem; } [data-size="2"] { --reading-size: 1.05rem; } [data-size="3"] { --reading-size: 1.15rem; } /* padrão = 100% */ [data-size="4"] { --reading-size: 1.28rem; } [data-size="5"] { --reading-size: 1.42rem; } [data-size="6"] { --reading-size: 1.58rem; } [data-size="7"] { --reading-size: 1.78rem; }