/* Temas de cores selecionáveis. A estrutura das páginas é a mesma; mudam a cor * de destaque E as cores de superfície (fundo, cards, texto), permitindo temas * claros e escuros. Aplicado via data-theme no (theme.js + localStorage). * * Variáveis: * --accent / --accent-dark / --accent-soft / --accent-text : cor de destaque * --bg fundo geral da página * --surface fundo de cards/blocos/inputs * --surface-2 fundo secundário (chips, áreas suaves) * --text cor do texto principal * --muted cor de texto secundário * --border cor de bordas/divisórias */ :root { --accent: #01696f; --accent-dark: #01474b; --accent-soft: #e3efee; --accent-text: #f9f8f4; --bg: #f2efe6; --surface: #fbfbf9; --surface-2: #efeee9; --text: #28251d; --muted: #6b675d; --border: #e2ded3; } /* ===================== TEMAS CLAROS ===================== */ html[data-theme="turquesa"] { --accent: #01696f; --accent-dark: #01474b; --accent-soft: #e3efee; --accent-text: #f9f8f4; --bg: #f2f6f5; --surface: #ffffff; --surface-2: #e8f0ef; --text: #1e2a29; --muted: #5f6b69; --border: #d7e2e0; } html[data-theme="areia"] { --accent: #b45309; --accent-dark: #7c3d06; --accent-soft: #f5e8d6; --accent-text: #fff8ef; --bg: #f7f1e6; --surface: #fffdf8; --surface-2: #f0e7d5; --text: #35301f; --muted: #6f6753; --border: #e6dcc5; } html[data-theme="ceu"] { --accent: #1d4ed8; --accent-dark: #1e3a8a; --accent-soft: #e2eafb; --accent-text: #f5f8ff; --bg: #eef3fb; --surface: #ffffff; --surface-2: #e3ebf8; --text: #1c2536; --muted: #5a647a; --border: #d6e0f2; } html[data-theme="jardim"] { --accent: #0f9d58; --accent-dark: #0b6e3e; --accent-soft: #e0f2e8; --accent-text: #f4fff8; --bg: #eef6f0; --surface: #ffffff; --surface-2: #e2f0e7; --text: #1d2a22; --muted: #5c6b61; --border: #d5e7dc; } html[data-theme="rosa"] { --accent: #be185d; --accent-dark: #831843; --accent-soft: #f8e2ee; --accent-text: #fff5fa; --bg: #fbeff5; --surface: #fffafc; --surface-2: #f6e0ec; --text: #33202a; --muted: #75606a; --border: #f0d3e0; } /* ===================== TEMAS ESCUROS ===================== */ html[data-theme="noturno"] { --accent: #38bdf8; --accent-dark: #0ea5e9; --accent-soft: #1e3a4a; --accent-text: #06121a; --bg: #0f172a; --surface: #1e293b; --surface-2: #273449; --text: #e6edf5; --muted: #9aa8bd; --border: #33425c; } html[data-theme="carvao"] { --accent: #f59e0b; --accent-dark: #d97706; --accent-soft: #3a3016; --accent-text: #1a1405; --bg: #17181b; --surface: #232529; --surface-2: #2e3136; --text: #e8e6df; --muted: #a1a099; --border: #3a3d43; } html[data-theme="vinho"] { --accent: #fb7185; --accent-dark: #f43f5e; --accent-soft: #45141f; --accent-text: #1a0509; --bg: #1c1013; --surface: #291a1e; --surface-2: #33232a; --text: #f0e2e5; --muted: #b498a0; --border: #45303a; } html[data-theme="floresta"] { --accent: #4ade80; --accent-dark: #22c55e; --accent-soft: #163524; --accent-text: #04140b; --bg: #0f1a14; --surface: #17261d; --surface-2: #1f3227; --text: #e0efe4; --muted: #94ad9e; --border: #2b4234; } html[data-theme="ametista"] { --accent: #c084fc; --accent-dark: #a855f7; --accent-soft: #2e1f45; --accent-text: #120720; --bg: #17131f; --surface: #221b2e; --surface-2: #2c2439; --text: #ece6f5; --muted: #a99bbd; --border: #392f4c; } /* =========== Aplicação das variáveis aos elementos =========== */ body { background: var(--bg); color: var(--text); } /* Página com classe .page (jogador, login, magias, log, inventário, etc.) */ .page { background: var(--bg); color: var(--text); } .page h1 { color: var(--accent-dark); } .page h2, .page h3 { color: var(--text); } .page a { color: var(--accent); } .page .muted, .muted { color: var(--muted); } /* Cards e blocos */ .card { background: var(--surface); color: var(--text); } .sheet-block { background: var(--surface); border-color: var(--border); color: var(--text); } .block-title { color: var(--accent-dark); border-bottom-color: var(--border); } .identity-block .char-name { color: var(--accent-dark); } .login-page .page-content { background: var(--surface); } details.inventory-entry { background: var(--surface); border-color: var(--border); } .vault-card, .log-item { background: var(--surface); color: var(--text); } .money-page, .page-content { color: var(--text); } /* Combate / atributos */ .combat-stat { background: var(--surface-2); border-color: var(--border); } .combat-stat.big { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, var(--surface)); } .cs-value { color: var(--text); } .cs-label, .cs-sub { color: var(--muted); } .attr-box { background: var(--surface); border-color: var(--border); } .attr-name { color: var(--accent-dark); } .attr-score { color: var(--muted); } .stat-chip { background: var(--surface-2); border-color: var(--border); color: var(--text); } /* Campos de formulário */ .page input, .page select, .page textarea { background: var(--surface); color: var(--text); border-color: var(--border); } .page input::placeholder, .page textarea::placeholder { color: var(--muted); } .page input:focus, .page select:focus, .page textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } /* Botões e destaques */ .btn { background: var(--accent); color: var(--accent-text); } .btn:hover { background: var(--accent-dark); } .page button, .page .btn { background: var(--accent); color: var(--accent-text); } .page button:hover, .page .btn:hover { background: var(--accent-dark); } .inline-form button { background: var(--accent); color: var(--accent-text); } /* Navegação do jogador e sidebar do mestre */ .player-nav { background: var(--accent-dark); } .player-nav a { color: color-mix(in srgb, var(--accent-text) 85%, #fff); } .player-nav .brand { color: var(--accent-text); } .layout { background: var(--bg); } .sidebar { background: var(--accent-dark); color: var(--accent-text); } .nav-item { background: color-mix(in srgb, var(--accent-dark) 70%, #000); color: var(--accent-text); } .nav-item:hover { background: color-mix(in srgb, var(--accent-dark) 50%, #000); } .main { background: var(--bg); color: var(--text); } /* Dashboard do mestre: cards e histórico */ .day-entry { background: var(--surface-2); border-left-color: var(--border); } .day-entry.current { border-left-color: var(--accent); background: var(--accent-soft); } /* Controles do mapa (o mapa em si permanece escuro por natureza) */ .control-block button { background: var(--accent); color: var(--accent-text); } .control-block summary { color: var(--accent); } /* Histórico/prof lists */ .prof-list li { color: color-mix(in srgb, var(--accent) 55%, var(--text)); } /* Barra de seleção de tema */ .theme-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 0.9rem; } .theme-bar label { font-weight: 600; color: var(--accent-dark); } .theme-bar select { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); } .theme-swatches { display: flex; gap: 6px; flex-wrap: wrap; } .theme-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; } .theme-swatch.active { border-color: var(--text); } .theme-kind { font-size: 0.75rem; color: var(--muted); } /* =========== Correções de contraste (temas escuros) =========== */ /* Os cartões implícitos (formulário da ficha e entradas) tinham fundo claro * fixo no styles.css, o que deixava títulos/labels ilegíveis nos temas escuros. * Aqui alinhamos esses fundos ao tema e garantimos texto legível. */ .page form:not(.inline-form):not(.stacked-form):not(.player-nav), .page .inventory-entry { background: var(--surface); color: var(--text); border-color: var(--border); } .page form:not(.inline-form):not(.stacked-form):not(.player-nav) label, .page label { color: var(--text); } /* Os "chips" de moeda (pp, po, pl...) têm fundo claro fixo; o texto fica sempre * escuro para não sumir em nenhum tema (claro ou escuro). */ .balances li, .balances li strong { color: #111 !important; }