/* Design tokens (CSS custom properties). Light by default; dark via OS preference (prefers-color-scheme) or an explicit toggle stored in localStorage as data-theme="light"|"dark" on (see theme-boot.js and core/store.js setTheme()). */ :root { --bg: #f5f6f8; --bg-elevated: #ffffff; --bg-muted: #eef0f3; --text: #1c222b; --text-muted: #5b6472; --border: #dde1e7; --accent: #3457d5; --accent-contrast: #ffffff; --accent-soft: #e8edff; --success: #1f8a53; --success-soft: #e4f6ec; --warning: #a9670f; --warning-soft: #fdf1de; --danger: #c23a3a; --danger-soft: #fbe8e8; --info: #2a7fb8; --info-soft: #e5f2fa; --focus-ring: #3457d5; --shadow: 0 4px 16px rgba(20, 24, 33, 0.08); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --status-backlog: #6b7280; --status-backlog-soft: #e9eaed; --status-ready: #2a7fb8; --status-ready-soft: #e5f2fa; --status-in_progress: #6d4fd1; --status-in_progress-soft: #efeafc; --status-waiting_human: #a9670f; --status-waiting_human-soft: #fdf1de; --status-in_review: #0f8a8a; --status-in_review-soft: #e2f6f6; --status-waiting_approval: #a12e93; --status-waiting_approval-soft: #f8e6f4; --status-blocked: #c23a3a; --status-blocked-soft: #fbe8e8; --status-done: #1f8a53; --status-done-soft: #e4f6ec; --status-cancelled: #8a8f98; --status-cancelled-soft: #e9eaed; --role-product_owner: #a12e93; --role-project_manager: #3457d5; --role-architect: #0f8a8a; --role-frontend: #c9702f; --role-backend: #2a7fb8; --role-devops: #5b6472; --role-test: #1f8a53; --role-reviewer: #6d4fd1; --role-security: #c23a3a; --role-analyst: #a9670f; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: #14171c; --bg-elevated: #1c2029; --bg-muted: #20242c; --text: #e7e9ee; --text-muted: #9aa2b1; --border: #2c313c; --accent: #7c93ff; --accent-contrast: #0d1117; --accent-soft: #232a45; --success: #4cc98a; --success-soft: #17301f; --warning: #e0a94a; --warning-soft: #3a2c12; --danger: #f0736f; --danger-soft: #3a1c1c; --info: #6ec1f0; --info-soft: #152a37; --shadow: 0 4px 20px rgba(0, 0, 0, 0.45); --status-backlog-soft: #262a32; --status-ready-soft: #12283a; --status-in_progress-soft: #241f3c; --status-waiting_human-soft: #3a2c12; --status-in_review-soft: #0e2b2b; --status-waiting_approval-soft: #331530; --status-blocked-soft: #3a1c1c; --status-done-soft: #17301f; --status-cancelled-soft: #262a32; } } :root[data-theme='dark'] { --bg: #14171c; --bg-elevated: #1c2029; --bg-muted: #20242c; --text: #e7e9ee; --text-muted: #9aa2b1; --border: #2c313c; --accent: #7c93ff; --accent-contrast: #0d1117; --accent-soft: #232a45; --success: #4cc98a; --success-soft: #17301f; --warning: #e0a94a; --warning-soft: #3a2c12; --danger: #f0736f; --danger-soft: #3a1c1c; --info: #6ec1f0; --info-soft: #152a37; --shadow: 0 4px 20px rgba(0, 0, 0, 0.45); --status-backlog-soft: #262a32; --status-ready-soft: #12283a; --status-in_progress-soft: #241f3c; --status-waiting_human-soft: #3a2c12; --status-in_review-soft: #0e2b2b; --status-waiting_approval-soft: #331530; --status-blocked-soft: #3a1c1c; --status-done-soft: #17301f; --status-cancelled-soft: #262a32; } body { background: var(--bg); color: var(--text); }