/* Recommendation #7 only: semantic tokens to stabilize contrast over time */
:root {
  --ui-text-default: #0a2f3a;
  --ui-text-muted: rgba(10, 47, 58, 0.72);
  --ui-text-success: #0b5d44;

  --ui-surface-default: #ffffff;
  --ui-surface-complete-grad-start: #e6f6ef;
  --ui-surface-complete-grad-end: #dcf3e8;

  --ui-border-default: rgba(10, 47, 58, 0.13);
  --ui-border-success: #8fd3b6;

  --ui-chip-bg: #e9f1f2;
  --ui-chip-text: #2b4c55;
  --ui-chip-success-bg: #c4ead9;
  --ui-chip-success-text: #0b5d44;

  --ui-icon-bg: rgba(29, 107, 120, 0.12);
}

body.dark-mode {
  --ui-text-default: #e4eeef;
  --ui-text-muted: #a9c4c9;
  --ui-text-success: #cdefe2;

  --ui-surface-default: #0e3540;
  --ui-surface-complete-grad-start: #0b3f33;
  --ui-surface-complete-grad-end: #0e4a3c;

  --ui-border-default: #1f4d59;
  --ui-border-success: #1e9e72;

  --ui-chip-bg: #154552;
  --ui-chip-text: #e4eeef;
  --ui-chip-success-bg: #3fb68c;
  --ui-chip-success-text: #062229;

  --ui-icon-bg: rgba(108, 192, 204, 0.2);
}

/* token-driven mapping layer */
.activity-btn.enhanced {
  border-color: var(--ui-border-default);
}

.activity-btn.enhanced.activity-btn-default {
  background: var(--ui-surface-default);
  color: var(--ui-text-default);
}

.activity-btn.enhanced.activity-btn-complete {
  background: linear-gradient(135deg, var(--ui-surface-complete-grad-start) 0%, var(--ui-surface-complete-grad-end) 100%);
  color: var(--ui-text-success);
  border-color: var(--ui-border-success);
}

.activity-icon {
  background: var(--ui-icon-bg);
}

.activity-chip {
  background: var(--ui-chip-bg);
  color: var(--ui-chip-text);
}

.activity-btn-complete .activity-chip {
  background: var(--ui-chip-success-bg);
  color: var(--ui-chip-success-text);
}