/* Daybreak Online — sistema de temas (Clean e Dark).
 *
 * Os tokens sao publicados em canais RGB separados para permitir transparencia
 * sem duplicar a cor: rgb(var(--t-surface) / .6). Cada token tambem tem uma
 * versao pronta em --db-*, usada pelo CSS antigo que espera uma cor completa.
 *
 * O tema vem do atributo data-theme no <html>. O padrao e o escuro; o claro so
 * entra quando o jogador escolhe. A preferencia fica no navegador dele.
 */

:root,
:root[data-theme='dark'] {
  /* Superficies: do fundo da pagina ate o card mais alto.
   * Carvao neutro, sem desvio de cor. O marrom que havia aqui antes sujava o
   * dourado; num fundo neutro a cor da marca aparece muito mais. */
  --t-bg: 24 24 25;
  --t-surface: 31 31 33;
  --t-surface-2: 41 41 44;
  --t-sunken: 16 16 17;

  /* Texto. */
  --t-ink: 236 234 230;
  --t-ink-muted: 174 172 168;
  --t-ink-subtle: 134 133 130;

  /* Linhas e molduras. */
  --t-line: 58 58 62;
  --t-line-strong: 92 92 98;

  /* Ouro da marca: continua sendo a cor de acao. */
  --t-gold: 215 168 77;
  --t-gold-light: 241 207 123;
  --t-gold-dark: 143 105 46;
  --t-gold-ink: 21 19 13;

  /* Texto digitado em campos. Separado do texto comum porque o valor
   * preenchido precisa ficar na cor do botao no tema claro. */
  --t-field-ink: 236 234 230;

  /* Apoio. */
  --t-teal: 82 201 169;
  --t-danger: 227 111 111;
  --t-warn: 233 184 100;
  --t-ok: 94 212 183;

  /* Sombra e brilho dependem do tema para nao sumir nem pesar. */
  --t-shadow: 0 0 0;
  --t-shadow-strength: .5;
  /* Halo atras de titulo sobre ilustracao. Escurece no escuro e clareia no
   * claro; usar a sombra comum deixava um borrao preto sobre o marfim. */
  --t-text-halo: 0 0 0;
  --t-glow-strength: .06;

  color-scheme: dark;
}

:root[data-theme='light'] {
  --t-bg: 251 248 241;
  --t-surface: 255 253 249;
  --t-surface-2: 246 242 233;
  --t-sunken: 239 233 220;

  /* O painel usa muito texto de 7 a 9px. Sobre marfim esses tamanhos exigem
   * tons mais escuros do que a paleta clara pediria em textos normais. */
  --t-ink: 43 38 33;
  --t-ink-muted: 87 78 67;
  --t-ink-subtle: 111 99 85;

  --t-line: 224 214 197;
  --t-line-strong: 194 172 134;

  /* A rampa do ouro inverte de proposito. No escuro, "light" e a variante de
   * destaque porque brilha; sobre marfim quem destaca e a mais escura. Manter a
   * ordem original deixaria todo texto dourado lavado no tema claro. */
  --t-gold: 143 106 40;
  --t-gold-light: 107 79 30;
  --t-gold-dark: 178 145 88;
  --t-gold-ink: 255 250 240;

  /* Marrom do botao: o valor preenchido fica na mesma familia da acao. */
  --t-field-ink: 107 79 30;

  --t-teal: 31 127 104;
  --t-danger: 176 47 42;
  --t-warn: 139 95 22;
  --t-ok: 39 118 76;

  --t-shadow: 69 44 17;
  --t-shadow-strength: .10;
  --t-text-halo: 255 253 249;
  --t-glow-strength: .03;

  color-scheme: light;
}

/* Cores prontas, para o CSS que ainda usa var(--db-*) direto. */
:root {
  --db-bg: rgb(var(--t-bg));
  --db-surface: rgb(var(--t-surface));
  --db-surface-2: rgb(var(--t-surface-2));
  --db-sunken: rgb(var(--t-sunken));
  --db-text: rgb(var(--t-ink));
  --db-muted: rgb(var(--t-ink-muted));
  --db-subtle: rgb(var(--t-ink-subtle));
  --db-line: rgb(var(--t-line));
  --db-line-strong: rgb(var(--t-line-strong));
  --db-gold: rgb(var(--t-gold));
  --db-gold-light: rgb(var(--t-gold-light));
  --db-gold-dark: rgb(var(--t-gold-dark));
  --db-gold-ink: rgb(var(--t-gold-ink));
  --db-teal: rgb(var(--t-teal));
  --db-danger: rgb(var(--t-danger));

  /* Nomes antigos do painel do jogador. */
  --db-panel: rgb(var(--t-surface));
  --db-panel-soft: rgb(var(--t-surface-2));

  /* Aliases do site publico, que usa outros nomes para as mesmas coisas. */
  --ink: rgb(var(--t-ink));
  --muted: rgb(var(--t-ink-muted));
  --gold: rgb(var(--t-gold));
  --gold-light: rgb(var(--t-gold-light));
  --gold-dark: rgb(var(--t-gold-dark));
  --night: rgb(var(--t-bg));
  --panel: rgb(var(--t-surface));
  --panel-2: rgb(var(--t-surface-2));
  --line: rgb(var(--t-line));
  --teal: rgb(var(--t-teal));

  --db-serif: 'Cinzel', Georgia, serif;
  --db-sans: 'Manrope', Arial, sans-serif;
  --serif: 'Cinzel', Georgia, serif;
  --sans: 'Manrope', Arial, sans-serif;

  /* Acabamento dos botoes e cards, no espirito do Metin2BR. */
  --db-radius: 5px 2px 5px 2px;
  --db-radius-card: 9px 2px 9px 2px;
  --db-shadow-card: 0 10px 26px rgb(var(--t-shadow) / var(--t-shadow-strength));
  --db-shadow-raised: 0 16px 34px rgb(var(--t-shadow) / calc(var(--t-shadow-strength) + .08));
}

/* A troca de tema nao deve piscar a tela inteira durante a transicao. */
:root[data-theme-ready] body,
:root[data-theme-ready] .db-card,
:root[data-theme-ready] .db-button {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

::selection { background: rgb(var(--t-gold) / .3); color: rgb(var(--t-ink)); }

* { scrollbar-width: thin; scrollbar-color: rgb(var(--t-gold) / .55) rgb(var(--t-sunken)); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgb(var(--t-sunken)); }
::-webkit-scrollbar-thumb { background: rgb(var(--t-gold) / .55); border: 2px solid rgb(var(--t-sunken)); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--t-gold)); }

/* Controles de formulario.
 *
 * A lista de um <select> nativo e desenhada pelo sistema e herda a cor do
 * proprio campo: sem estas regras, o texto do dropdown some no tema claro.
 * Placeholders tambem nao tinham regra e ficavam a cargo do navegador.
 */
select option { color: rgb(var(--t-ink)); background: rgb(var(--t-surface)); }
select option:checked { background: rgb(var(--t-gold) / .18); }
input::placeholder, textarea::placeholder { color: rgb(var(--t-ink-subtle)); opacity: 1; }
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: rgb(var(--t-field-ink));
  -webkit-box-shadow: 0 0 0 1000px rgb(var(--t-sunken)) inset;
  caret-color: rgb(var(--t-field-ink));
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { filter: var(--t-picker-filter, none); cursor: pointer; }
:root[data-theme='dark'] { --t-picker-filter: invert(1) brightness(.85); }

/* Seletor de tema, compartilhado pelas tres areas. */
.db-theme-switch { display: inline-flex; flex-shrink: 0; gap: 3px; padding: 4px; border: 1px solid rgb(var(--t-line)); background: rgb(var(--t-sunken) / .5); border-radius: 7px; }
.db-theme-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 5px 10px; border: 1px solid transparent; border-radius: 4px; background: none; color: rgb(var(--t-ink-muted)); font: 700 10px/1 var(--db-sans); letter-spacing: .04em; cursor: pointer; transition: color .16s ease, border-color .16s ease, background .16s ease; }
.db-theme-switch button:hover { color: rgb(var(--t-gold-light)); }
.db-theme-switch button[aria-pressed='true'] { border-color: rgb(var(--t-line-strong) / .6); background: rgb(var(--t-surface)); color: rgb(var(--t-gold)); }
.db-theme-switch svg { width: 14px; height: 14px; }
@media (max-width: 700px) { .db-theme-switch button span { display: none; } }