/* Dimension's main colors, scoped to the default Dark palette. */
html[data-palette="dark"][data-palette-choice="dark"] {
  --canvas: #0a0a0a;
  --bg: var(--canvas);
  --surface: #181818;
  --elevated: #232323;
  --sunken: #0a0a0a;
  --ink-primary: #ededed;
  --ink-secondary: #c2c2c2;
  --ink-tertiary: #b2b2b2;
  --ink-disabled: #686868;
  --ink-on-accent: #161616;
  --border-subtle: rgba(229,229,229,.08);
  --border-default: rgba(229,229,229,.16);
  --border-strong: rgba(229,229,229,.28);
  --border-focus: #c2c2c2;
  --accent: #ffffff;
  --accent-hover: #ededed;
  --accent-pressed: #d4d4d4;
  --accent-muted-bg: rgba(212,212,212,.1);
  --accent-muted-text: #ededed;
  --success: #ededed;
  --success-bg: rgba(212,212,212,.1);
  --success-text: #ededed;
  --warning: #c2c2c2;
  --warning-bg: rgba(212,212,212,.1);
  --warning-text: #c2c2c2;
  --error: #ededed;
  --error-bg: rgba(212,212,212,.1);
  --error-text: #ededed;
  --info: #b2b2b2;
  --info-bg: rgba(212,212,212,.1);
  --info-text: #c2c2c2;
  --purple: var(--accent);
  --purple-rgb: 212,212,212;
  --violet-rgb: 212,212,212;
  --magenta-rgb: 212,212,212;
  --scrim: rgba(0,0,0,.7);
  --shadow-rgb: 0,0,0;
  --glass: rgba(24,24,24,.92);
  --glass-2: rgba(212,212,212,.1);
  --glass-strong: rgba(24,24,24,.98);
  --mobile-nav-bg: rgba(24,24,24,.92);
}

.swatch-dark { background: linear-gradient(135deg, #181818 0 58%, #ededed 58% 100%); }
.mobile-palette-choices-three { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }

html[data-palette="dark"][data-palette-choice="dark"],
html[data-palette="dark"][data-palette-choice="dark"] :is(body, .bg-root) {
  background: var(--canvas) !important;
}

/* Soft horizon from the reference: blue above, warm orange below. */
html[data-palette="dark"][data-palette-choice="dark"] .bg-root {
  background: linear-gradient(165deg, #819eb7 0%, #96a8b0 30%, #afa59b 57%, #c79976 100%) !important;
}

html[data-palette="dark"][data-palette-choice="dark"] :is(
  .card, .todo-command-card, .todo-mobile-card, .calendar-block-card,
  .calendar-month-card, .calendar-week-card, .calendar-day-card,
  .focus-session-card, .health-snapshot-card, .goals-card, .rewards-shell,
  .rewards-panel, .rewards-working, .project-modal, .block-page-shell,
  .data-editor-modal, .auth-modal, .area-folder-card
) {
  background: var(--surface) !important;
  border-color: var(--border-default) !important;
  color: var(--ink-primary) !important;
  box-shadow: none !important;
}

html[data-palette="dark"][data-palette-choice="dark"] :is(
  .card::before, .morning-glow, .violet-wash, .radial-glow
) { background: none !important; }

html[data-palette="dark"][data-palette-choice="dark"] :is(
  .calendar-view-toggle, .goals-tabs, .focus-mode-tabs, .auth-mode-tabs,
  .email-account-button, .email-ai-note, .smart-reply-panel,
  .health-metric-card, .health-vital-card, .health-insight-card,
  .todo-reminder-panel, .todo-action-menu, .todo-stuck-menu, .calendar-popover,
  .reward-card, .goals-callout, .goals-north-star, .goals-life-direction,
  .palette-menu, .mobile-settings-card, .mobile-layout-item
) {
  background: var(--elevated) !important;
  border-color: var(--border-default) !important;
  color: var(--ink-primary) !important;
  box-shadow: none !important;
}

html[data-palette="dark"][data-palette-choice="dark"] :is(
  .tab.active, .ops-tab.active, .calendar-view-toggle button.active,
  .goals-tabs button.active, .focus-mode-tabs button.active, .auth-mode-tabs button.active,
  .primary, .btn-primary, .email-confirm-btn, .chk.checked, .ops-check.checked,
  .todo-round-check.is-done, .todo-round-check.is-checked,
  .todo-mobile-row.is-done .todo-mobile-check, .todo-focus-row.is-done .todo-round-check
) {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--ink-on-accent) !important;
  box-shadow: none !important;
}

html[data-palette="dark"][data-palette-choice="dark"] :is(
  .email-ai-generate-btn, .email-row-done-btn, .email-actions-toggle .pill,
  .email-confirm-btn svg, .reward-active-flag, .health-insight-card em,
  .todo-count b, .todo-derived-note.is-timer, .todo-mobile-note.is-timer,
  .todo-mobile-add svg, .calendar-card-title, .calendar-progress-copy,
  .calendar-committed-label, .calendar-week-label
) { color: inherit !important; }

html[data-palette="dark"][data-palette-choice="dark"] :is(
  .email-provider, .email-unread-badge, .email-row-done-btn,
  .email-ai-generate-btn, .todo-finished-prompt button,
  .todo-detail-actions button, .todo-mobile-actions > button,
  .todo-reminder-pill, .todo-due-button, .calendar-chip.primary,
  .calendar-day-cell.selected, .calendar-week-column.selected, .reward-card.active
) {
  background: var(--accent-muted-bg) !important;
  border-color: var(--border-strong) !important;
  color: var(--ink-primary) !important;
  box-shadow: none !important;
}

html[data-palette="dark"][data-palette-choice="dark"] :is(
  .bar-fill, .essence-progress-fill, .reward-progress-fill, .goals-progress-track span,
  .calendar-progress-commit, .calendar-event-dot, .calendar-event-line i,
  .calendar-week-pill i, .todo-focus-row.is-inProgress::before,
  .todo-mobile-row.is-inProgress::before, .email-priority-dot
) { background: var(--accent) !important; box-shadow: none !important; }

html[data-palette="dark"][data-palette-choice="dark"] :is(
  .health-ring stop, .weekly-slot stop, .focus-session-card stop
) { stop-color: var(--accent) !important; }

html[data-palette="dark"][data-palette-choice="dark"] .health-ring text {
  fill: var(--ink-primary) !important;
  stroke: none !important;
}

html[data-palette="dark"][data-palette-choice="dark"] :is(.sleep-stage-bar span, .sleep-stage-legend i) {
  background: #686868 !important;
}
html[data-palette="dark"][data-palette-choice="dark"] :is(.sleep-stage-bar span:nth-child(1), .sleep-stage-legend span:nth-child(1) i) {
  background: #ededed !important;
}
html[data-palette="dark"][data-palette-choice="dark"] :is(.sleep-stage-bar span:nth-child(2), .sleep-stage-legend span:nth-child(2) i) {
  background: #c2c2c2 !important;
}

html[data-palette="dark"][data-palette-choice="dark"] :is(
  [style*="99, 102, 241"], [style*="192, 132, 252"], [style*="184, 117, 255"],
  [style*="216, 180, 254"], [style*="125, 132, 255"], [style*="169, 139, 255"]
) {
  color: var(--ink-secondary) !important;
  background: var(--accent-muted-bg) !important;
  border-color: var(--border-default) !important;
  box-shadow: none !important;
}

html[data-palette="dark"][data-palette-choice="dark"] :is(.todo-title-input, .todo-focus-input, .todo-mobile-title-input, .goals-field) {
  background: transparent !important;
  color: var(--ink-primary) !important;
}

html[data-palette="dark"][data-palette-choice="dark"] :is(
  .email-unread, .email-action-pill, .email-next-button, .email-review-box
) {
  color: var(--ink-secondary) !important;
  background: var(--accent-muted-bg) !important;
  border-color: var(--border-default) !important;
}

html[data-palette="dark"][data-palette-choice="dark"] :is(
  .email-action-copy b, .email-ai-note svg, .health-today-stats svg,
  .health-insight-card > svg, .health-vital-card em, .goals-status svg
) { color: var(--ink-secondary) !important; }

html[data-palette="dark"][data-palette-choice="dark"] .email-ai-sparkle-icon {
  fill: var(--ink-secondary) !important;
}

html[data-palette="dark"][data-palette-choice="dark"] .health-steps-bar .bar-fill {
  background: var(--accent) !important;
}

html[data-palette="dark"][data-palette-choice="dark"] .email-actions-panel {
  background: transparent !important;
}

/* Rewards stays legible while letting the Dark palette's matte horizon show through. */
html[data-palette="dark"][data-palette-choice="dark"]:has(.rewards-shell) .bg-root {
  filter: blur(26px) saturate(.72);
  transform: scale(1.045);
}

html[data-palette="dark"][data-palette-choice="dark"] .rewards-shell {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 44px max(24px, calc((100vw - 1180px) / 2)) 120px !important;
  background: rgba(10, 13, 15, .62) !important;
  border: 0 !important;
  color: #f1f2f1 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(34px) saturate(.72);
  backdrop-filter: blur(34px) saturate(.72);
}

html[data-palette="dark"][data-palette-choice="dark"] .rewards-title-row h1 {
  background: none !important;
  color: #f4f4f2 !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-palette="dark"][data-palette-choice="dark"] :is(
  .rewards-working,
  .rewards-panel
) {
  background: transparent !important;
  border-color: rgba(235, 239, 239, .14) !important;
  box-shadow: none !important;
}

html[data-palette="dark"][data-palette-choice="dark"] .reward-card {
  background: rgba(255, 255, 255, .025) !important;
  border-color: rgba(235, 239, 239, .13) !important;
  box-shadow: none !important;
}

html[data-palette="dark"][data-palette-choice="dark"] .reward-card:hover,
html[data-palette="dark"][data-palette-choice="dark"] .reward-card:focus-visible {
  background: rgba(255, 255, 255, .045) !important;
  border-color: rgba(235, 239, 239, .30) !important;
}

html[data-palette="dark"][data-palette-choice="dark"] .reward-card.active {
  background: rgba(255, 255, 255, .065) !important;
  border-color: rgba(235, 239, 239, .42) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035) !important;
}

html[data-palette="dark"][data-palette-choice="dark"] :is(
  .essence-stepper,
  .essence-log-button
) {
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(235, 239, 239, .15) !important;
}

html[data-palette="dark"][data-palette-choice="dark"] .rewards-shell :is(
  .essence-progress-fill,
  .reward-progress-fill
) {
  background: linear-gradient(90deg, #9bb7cb 0%, #d1a17f 100%) !important;
}

html[data-palette="dark"][data-palette-choice="dark"] .rewards-balance svg,
html[data-palette="dark"][data-palette-choice="dark"] .reward-card svg,
html[data-palette="dark"][data-palette-choice="dark"] .essence-source-icon {
  color: #d8e0e3 !important;
  filter: none !important;
}

html[data-palette="dark"][data-palette-choice="dark"] .essence-source-icon {
  background: rgba(255, 255, 255, .045) !important;
  border-color: rgba(235, 239, 239, .14) !important;
}

html[data-palette="dark"][data-palette-choice="dark"] .reward-active-flag {
  color: #d9c2b0 !important;
}

@media (max-width: 900px) {
  html[data-palette="dark"][data-palette-choice="dark"] .rewards-shell {
    padding: 30px max(14px, calc((100vw - 680px) / 2)) 100px !important;
    background: rgba(10, 13, 15, .68) !important;
    box-shadow: none !important;
  }
}

@media (max-width: 560px) {
  html[data-palette="dark"][data-palette-choice="dark"] .rewards-shell {
    padding: 22px max(10px, calc((100vw - 420px) / 2)) 90px !important;
  }
}