/* BPMN Architect colorbook: semantic palette and shared surface tokens. */
:root {
    --brand-50: #effaf3;
    --brand-100: #d9f2e2;
    --brand-200: #b6e6c9;
    --brand-300: #83d2a5;
    --brand-400: #4cb87e;
    --brand-500: #269b61;
    --brand-600: #19814f;
    --brand-700: #146641;
    --brand-800: #125237;
    --brand-900: #10442f;
    --accent-rgb: 25, 129, 79;
    --accent-color: var(--brand-600);
    --accent-color-strong: var(--brand-700);
    --accent-soft: rgba(var(--accent-rgb), .10);
    --accent-border: rgba(var(--accent-rgb), .22);
    --accent-ring: rgba(var(--accent-rgb), .16);
    --success-color: #19814f;
    --danger-color: #b84f5e;
    --text-main: #202a25;
    --text-secondary: #65736b;
    --page-bg: linear-gradient(145deg, #f7faf7 0%, #edf3ee 100%);
    --glass-fill: rgba(255, 255, 255, .68);
    --glass-strong: rgba(255, 255, 255, .90);
    --glass-border: rgba(255, 255, 255, .88);
    --control-fill: rgba(255, 255, 255, .82);
    --bot-msg-bg: rgba(255, 255, 255, .78);
    --bot-msg-text: #26332b;
    --user-msg-bg: var(--brand-600);
    --user-msg-text: #fff;
    --active-fill: rgba(var(--accent-rgb), .12);
    --canvas-dot: rgba(61, 91, 71, .22);
    --canvas-fill: rgba(255, 255, 255, .18);
    --popover-bg: rgba(251, 254, 251, .98);
    --dialog-bg: rgba(250, 253, 250, .98);
    --muted-fill: rgba(255, 255, 255, .58);
    --hover-fill: rgba(var(--accent-rgb), .055);
    --line-color: rgba(55, 88, 66, .13);
    --overlay-bg: rgba(243, 249, 244, .78);
    --shadow-color: rgba(34, 58, 40, .14);
}

body[data-theme="dark"] {
    --accent-rgb: 76, 184, 126;
    --accent-color: #4cb87e;
    --accent-color-strong: #83d2a5;
    --accent-soft: rgba(var(--accent-rgb), .15);
    --accent-border: rgba(var(--accent-rgb), .27);
    --accent-ring: rgba(var(--accent-rgb), .22);
    --success-color: #6dd39a;
    --text-main: #e6eee8;
    --text-secondary: #a4b3a9;
    --page-bg: radial-gradient(ellipse at top left, #24352b 0%, #18231d 55%, #111914 100%);
    --glass-fill: rgba(26, 40, 32, .84);
    --glass-strong: rgba(31, 48, 38, .97);
    --glass-border: rgba(180, 218, 192, .18);
    --control-fill: rgba(32, 49, 39, .92);
    --bot-msg-bg: rgba(36, 54, 43, .90);
    --bot-msg-text: #e5eee7;
    --user-msg-bg: #246b47;
    --active-fill: rgba(var(--accent-rgb), .16);
    --canvas-dot: rgba(177, 211, 187, .20);
    --canvas-fill: rgba(20, 34, 25, .30);
    --popover-bg: rgba(32, 49, 39, .99);
    --dialog-bg: rgba(32, 49, 39, .99);
    --muted-fill: rgba(255, 255, 255, .055);
    --hover-fill: rgba(255, 255, 255, .055);
    --line-color: rgba(180, 218, 192, .14);
    --overlay-bg: rgba(13, 24, 17, .82);
    --shadow-color: rgba(0, 0, 0, .3);
    --control-border: rgba(180, 218, 192, .2);
}

#new-session { border-color: var(--accent-border); color: var(--accent-color); background: var(--accent-soft); }
#new-session:hover { background: var(--active-fill); }
.history-search input:focus, #user-input:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-ring); }
.history-item.active { border-color: var(--accent-border); background: var(--active-fill); }
.history-menu button:hover { background: var(--accent-soft); }
.history-rename { border-color: var(--accent-color); }
.brand-mark { background: linear-gradient(145deg, var(--brand-400), var(--brand-700)); }
.user { background: var(--user-msg-bg); box-shadow: 0 5px 14px rgba(var(--accent-rgb), .2); }
.plan-actions button { border-color: var(--accent-border); }
.plan-actions .apply-plan, #send-btn { background: var(--accent-color); box-shadow: 0 5px 13px rgba(var(--accent-rgb), .2); }
.plan-actions .apply-plan:hover, #send-btn:hover:not(:disabled) { background: var(--accent-color-strong); }
#send-btn:hover { background: var(--accent-color-strong); }
.viewer-empty-mark { background: var(--accent-soft); color: var(--accent-color); }
#download-btn { border-color: var(--accent-border); background: var(--accent-soft); }
.history-search input:focus, #user-input:focus { background: var(--glass-strong); }
.history-menu .delete-chat, .danger-text, .delete-dialog-mark { color: var(--danger-color); }
.delete-dialog-mark { background: rgba(184, 79, 94, .09); }
.profile-summary { border-color: var(--line-color); }
.profile-summary:hover { border-color: var(--accent-border); background: var(--active-fill); }
.form-field input { border-color: var(--line-color); }
.message-body code, .message-body pre { color: var(--text-main); }
.error { border-color: rgba(184, 79, 94, .2); }
.dino-ground { background: var(--accent-border); }
.dino-ground::after { background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(var(--accent-rgb), .38) 14px 19px, transparent 19px 28px); }
.auth-card .brand-mark { color: #fff; }
.primary-button, .secondary-button { background: var(--accent-color); }
.text-button { color: var(--accent-color); }
.form-field input:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-ring); }
.profile-summary:hover { border-color: var(--accent-border); background: var(--active-fill); }
body[data-theme="dark"] .viewer-empty strong { color: var(--text-main); }
body[data-theme="dark"] .viewer-empty span,
body[data-theme="dark"] .history-time,
body[data-theme="dark"] .history-footnote,
body[data-theme="dark"] .history-label { color: var(--text-secondary); }
body[data-theme="dark"] .history-item.active { border-color: var(--accent-border); background: var(--active-fill); }
body[data-theme="dark"] #canvas .djs-shape[data-element-id^="Participant"] .djs-visual > rect,
body[data-theme="dark"] #canvas .djs-shape[data-element-id^="pool_"] .djs-visual > rect { fill: rgba(37, 59, 44, .88) !important; stroke: #627c69 !important; }
body[data-theme="dark"] #canvas .djs-connection { stroke: #b0c9b7 !important; }
body[data-theme="dark"] #revision-select option { color: var(--text-main); background: #203127; }