/* System dark appearance using Sprout native tokens; presentation only. */
@media (prefers-color-scheme:dark) {
:root[data-theme=dark] {

  --ink: #e5e5e5;
  --muted: #9ca3af;
  --subtle: #787774;
  --canvas: #1a1a1a;
  --surface: #2d2d2d;
  --surface-soft: #333333;
  --line: #404040;
  --line-strong: #525252;
  --sprout: #72a05f;
  --sprout-strong: #86b872;
  --sprout-soft: #2a3d2f;
  --leaf: #86b872;
  --danger: #f87171;
  --danger-vivid: #ef4444;
  --danger-soft: #3d2420;
  --warning: #fbbf24;
  --warning-soft: #3d3020;
  --priority-low: #9ca3af;
  --priority-normal: #eab308;
  --priority-high: var(--danger-vivid);
  --priority-low-fg: var(--priority-low);
  --priority-low-bg: var(--surface-hover);
  --priority-low-border: var(--border-neutral);
  --priority-normal-fg: var(--priority-normal);
  --priority-normal-bg: #3d3520;
  --priority-high-fg: var(--priority-high);
  --priority-high-bg: #3d2020;

  --surface-sidebar: #252525;
  --surface-main: #1e1e1e;
  --surface-board: #333333;
  --surface-panel: #2d2d2d;
  --surface-card: #3d3d3d;
  --surface-task-card: var(--surface-card);
  --task-create-surface: #2d2d2d;
  --task-create-comment-bg: #383838;
  --border-neutral: #404040;
  --text-primary: #e5e5e5;
  --text-muted: #9ca3af;
  --accent-action: #38bdf8;
  --accent-action-soft: #1e3a4f;
  --accent-focus: #7dd3fc;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 20%);

  --text-board: #e5e5e5;
  --text-icon: #9ca3af;
  --text-icon-hover: #d1d5db;
  --text-secondary: #9ca3af;
  --border-subtle: rgb(255 255 255 / 9%);
  --border-subtle-strong: rgb(255 255 255 / 12%);
  --border-subtle-faint: rgb(255 255 255 / 8%);
  --border-subtle-medium: rgb(255 255 255 / 18%);
  --surface-hover: #3a3a3a;
  --surface-hover-soft: #353535;
  --surface-active: #454545;
  --surface-muted: #3a3a3a;
  --surface-muted-hover: #454545;
  --surface-input-focus: #1e3a4f;
  --surface-input-focus-ring: #0284c7;
  --surface-danger-hover: #3d2420;
  --surface-column-hover: #353535;
  --surface-column-add: rgb(45 45 45 / 85%);
  --surface-column-add-hover: rgb(50 50 50 / 92%);
  --surface-column-add-border: #525252;
  --placeholder: #6b7280;
  --placeholder-muted: #787774;
  --accent-action-hover: #0ea5e9;
  --button-secondary-hover-bg: #3a3a3a;
  --button-secondary-hover-border: #525252;
  --overlay-backdrop: rgb(0 0 0 / 45%);
  --overlay-detail: rgb(0 0 0 / 50%);
  --shadow-popover: 0 8px 24px rgb(0 0 0 / 35%);
  --shadow-drawer: -8px 0 32px rgb(0 0 0 / 35%);
  --surface-interactive-subtle: rgb(255 255 255 / 6%);
  --surface-timeline-header: var(--surface-card);
  --surface-timeline-header-alt: color-mix(
    in srgb,
    var(--surface-interactive-subtle) 5%,
    var(--surface-card)
  );
  --surface-timeline-label: var(--surface-main);
  --surface-timeline-cell: color-mix(
    in srgb,
    var(--surface-interactive-subtle) 48%,
    var(--surface-main)
  );
  --surface-timeline-cell-alt: color-mix(
    in srgb,
    var(--surface-interactive-subtle) 28%,
    var(--surface-main)
  );
  --surface-timeline-card: color-mix(
    in srgb,
    var(--surface-interactive-subtle) 11%,
    var(--surface-card)
  );
  --surface-timeline-card-hover: color-mix(
    in srgb,
    var(--surface-hover) 38%,
    var(--surface-timeline-card)
  );
  --surface-timeline-card-selected: color-mix(
    in srgb,
    var(--surface-active) 52%,
    var(--surface-timeline-card)
  );
  --shadow-timeline-card:
    0 1px 3px color-mix(in srgb, var(--surface-main) 48%, transparent),
    0 0 0 1px color-mix(in srgb, var(--border-subtle-medium) 70%, transparent);
  --shadow-timeline-card-hover:
    0 2px 5px color-mix(in srgb, var(--surface-main) 62%, transparent),
    0 0 0 1px color-mix(in srgb, var(--border-subtle-medium) 88%, transparent);
  --surface-limitations: #3d3520;
  --surface-limitations-border: #4a4030;

  --avatar-tint-base: #1e1e1e;
  --avatar-shade-base: #f5f5f5;
  --avatar-member-bg: color-mix(in srgb, var(--palette-1) 24%, var(--avatar-tint-base));
  --avatar-member-fg: color-mix(in srgb, var(--palette-1) 68%, var(--avatar-shade-base));
  --avatar-generali-bg: color-mix(in srgb, var(--palette-5) 24%, var(--avatar-tint-base));
  --avatar-generali-fg: color-mix(in srgb, var(--palette-5) 68%, var(--avatar-shade-base));
  --avatar-topic-purple-bg: color-mix(in srgb, var(--palette-5) 24%, var(--avatar-tint-base));
  --avatar-topic-purple-fg: color-mix(in srgb, var(--palette-5) 68%, var(--avatar-shade-base));
  --avatar-topic-cyan-bg: color-mix(in srgb, var(--palette-6) 24%, var(--avatar-tint-base));
  --avatar-topic-cyan-fg: color-mix(in srgb, var(--palette-6) 68%, var(--avatar-shade-base));
  --avatar-topic-green-bg: color-mix(in srgb, var(--palette-2) 24%, var(--avatar-tint-base));
  --avatar-topic-green-fg: color-mix(in srgb, var(--palette-2) 68%, var(--avatar-shade-base));
  --avatar-topic-orange-bg: color-mix(in srgb, var(--palette-3) 24%, var(--avatar-tint-base));
  --avatar-topic-orange-fg: color-mix(in srgb, var(--palette-3) 68%, var(--avatar-shade-base));
  --avatar-column-bg: color-mix(in srgb, var(--palette-7) 18%, var(--avatar-tint-base));
  --avatar-column-fg: color-mix(in srgb, var(--palette-7) 55%, var(--avatar-shade-base));
  --avatar-column-blue-bg: color-mix(in srgb, var(--palette-1) 24%, var(--avatar-tint-base));
  --avatar-column-violet-bg: color-mix(in srgb, var(--palette-5) 24%, var(--avatar-tint-base));
  --avatar-column-rose-bg: color-mix(in srgb, var(--palette-3) 24%, var(--avatar-tint-base));
  --avatar-column-emerald-bg: color-mix(in srgb, var(--palette-2) 24%, var(--avatar-tint-base));
  --avatar-column-sand-bg: color-mix(in srgb, var(--palette-6) 24%, var(--avatar-tint-base));
  --avatar-column-slate-bg: color-mix(in srgb, var(--palette-7) 18%, var(--avatar-tint-base));
  --avatar-column-peach-bg: color-mix(in srgb, var(--palette-4) 24%, var(--avatar-tint-base));
  --avatar-column-mauve-bg: color-mix(in srgb, var(--palette-1) 24%, var(--avatar-tint-base));
  color-scheme: dark;
}
[data-theme='dark'] .board-timeline-bar {
  --timeline-bar-fill: #2e343a;
  --timeline-bar-fill-hover: color-mix(in srgb, var(--text-primary) 8%, #2e343a);
  --timeline-bar-fill-selected: color-mix(in srgb, var(--accent-action) 16%, #2e343a);
  --timeline-bar-shadow: 0 1px 3px rgb(0 0 0 / 35%);
}

[data-theme='dark'] .board-timeline-bar.priority-low,
[data-theme='dark'] .board-timeline-bar.priority-normal {
  --timeline-bar-fill: #2e343a;
  --timeline-bar-fill-hover: color-mix(in srgb, var(--text-primary) 8%, #2e343a);
  --timeline-bar-fill-selected: color-mix(in srgb, var(--accent-action) 16%, #2e343a);
  --timeline-bar-shadow: 0 1px 3px rgb(0 0 0 / 38%);
}

[data-theme='dark'] .board-timeline-bar.priority-high {
  --timeline-bar-fill: #3d2a2c;
  --timeline-bar-fill-hover: color-mix(in srgb, #e5989b 14%, #3d2a2c);
  --timeline-bar-fill-selected: color-mix(in srgb, #e5989b 22%, #3d2a2c);
  --timeline-bar-shadow: 0 1px 3px rgb(0 0 0 / 40%);
}

[data-theme='dark'] .board-timeline-bar.is-overdue {
  --timeline-bar-fill: #3d2a2c;
  --timeline-bar-fill-hover: color-mix(in srgb, #e5989b 18%, #3d2a2c);
  --timeline-bar-fill-selected: color-mix(in srgb, #e5989b 26%, #3d2a2c);
  --timeline-bar-shadow: 0 1px 3px rgb(0 0 0 / 42%);
}

[data-theme='dark'] .board-timeline-bar.is-due-soon,
[data-theme='dark'] .board-timeline-bar.is-due-today {
  --timeline-bar-fill: #3a3628;
  --timeline-bar-fill-hover: color-mix(in srgb, var(--priority-normal) 14%, #3a3628);
  --timeline-bar-fill-selected: color-mix(in srgb, var(--priority-normal) 22%, #3a3628);
  --timeline-bar-shadow: 0 1px 3px rgb(0 0 0 / 40%);
}

[data-theme='dark'] .board-timeline-bar.selected,
[data-theme='dark'] .board-timeline-bar.selected:hover {
  box-shadow: 0 1px 4px color-mix(in srgb, var(--accent-action) 35%, transparent);
}

[data-theme='dark'] .board-timeline-bar-check .board-task-check-dot {
  --task-status-ring: var(--text-muted);
}

[data-theme='dark'] .board-timeline-bar.priority-high .board-timeline-bar-check .board-task-check-dot,
[data-theme='dark'] .board-timeline-bar.is-overdue .board-timeline-bar-check .board-task-check-dot {
  --task-status-fill: none;
  --task-status-border: var(--priority-high-fg);
  background-color: #fff8f8;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 35%);
}

[data-theme='dark'] .board-timeline-bar.is-due-soon .board-timeline-bar-check .board-task-check-dot,
[data-theme='dark'] .board-timeline-bar.is-due-today .board-timeline-bar-check .board-task-check-dot {
  background-color: var(--surface-card);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 35%);
}

[data-theme='dark'] .board-task-check-dot {
  --task-status-ring: var(--priority-low-fg);
}

[data-theme='dark'] .board-task-check--completed .board-task-check-dot,
[data-theme='dark'] .board-task-check--done .board-task-check-dot {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.75 8.5 6.25 12 13.25 5'/%3E%3C/svg%3E");
}

[data-theme='dark'] .tasklist-history-row:hover,
[data-theme='dark'] .tasklist-history-row.selected {
  background: color-mix(
    in srgb,
    var(--text-primary) 10%,
    var(--surface-board)
  );
}

  [data-theme='dark'] .board-secondary-view-panel > .board-timeline {
    --surface-timeline-header: var(--surface-soft);
    --surface-timeline-label: var(--surface-soft);
  }

[data-theme='dark'] .board-card.tint-lavender {
  background: #3d2f4d;
}

[data-theme='dark'] .board-card.tint-blue {
  background: #1e3a4f;
}

[data-theme='dark'] .board-card.tint-orange {
  background: #4a3520;
}

[data-theme='dark'] .board-card.tint-mint {
  background: #1e3d38;
}

[data-theme='dark'] .board-card.tint-purple {
  background: #3d2f4d;
}

[data-theme='dark'] .board-card.overdue {
  background: #3d2428;
}

  [data-theme='dark'] .board-secondary-view-panel {
    background: var(--surface-soft);
  }

  [data-theme='dark'] .board-secondary-view-panel > .board-timeline {
    --surface-timeline-header: var(--surface-soft);
    --surface-timeline-label: var(--surface-soft);
  }

  [data-theme='dark'] .board-secondary-view-panel .board-timeline-gantt-row {
    --timeline-row-bg: var(--surface-soft);
    --timeline-row-label-bg: var(--surface-soft);
  }

  [data-theme='dark'] .board-secondary-view-panel .board-timeline-board-grid,
  [data-theme='dark'] .board-secondary-view-panel .board-timeline-footer {
    background: var(--surface-soft);
  }

  [data-theme='dark'] .board-secondary-view-panel .board-timeline-list-gutter {
    background: var(--surface-soft);
  }
[data-theme='dark'] .board-toolbar-main .board-view-mode-option.active[data-section] {
  background: var(--board-tab-selection-bg);
}
[data-theme='dark'] .board-toolbar-main .header-section-indicator {
  background: var(--board-tab-selection-bg);
}
[data-theme='dark'] .board-toolbar-main .workspace-chat-toolbar .board-ai-badge-title {
  background: #263d50;
  color: #b5d9f2;
}
[data-theme='dark'] .board-ai-badge .board-ai-new-chat {
  color: var(--text-primary);
  opacity: 1;
  -webkit-text-fill-color: var(--text-primary);
}
.project-editor-screen > .project-editor-board--board-tour,
[data-theme='dark'] .project-editor-screen > .project-editor-board--board-tour {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
:root[data-theme=dark],:root[data-theme=dark] body{background:var(--surface-main);color:var(--text-primary)}
/* Slightly separate the main program preview from the page canvas. */
:root[data-theme=dark] body:not([data-detail-view]){--surface-main:#181818}
:root[data-theme=dark] .preview-native-nav-icon{filter:invert(1);opacity:.8}
:root[data-theme=dark] .board-toolbar-agent img{filter:invert(1);mix-blend-mode:screen}
:root[data-theme=dark] .preview-agent-name{color:color-mix(in srgb,var(--agent-tone) 72%,var(--text-primary));background:color-mix(in srgb,var(--agent-tone) 18%,var(--surface-panel))}
:root[data-theme=dark] body[data-detail-view]{--surface-main:#1e1e1e;--surface-panel:var(--surface-main);--surface-board:var(--surface-main);--surface-card:var(--surface-main);--detail-content-surface:#2d2d2d;--surface-task-card:var(--detail-content-surface)}
:root[data-theme=dark] body[data-detail-view=timeline]{--detail-timeline-even:var(--detail-content-surface);--detail-timeline-odd:var(--surface-main)}
:root[data-theme=dark] body[data-detail-view] .detail-native-layout,:root[data-theme=dark] body[data-detail-view] .detail-native-layout>.board-main{background:var(--surface-main)}
:root[data-theme=dark] .detail-agent-name{color:color-mix(in srgb,var(--agent-tone) 72%,var(--text-primary));background:color-mix(in srgb,var(--agent-tone) 18%,#252b27)}
}