/*
  V7 — identidade visual e contraste

  Princípio visual:
  - Verde = identidade, navegação, ação e progresso.
  - Dourado = destaque editorial, reflexão e detalhes.
  - Bege/marfim = acolhimento no modo claro.
  - Grafite esverdeado = conforto no modo escuro.
  - O modo escuro preserva a mesma identidade do modo claro.
*/

:root {
  --bg: #f4f0e8;
  --surface: #fffdf8;
  --surface-2: #ebe4d8;
  --text: #1d2927;
  --muted: #5d6a67;
  --primary: #163a36;
  --primary-2: #24574f;
  --accent: #b98645;
  --accent-soft: #f3e3c7;
  --border: #d8d0c4;
  --success: #2f6f58;
  --danger: #873c3c;
  --on-primary: #ffffff;
  --on-accent: #1d2927;
  --editorial-gold-text: #654619;
}

/* Ações principais usam o verde da identidade. O dourado fica como destaque. */
.button.primary {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

.button.primary:hover {
  background: var(--primary-2);
  border-color: var(--primary-2);
}

/* Dentro do hero, o dourado funciona como CTA de contraste sem dominar a interface. */
.hero .button.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

.hero .button.primary:hover {
  filter: brightness(.96);
}

.hero {
  background: linear-gradient(145deg, #163a36 0%, #1f4b44 100%);
  color: #ffffff;
}

.hero .eyebrow { color: #e1c18e; }
.hero p { color: rgba(255,255,255,.90); }
.hero .button.ghost { color: #ffffff; border-color: rgba(255,255,255,.52); }

.brand-mark,
.day-number,
.day-dot.current,
.status-option input:checked + span,
.bottom-nav button.active {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

.stat strong { color: var(--primary-2); }

.principles .number {
  background: var(--accent-soft);
  color: var(--editorial-gold-text);
}

.minimum {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

.notice {
  background: #edf3f0;
  border-color: #c9d9d3;
}

.notice.warning {
  background: #fbf0e2;
  border-color: #e3cba8;
}

.card a:not(.button) {
  color: var(--primary-2);
  text-decoration-thickness: .09em;
  text-underline-offset: .16em;
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

/*
  MODO ESCURO
  Não trocamos mais o verde pelo dourado. O verde continua sendo a cor estrutural.
  O dourado aparece somente em destaques, pequenos títulos e detalhes editoriais.
*/
body.dark:not(.high-contrast) {
  color-scheme: dark;
  --bg: #0f1715;
  --surface: #17231f;
  --surface-2: #22302b;
  --text: #f6f0e6;
  --muted: #bac4bf;
  --primary: #2d6258;
  --primary-2: #8fc3b7;
  --accent: #d6a85f;
  --accent-soft: #3a3022;
  --border: #394943;
  --success: #34745e;
  --danger: #e19a9a;
  --focus: #83c5ff;
  --on-primary: #ffffff;
  --on-accent: #15211f;
  --editorial-gold-text: #f0d29c;
  --shadow: 0 18px 44px rgba(0,0,0,.24);

  background:
    radial-gradient(circle at 10% -10%, rgba(214,168,95,.10), transparent 34%),
    linear-gradient(180deg, #0f1715, #121c19 56%, #0f1715);
}

body.dark:not(.high-contrast) .topbar,
body.dark:not(.high-contrast) .bottom-nav {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-color: var(--border);
}

body.dark:not(.high-contrast) .hero,
body.dark:not(.high-contrast) .v6-help-hero {
  background: linear-gradient(145deg, #2d6258 0%, #214a43 100%);
  color: #ffffff;
}

body.dark:not(.high-contrast) .hero p,
body.dark:not(.high-contrast) .hero .eyebrow {
  color: rgba(255,255,255,.90);
}

body.dark:not(.high-contrast) .hero .eyebrow {
  color: #edc985;
}

body.dark:not(.high-contrast) .hero .button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

body.dark:not(.high-contrast) .hero .button.ghost {
  color: #ffffff;
  border-color: rgba(255,255,255,.54);
}

body.dark:not(.high-contrast) .button.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

body.dark:not(.high-contrast) .button.primary:hover {
  background: #367267;
  border-color: #367267;
}

body.dark:not(.high-contrast) .button.secondary,
body.dark:not(.high-contrast) .icon-button,
body.dark:not(.high-contrast) .segmented button,
body.dark:not(.high-contrast) .text-tools button {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

body.dark:not(.high-contrast) .card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}

body.dark:not(.high-contrast) .day-dot,
body.dark:not(.high-contrast) .status-option span,
body.dark:not(.high-contrast) input[type="text"],
body.dark:not(.high-contrast) input[type="date"],
body.dark:not(.high-contrast) input[type="number"],
body.dark:not(.high-contrast) input[type="time"],
body.dark:not(.high-contrast) textarea,
body.dark:not(.high-contrast) select {
  background: #182621;
  border-color: var(--border);
  color: var(--text);
}

body.dark:not(.high-contrast) .day-dot.current,
body.dark:not(.high-contrast) .status-option input:checked + span,
body.dark:not(.high-contrast) .bottom-nav button.active,
body.dark:not(.high-contrast) .day-number,
body.dark:not(.high-contrast) .brand-mark {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

body.dark:not(.high-contrast) .day-dot.complete {
  background: var(--success);
  border-color: var(--success);
  color: #ffffff;
}

body.dark:not(.high-contrast) .stat strong {
  color: var(--primary-2);
}

body.dark:not(.high-contrast) .eyebrow {
  color: var(--accent);
}

body.dark:not(.high-contrast) .principles .number {
  background: #3a3022;
  border: 1px solid #655437;
  color: #f0d29c;
}

body.dark:not(.high-contrast) .minimum {
  background: #332b20;
  border-left-color: var(--accent);
  color: var(--text);
}

body.dark:not(.high-contrast) .notice {
  background: #1b2c27;
  border-color: #355047;
  color: var(--text);
}

body.dark:not(.high-contrast) .notice.warning {
  background: #33291d;
  border-color: #695333;
  color: var(--text);
}

body.dark:not(.high-contrast) .v6-backup-card::after,
body.dark:not(.high-contrast) .v6-help-card::after {
  border-color: rgba(214,168,95,.18);
}

body.dark:not(.high-contrast) .v6-comfort-preset {
  background: var(--surface-2);
  border-color: var(--border);
}

body.dark:not(.high-contrast) .dialog-card {
  background: var(--surface);
  color: var(--text);
}

body.dark:not(.high-contrast) .update-banner {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

body.dark:not(.high-contrast) .toast {
  background: #e7dfd2;
  color: #17231f;
}

body.dark:not(.high-contrast) .card a:not(.button) {
  color: #9fd0c5;
}

body.dark:not(.high-contrast) ::selection {
  background: #5a482d;
  color: #ffffff;
}

/* Alto contraste continua soberano mesmo se o usuário também tiver marcado modo escuro. */
body.high-contrast {
  --on-primary: #ffffff;
  --on-accent: #000000;
}

body.high-contrast .button.primary {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}

body.high-contrast .hero .button.primary {
  background: #ffd400;
  color: #000000;
  border-color: #000000;
}