/* Shared rules for every custom theme (data-theme="…"). Palette lives in css/themes/<id>.css */

[data-theme] {
  --theme-bg-image: none;
  --theme-bg-overlay: none;
  --theme-heading: var(--text);
  --theme-subheading: var(--accent);
  --theme-strong: var(--text);
  --theme-countdown-color: var(--accent);
  --theme-countdown-shadow: none;
  --theme-heading-shadow: none;
  --theme-heading-spacing: 0.02em;
  --theme-done-task: var(--hint);
  --theme-checkbox-accent: var(--accent);
  --theme-bar-from: var(--accent);
  --theme-bar-to: var(--accent);
  --theme-modal-backdrop: rgba(0, 0, 0, 0.35);
  --theme-date-btn-text: var(--accent);
  --theme-accent-glow: var(--accent-soft);
  --theme-surface-blur: none;
  --theme-cal-today-outline: var(--accent);
  --theme-panel-border: var(--accent);
}

[data-theme] #app {
  background: transparent;
}

[data-theme] .top-bar h1,
[data-theme] .area-block h2,
[data-theme] .chart-title,
[data-theme] .settings-block h2 {
  color: var(--theme-heading);
  letter-spacing: var(--theme-heading-spacing);
  text-shadow: var(--theme-heading-shadow);
}

[data-theme] .area-block h2,
[data-theme] .chart-title,
[data-theme] .settings-block h2 {
  color: var(--theme-subheading);
}

[data-theme] .section-card,
[data-theme] .area-block,
[data-theme] .stat-card,
[data-theme] .day-stat,
[data-theme] .chart-block,
[data-theme] .timer-card,
[data-theme] .modal-panel,
[data-theme] .settings-block {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--theme-panel-border);
  box-shadow: var(--surface-shadow);
  backdrop-filter: var(--theme-surface-blur);
}

[data-theme] .section-card strong,
[data-theme] .timer-card-head strong,
[data-theme] .stat-card strong,
[data-theme] .day-stat strong,
[data-theme] .timer-field strong {
  color: var(--theme-strong);
}

[data-theme] .stat-card strong,
[data-theme] .timer-countdown {
  color: var(--theme-countdown-color);
  text-shadow: var(--theme-countdown-shadow);
}

[data-theme] .task-row label,
[data-theme] .task-label {
  color: var(--text);
}

[data-theme] .task-row.done label,
[data-theme] .task-row.done .task-label {
  color: var(--theme-done-task);
}

[data-theme] .task-row input[type="checkbox"] {
  accent-color: var(--theme-checkbox-accent);
}

[data-theme] .day-stat .bar {
  background: linear-gradient(90deg, var(--theme-bar-from), var(--theme-bar-to));
}

[data-theme] .modal-backdrop {
  background: var(--theme-modal-backdrop);
}

[data-theme] .icon-btn,
[data-theme] .secondary-btn {
  background: var(--field-bg);
  color: var(--text);
  border: 1px solid var(--border);
}

[data-theme] .date-btn {
  background: var(--secondary);
  color: var(--theme-date-btn-text);
  border: 1px solid var(--border);
  box-shadow: inset 3px 0 0 var(--accent);
}

[data-theme] .cal-day.selected {
  background: var(--btn-accent-bg);
  color: var(--accent-text);
}

[data-theme] .cal-day.today:not(.selected) {
  outline-color: var(--theme-cal-today-outline);
}

[data-theme] .theme-option {
  background: var(--field-bg);
  border-left: 3px solid transparent;
}

[data-theme] .theme-option.selected {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

[data-theme] .timer-field-active,
[data-theme] .timer-phase-btn-active {
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px var(--theme-accent-glow);
}

[data-theme] .settings-toggle {
  background: var(--field-bg);
  border: 1px solid var(--border);
}

[data-theme] .settings-toggle.is-on {
  border-left: 3px solid var(--accent);
}