/*
 * theme.css — BRChad Cruzadinha Player
 * ─────────────────────────────────────────────────────────────────────────────
 * Tema claro (padrão) e escuro (classe .cw-dark no body).
 * Para customizar: edite as variáveis em :root e body.cw-dark.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── TEMA CLARO (padrão) ─────────────────────────────────────────────────── */
:root {
  --cw-bg:              #ffffff;
  --cw-bg-secondary:    #f5f5f5;
  --cw-text:            #1a1a1a;
  --cw-text-muted:      #666666;
  --cw-border:          #cccccc;

  --cw-cell-bg:         #ffffff;
  --cw-cell-black:      #1a1a1a;
  --cw-cell-selected:   #a7d8f0;
  --cw-cell-active:     #d4eaf7;
  --cw-cell-correct:    #b5e8b5;
  --cw-cell-wrong:      #f5a5a5;
  --cw-cell-revealed:   #f7e4a5;

  --cw-menu-bg:         #f0f0f0;
  --cw-menu-border:     #dddddd;
  --cw-btn-bg:          #e8e8e8;
  --cw-btn-hover:       #d0d0d0;
  --cw-btn-text:        #1a1a1a;
  --cw-btn-active-bg:   #c8c8c8;

  --cw-clue-bg:         #f8f8f8;
  --cw-clue-active-bg:  #d4eaf7;
  --cw-clue-title-color:#333333;

  --cw-modal-bg:        #ffffff;
  --cw-modal-overlay:   rgba(0,0,0,0.4);

  --cw-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* ── TEMA ESCURO (.cw-dark no body) ──────────────────────────────────────── */
body.cw-dark {
  --cw-bg:              #1a1a2e;
  --cw-bg-secondary:    #16213e;
  --cw-text:            #e0d8cc;
  --cw-text-muted:      #9a9690;
  --cw-border:          #3a3a5a;

  --cw-cell-bg:         #252635;
  --cw-cell-black:      #0d0d1a;
  --cw-cell-selected:   #2a6496;
  --cw-cell-active:     #1a3a5c;
  --cw-cell-correct:    #1a4a2a;
  --cw-cell-wrong:      #4a1a1a;
  --cw-cell-revealed:   #4a3a0a;

  --cw-menu-bg:         #0f0f1e;
  --cw-menu-border:     #2a2a4a;
  --cw-btn-bg:          #1e1e3a;
  --cw-btn-hover:       #2a2a4e;
  --cw-btn-text:        #e0d8cc;
  --cw-btn-active-bg:   #2e2e5e;

  --cw-clue-bg:         #141428;
  --cw-clue-active-bg:  #1a3a5c;
  --cw-clue-title-color:#c8b560;

  --cw-modal-bg:        #1a1a2e;
  --cw-modal-overlay:   rgba(0,0,0,0.7);
}

/* ── APLICAÇÃO DAS VARIÁVEIS ─────────────────────────────────────────────── */

html, body {
  background: var(--cw-bg);
  color: var(--cw-text);
  font-family: var(--cw-font);
  transition: background 0.2s, color 0.2s;
}

/* Barra superior e botões */
.cw-top-bar,
.cw-buttons-holder {
  background: var(--cw-menu-bg);
  border-bottom: 1px solid var(--cw-menu-border);
}

.cw-button {
  background: var(--cw-btn-bg);
  color: var(--cw-btn-text);
  border: 1px solid var(--cw-menu-border);
  transition: background 0.15s;
}

.cw-button:hover {
  background: var(--cw-btn-hover);
}

.cw-button.cw-button-active,
.cw-menu-container.open > .cw-button {
  background: var(--cw-btn-active-bg);
}

/* Menus dropdown */
.cw-menu {
  background: var(--cw-menu-bg);
  border: 1px solid var(--cw-menu-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.cw-menu-item {
  color: var(--cw-btn-text);
  background: transparent;
}

.cw-menu-item:hover {
  background: var(--cw-btn-hover);
}

/* Painel de pistas */
.cw-clues-holder {
  background: var(--cw-clue-bg);
}

.cw-clue {
  color: var(--cw-text);
  border-bottom: 1px solid var(--cw-border);
}

.cw-clue.cw-clue-active {
  background: var(--cw-clue-active-bg);
}

.cw-clues-title {
  color: var(--cw-clue-title-color);
  background: var(--cw-bg-secondary);
  border-bottom: 1px solid var(--cw-border);
  font-weight: 600;
}

.cw-clue-number {
  color: var(--cw-text-muted);
}

/* Pista ativa no topo */
.cw-top-text-wrapper {
  background: var(--cw-bg-secondary);
  border-bottom: 1px solid var(--cw-border);
}

.cw-top-text {
  color: var(--cw-text);
}

/* Título da cruzadinha */
.cw-title {
  color: var(--cw-text);
}

/* Modal de configurações */
.cw-modal-wrapper,
.settings-wrapper {
  background: var(--cw-modal-bg);
  color: var(--cw-text);
  border: 1px solid var(--cw-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.settings-description {
  color: var(--cw-text-muted);
  font-weight: 600;
}

.settings-label {
  color: var(--cw-text);
}

.settings-setting {
  border-bottom: 1px solid var(--cw-border);
}

/* Botão timer */
.cw-button-timer {
  color: var(--cw-text-muted);
}

/* Scrollbar (dark mode) */
body.cw-dark ::-webkit-scrollbar {
  width: 6px;
}
body.cw-dark ::-webkit-scrollbar-track {
  background: var(--cw-bg);
}
body.cw-dark ::-webkit-scrollbar-thumb {
  background: var(--cw-border);
  border-radius: 3px;
}