/* ============================================================
   COMFORT DARK THEME - CALM DARK SOFT-DEPTH UI
   ============================================================ */

[data-theme="comfort-dark"] {
  --comfort-dark-bg: #202326;
  --comfort-dark-surface-recessed: #191c1e;
  --comfort-dark-surface: #292d30;
  --comfort-dark-surface-raised: #2e3336;
  --comfort-dark-surface-highest: #34393c;
  --comfort-dark-text-primary: #e8e7e2;
  --comfort-dark-text-secondary: #b8bbb8;
  --comfort-dark-text-muted: #929694;
  --comfort-dark-accent-primary: #7193ad;
  --comfort-dark-accent-secondary: #75947d;
  --comfort-dark-success: #75947d;
  --comfort-dark-warning: #b28a55;
  --comfort-dark-error: #b06f69;
  --comfort-dark-border: rgba(187, 194, 196, 0.18);
  --comfort-dark-chart-surface: #2e3336;
  --comfort-dark-chart-text: #e8e7e2;
  --comfort-dark-chart-grid: rgba(160, 168, 164, 0.22);
  --comfort-dark-shadow-small: 0 2px 6px rgba(0, 0, 0, 0.34), -1px -1px 0 rgba(255, 255, 255, 0.03) inset;
  --comfort-dark-shadow-medium: 0 8px 18px rgba(0, 0, 0, 0.4), -1px -1px 0 rgba(255, 255, 255, 0.04) inset;
  --comfort-dark-shadow-large: 0 16px 34px rgba(0, 0, 0, 0.46), -1px -1px 0 rgba(255, 255, 255, 0.05) inset;
  --comfort-dark-inset-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --comfort-dark-highlight: rgba(219, 224, 226, 0.08);

  --bg: var(--comfort-dark-bg);
  --bg-elev: var(--comfort-dark-surface);
  --bg-glass: rgba(46, 51, 54, 0.92);
  --text: var(--comfort-dark-text-primary);
  --text-soft: var(--comfort-dark-text-secondary);
  --primary: var(--comfort-dark-accent-primary);
  --primary-strong: #6689a3;
  --primary-soft: rgba(113, 147, 173, 0.24);
  --accent: var(--comfort-dark-accent-secondary);
  --accent-soft: rgba(117, 148, 125, 0.2);
  --urge-accent: #b28a55;
  --urge-accent-soft: rgba(178, 138, 85, 0.24);
  --avoidance-accent: #8092a3;
  --avoidance-accent-soft: rgba(128, 146, 163, 0.22);
  --action-card-shadow: var(--comfort-dark-shadow-medium);
  --action-card-border: rgba(198, 204, 206, 0.16);
  --border: var(--comfort-dark-border);
  --chip: #2d3235;
  --danger: var(--comfort-dark-error);
  --warning-bg: rgba(178, 138, 85, 0.22);
  --warning-text: #e0c89d;
  --shadow: var(--comfort-dark-shadow-medium);
  --dropdown-bg: #2c3134;
  --dropdown-border: rgba(188, 194, 197, 0.24);
  --dropdown-text: var(--comfort-dark-text-primary);
  --dropdown-focus-border: var(--comfort-dark-accent-primary);
  --dropdown-focus-shadow: 0 0 0 3px rgba(113, 147, 173, 0.22);

  /* Readability tokens used by shared text rules across non-home screens. */
  --read-text-main: #d7dde0;
  --read-text-soft: #b8c1c6;
  --read-text-muted: #9ba8b0;
  --read-control-text: #d7dde0;
  --read-primary-button-text: #e7edf0;
  --read-placeholder: var(--comfort-dark-text-muted);
  --read-input-text: var(--comfort-dark-text-primary);
  --modal-backdrop: rgba(11, 12, 13, 0.54);
}




[data-theme="comfort-dark"] body,
[data-theme="comfort-dark"] .app-bg {
  background: linear-gradient(180deg, #202326 0%, #1f2224 100%);
}




[data-theme="comfort-dark"] .topbar,
[data-theme="comfort-dark"] .card,
[data-theme="comfort-dark"] .chart-card,
[data-theme="comfort-dark"] .summary-panel,
[data-theme="comfort-dark"] .settings-block,
[data-theme="comfort-dark"] .time-record-card,
[data-theme="comfort-dark"] .optional-group,
[data-theme="comfort-dark"] .history-item,
[data-theme="comfort-dark"] .results-type-row,
[data-theme="comfort-dark"] .filter-row,
[data-theme="comfort-dark"] .chore-session-card,
[data-theme="comfort-dark"] .chore-game-mode-card,
[data-theme="comfort-dark"] .chore-game-mode-status,
[data-theme="comfort-dark"] .chore-selection-summary,
[data-theme="comfort-dark"] .chore-settings-card,
[data-theme="comfort-dark"] .end-week-progress-card,
[data-theme="comfort-dark"] .end-week-completion-state,
[data-theme="comfort-dark"] .end-week-group-card,
[data-theme="comfort-dark"] .motivation-modal-card,
[data-theme="comfort-dark"] .hamburger-menu {
  background: linear-gradient(160deg, var(--comfort-dark-surface-raised), var(--comfort-dark-surface));
  border: 1px solid var(--comfort-dark-border);
  box-shadow: var(--comfort-dark-shadow-medium);
}




[data-theme="comfort-dark"] .hamburger-item.active,
[data-theme="comfort-dark"] .results-type-btn.active,
[data-theme="comfort-dark"] .nav-btn.active,
[data-theme="comfort-dark"] .range-btn.active {
  background: linear-gradient(165deg, rgba(113, 147, 173, 0.24), rgba(93, 119, 141, 0.26));
  border-color: rgba(140, 167, 186, 0.34);
}




/* Broad text colour skips cosmetic-skinned components and the Results text-contract roles (AGENTS.md section 7). */
[data-theme="comfort-dark"] .btn-title:where(:not([data-cosmetic-skin] *)),
[data-theme="comfort-dark"] .stat-card .value,
[data-theme="comfort-dark"] .k,
[data-theme="comfort-dark"] .v,
[data-theme="comfort-dark"] .history-top strong,
[data-theme="comfort-dark"] :is(h1, h2, h3, h4, h5, h6):where(:not([data-cosmetic-skin] *, .screen[data-screen="results"] :is(.chart-card h3, .results-section-title, .chart-summary, .chart-empty, .empty-state-title, .empty-state-subtitle))),
[data-theme="comfort-dark"] .results-section-title:where(:not([data-cosmetic-skin] *, .screen[data-screen="results"] :is(.chart-card h3, .results-section-title, .chart-summary, .chart-empty, .empty-state-title, .empty-state-subtitle))) {
  color: var(--comfort-dark-text-primary) !important;
}




/* Broad text colour skips cosmetic-skinned components and the Results text-contract roles (AGENTS.md section 7). */
[data-theme="comfort-dark"] li,
[data-theme="comfort-dark"] .step-help,
[data-theme="comfort-dark"] .step-label,
[data-theme="comfort-dark"] .btn-sub:where(:not([data-cosmetic-skin] *)),
[data-theme="comfort-dark"] .stat-card .label,
[data-theme="comfort-dark"] .history-controls label,
[data-theme="comfort-dark"] .time-record-display-meta,
[data-theme="comfort-dark"] .input-hint,
[data-theme="comfort-dark"] :is(p, span:where(:not(.cp-icon, .chore-item-text, .end-week-task-title, .end-week-task-points)), label):where(:not([data-cosmetic-skin] *, .screen[data-screen="results"] :is(.chart-card h3, .results-section-title, .chart-summary, .chart-empty, .empty-state-title, .empty-state-subtitle))),
[data-theme="comfort-dark"] :is(.field-help, .chart-summary, .chart-empty):where(:not([data-cosmetic-skin] *, .screen[data-screen="results"] :is(.chart-card h3, .results-section-title, .chart-summary, .chart-empty, .empty-state-title, .empty-state-subtitle))) {
  color: var(--comfort-dark-text-secondary) !important;
}




[data-theme="comfort-dark"] .empty-state-subtitle,
[data-theme="comfort-dark"] .tagline,
[data-theme="comfort-dark"] input::placeholder,
[data-theme="comfort-dark"] textarea::placeholder {
  opacity: 1;
}

/* Broad text colour skips cosmetic-skinned components and the Results text-contract roles (AGENTS.md section 7). */
[data-theme="comfort-dark"] .tagline,
[data-theme="comfort-dark"] .empty-state-subtitle:where(:not([data-cosmetic-skin] *, .screen[data-screen="results"] :is(.chart-card h3, .results-section-title, .chart-summary, .chart-empty, .empty-state-title, .empty-state-subtitle))) {
  color: var(--comfort-dark-text-muted) !important;
}




[data-theme="comfort-dark"] .primary-btn,
[data-theme="comfort-dark"] .action-btn,
[data-theme="comfort-dark"] .chip-btn,
[data-theme="comfort-dark"] .range-btn,
[data-theme="comfort-dark"] .results-type-btn,
[data-theme="comfort-dark"] .nav-btn,
[data-theme="comfort-dark"] .theme-toggle,
[data-theme="comfort-dark"] .time-record-display,
[data-theme="comfort-dark"] .delete-btn,
[data-theme="comfort-dark"] .type-chip,
[data-theme="comfort-dark"] .category-pill,
[data-theme="comfort-dark"] .badge-pill {
  border-radius: 14px;
  background: linear-gradient(165deg, #32373a, #2a2f32);
  border: 1px solid rgba(188, 194, 197, 0.2);
  color: var(--comfort-dark-text-primary);
  box-shadow: var(--comfort-dark-shadow-small);
}




[data-theme="comfort-dark"] .primary-btn {
  background: linear-gradient(165deg, #7d9eb8, #7193ad);
  border-color: rgba(144, 173, 196, 0.45);
  color: #1f2529;
}




[data-theme="comfort-dark"] .chip-btn.danger,
[data-theme="comfort-dark"] .action-btn.danger,
[data-theme="comfort-dark"] .delete-btn {
  background: linear-gradient(165deg, #8f5d58, #7c4f4b);
  color: #efe7e4;
  border-color: rgba(176, 111, 105, 0.46);
}




[data-theme="comfort-dark"] .primary-btn:active,
[data-theme="comfort-dark"] .action-btn:active,
[data-theme="comfort-dark"] .chip-btn:active,
[data-theme="comfort-dark"] .theme-toggle:active {
  transform: translateY(1px);
  box-shadow: var(--comfort-dark-inset-shadow);
}




[data-theme="comfort-dark"] input,
[data-theme="comfort-dark"] select,
[data-theme="comfort-dark"] textarea,
[data-theme="comfort-dark"] .details-select,
[data-theme="comfort-dark"] .wheel-select {
  border-radius: 12px;
  background: linear-gradient(180deg, var(--comfort-dark-surface-recessed), #16191b);
  border: 1px solid rgba(166, 173, 176, 0.22);
  box-shadow: var(--comfort-dark-inset-shadow);
}




[data-theme="comfort-dark"] input:focus-visible,
[data-theme="comfort-dark"] select:focus-visible,
[data-theme="comfort-dark"] textarea:focus-visible,
[data-theme="comfort-dark"] .details-select:focus-visible,
[data-theme="comfort-dark"] .wheel-select:focus-visible,
[data-theme="comfort-dark"] .theme-toggle:focus-visible,
[data-theme="comfort-dark"] .chip-btn:focus-visible,
[data-theme="comfort-dark"] .action-btn:focus-visible,
[data-theme="comfort-dark"] .primary-btn:focus-visible {
  outline: 2px solid rgba(113, 147, 173, 0.92);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(113, 147, 173, 0.24), var(--comfort-dark-shadow-small);
}




[data-theme="comfort-dark"] .home-game-mode-progress {
  background: linear-gradient(180deg, #1b1f21, #171a1c);
  border: 1px solid rgba(166, 173, 176, 0.2);
  box-shadow: var(--comfort-dark-inset-shadow);
}




[data-theme="comfort-dark"] .home-game-mode-progress-fill {
  background: linear-gradient(90deg, #75947d, #7193ad);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}




/* Checklist and End of Week row colours for the shared --checklist-row-* contract (chore-mode.css, end-week.css). */
[data-theme="comfort-dark"] {
  --checklist-row-bg: linear-gradient(165deg, #303538, #292d30);
  --checklist-row-border: rgba(185, 193, 196, 0.18);
  --checklist-row-checked-bg: linear-gradient(165deg, rgba(92, 122, 101, 0.54), rgba(75, 102, 83, 0.54));
  --checklist-row-checked-border: rgba(127, 165, 138, 0.38);
  --checklist-row-text: var(--comfort-dark-text-secondary);
  --checklist-row-checked-text: var(--comfort-dark-text-secondary);
  --end-week-row-text: var(--comfort-dark-text-primary);
}




[data-theme="comfort-dark"] .chore-checklist-item,
[data-theme="comfort-dark"] .end-week-task-row {
  border-radius: 12px;
  box-shadow: var(--comfort-dark-shadow-small);
}




[data-theme="comfort-dark"] .life-bonus-option,
[data-theme="comfort-dark"] .kv-item,
[data-theme="comfort-dark"] .chart-preference-row,
[data-theme="comfort-dark"] .diagnostics-row,
[data-theme="comfort-dark"] .editable-row {
  background: linear-gradient(165deg, #303538, #292d30);
  border: 1px solid rgba(185, 193, 196, 0.18);
  border-radius: 12px;
  box-shadow: var(--comfort-dark-shadow-small);
}




[data-theme="comfort-dark"] input[type="checkbox"],
[data-theme="comfort-dark"] input[type="radio"] {
  accent-color: #7193ad;
}




[data-theme="comfort-dark"] .home-primary-grid .cp-icon,
/* Theme icon default: structural .cp-icon spans are excluded from the broad
   span text rule, so their color comes from here (or a component rule). */
[data-theme="comfort-dark"] .cp-icon {
  display: inline-flex;
  color: var(--comfort-dark-text-secondary);
}

[data-theme="comfort-dark"] .add-step-icon {
  color: #c4ccd1;
}




[data-theme="comfort-dark"] .cp-icon svg {
  width: 22px;
  height: 22px;
}




[data-theme="comfort-dark"] .screen[data-screen="results"] {
  --chart-text-primary: #e8e7e2;
  --chart-text-secondary: #b8bbb8;
  --chart-text-muted: #929694;
  --chart-axis-text: #bdc1be;
  --chart-axis-title: #e8e7e2;
  --chart-legend-text: #d7d9d6;
  --chart-value-label: #ecebe7;
  --chart-grid-line: rgba(160, 168, 164, 0.22);
  --chart-tooltip-bg: rgba(52, 57, 60, 0.96);
  --chart-tooltip-title: #ecebe7;
  --chart-tooltip-text: #d8d9d5;
  --chart-tooltip-border: rgba(196, 202, 205, 0.24);
  /* Results text contract (results.css). */
  --results-text: #c6cdca;
  --results-empty-title: var(--comfort-dark-text-secondary);
  --results-empty-text: #aab4b1;
}




[data-theme="comfort-dark"] .game-mode-completion-summary,
[data-theme="comfort-dark"] .game-mode-bonus-card,
[data-theme="comfort-dark"] .rank-badge,
[data-theme="comfort-dark"] .points-badge,
[data-theme="comfort-dark"] .week-badge {
  box-shadow: var(--comfort-dark-shadow-small);
}




[data-theme="comfort-dark"] .rank-badge {
  background: linear-gradient(135deg, #3a4248, #333a40);
  color: #d6dde1 !important;
}




[data-theme="comfort-dark"] .points-badge {
  background: linear-gradient(135deg, #4b4337, #433a30);
  color: #e0cfb2 !important;
}




[data-theme="comfort-dark"] .week-badge {
  background: linear-gradient(135deg, #36433a, #2f3a33);
  color: #c8d8ce !important;
}




/* Slightly brighter supporting text on non-home screens for easier reading. */
/* Broad text colour skips cosmetic-skinned components and the Results text-contract roles (AGENTS.md section 7). */
[data-theme="comfort-dark"] .screen:not([data-screen="home"]) .step-help,
[data-theme="comfort-dark"] .screen:not([data-screen="home"]) .step-label,
[data-theme="comfort-dark"] .screen:not([data-screen="home"]) .btn-sub:where(:not([data-cosmetic-skin] *)),
[data-theme="comfort-dark"] .screen:not([data-screen="home"], [data-screen="results"]) .chart-summary,
[data-theme="comfort-dark"] .screen:not([data-screen="home"], [data-screen="results"]) .chart-empty,
[data-theme="comfort-dark"] .screen:not([data-screen="home"]) .history-controls label,
[data-theme="comfort-dark"] .screen:not([data-screen="home"]) .time-record-display-meta,
[data-theme="comfort-dark"] .screen:not([data-screen="home"]) .input-hint,
[data-theme="comfort-dark"] .screen:not([data-screen="home"]) .type-chip,
[data-theme="comfort-dark"] .screen:not([data-screen="home"]) .category-pill,
[data-theme="comfort-dark"] .screen:not([data-screen="home"]) .badge-pill,
[data-theme="comfort-dark"] .screen:not([data-screen="home"]) .field-help:where(:not([data-cosmetic-skin] *, .screen[data-screen="results"] :is(.chart-card h3, .results-section-title, .chart-summary, .chart-empty, .empty-state-title, .empty-state-subtitle))) {
  color: #c6cdca !important;
}




[data-theme="comfort-dark"] .screen:not([data-screen="home"], [data-screen="results"]) .empty-state-subtitle,
[data-theme="comfort-dark"] .screen:not([data-screen="home"]) .tagline {
  color: #aab4b1 !important;
}




/* Screen-scoped placeholder values feed the shared form-field contract. */
[data-theme="comfort-dark"] .screen:not([data-screen="home"]) {
  --read-placeholder: #aab4b1;
}

[data-theme="comfort-dark"] .screen:is([data-screen="add"], [data-screen="edit"], [data-screen="history"]) {
  --read-placeholder: #b6bfbc;
}




[data-theme="comfort-dark"] .screen[data-screen="history"] input[type="date"] {
  color: #d3dcd9 !important;
}




[data-theme="comfort-dark"] .screen[data-screen="history"] input[type="date"]::-webkit-datetime-edit {
  color: #d3dcd9;
}