/* ---------------------------------------------------------------------------- * Design system tokens (PRD master Section 8). * * All color, typography, spacing, radius, shadow, and motion values MUST be * consumed via these custom properties. Do not introduce ad-hoc colors, hex * codes, or px magic numbers in component stylesheets. * * Light mode is the default; `[data-theme="dark"]` on switches to * dark mode. When the theme cookie is "system" the server omits the * `data-theme` attribute and `@media (prefers-color-scheme: dark)` takes * over. * ------------------------------------------------------------------------- */ :root { /* Accent (sage) --------------------------------------------------------- */ --color-accent: #6f8271; --color-accent-hover: #5e7160; --color-accent-active: #4f6251; --color-accent-soft: #e3eadf; /* Surfaces -------------------------------------------------------------- */ --color-bg-app: #f6f5f2; --color-bg-card: #ffffff; --color-bg-input: #efede8; --color-bg-hover: #ebe8e2; --color-bg-active: #e3dfd7; /* Foreground ------------------------------------------------------------ */ --color-fg-primary: #1c1b19; --color-fg-secondary: #4a4844; --color-fg-tertiary: #73706b; --color-fg-disabled: #a29f99; --color-fg-on-accent: #ffffff; /* Borders --------------------------------------------------------------- */ --color-border-light: #e5e2dc; --color-border-medium: #d6d2ca; --color-border-focus: #7a8b7b; /* Status palette -------------------------------------------------------- */ --color-neutral-fg: #8a8882; --color-neutral-bg: #e8e6e0; --color-neutral-light-fg: #9a978f; --color-neutral-light-bg: #e4e1db; --color-info-fg: #6a8396; --color-info-bg: #e0e7ec; --color-success-fg: #6e8f6a; --color-success-bg: #e0ead8; --color-warning-fg: #b6884a; --color-warning-bg: #f3e6cf; --color-danger-fg: #a66560; --color-danger-bg: #eed7d3; /* Status palette — additional entries (PRD master 8.1.1) ---------------- */ --color-in-progress-fg: #b08a4e; --color-in-progress-bg: #f1e6d2; --color-review-fg: #8a7aa3; --color-review-bg: #e8e2ed; /* Archived status — semantic alias over the neutral-light pair so PRD-named tokens read true. Existing CSS using neutral-light still works; new CSS should prefer the archived alias. */ --color-archived-fg: var(--color-neutral-light-fg); --color-archived-bg: var(--color-neutral-light-bg); /* Kanban column headers (PRD master 8.1.1) ------------------------------ */ --color-kanban-backlog: #d6d2ca; --color-kanban-planned: #d6dde3; --color-kanban-progress: #e8d9ba; --color-kanban-review: #ddd4e4; --color-kanban-approved: #d1dcc7; --color-kanban-shipped: #becbc0; /* Overlay backdrop — modal / dialog backdrop ink. Replaces the hardcoded rgba(28, 27, 25, 0.4) literals that previously appeared in hierarchy.css, release_board.css, block-controls.css, etc. */ --color-overlay-backdrop: rgba(28, 27, 25, 0.4); /* Navigation bar (PRD master 8.4 — dark header chrome) ----------------- */ --color-nav-bg: #1c1b19; --color-nav-bg-hover: #2a2926; --color-nav-fg: #ffffff; --color-nav-fg-muted: #a29f99; --color-nav-input-bg: #2a2926; --color-nav-input-border: #4a4844; /* Role indicators (PRD master 8.1.1) ------------------------------------ */ --color-role-primary-fg: #3e4c40; --color-role-primary-bg: #d9e2d9; --color-role-secondary-fg: #46443f; --color-role-secondary-bg: #dbd9d2; --color-role-fyi-fg: #4c4a45; --color-role-fyi-bg: #e4e2dc; /* Typography ------------------------------------------------------------ */ --font-family-sans: "Source Sans 3", system-ui, -apple-system, sans-serif; --font-family-mono: "Source Code Pro", ui-monospace, SFMono-Regular, monospace; --font-size-xs: 11px; --font-size-sm: 12.5px; --font-size-md: 14px; --font-size-base: 15px; --font-size-lg: 17px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 30px; --font-size-4xl: 40px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-body: 22px; --letter-spacing-heading: 0.01em; /* Spacing (px) ---------------------------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; /* Radii ----------------------------------------------------------------- */ --radius-xs: 3px; --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* Shadows --------------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(28, 27, 25, 0.04); --shadow-sm: 0 2px 4px rgba(28, 27, 25, 0.06); --shadow-md: 0 4px 12px rgba(28, 27, 25, 0.08); --shadow-lg: 0 8px 24px rgba(28, 27, 25, 0.10); --shadow-xl: 0 16px 40px rgba(28, 27, 25, 0.12); /* Motion ---------------------------------------------------------------- */ --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms; /* Focus ring ------------------------------------------------------------ */ --focus-ring: 0 0 0 3px rgba(122, 139, 123, 0.35); } [data-theme="dark"] { --color-accent: #8fa392; --color-accent-hover: #a0b4a3; --color-accent-active: #7d927f; --color-accent-soft: #2a332c; --color-bg-app: #17181a; --color-bg-card: #1f2123; --color-bg-input: #26282b; --color-bg-hover: #2d2f33; --color-bg-active: #353739; --color-fg-primary: #eceae4; --color-fg-secondary: #c2bfb7; --color-fg-tertiary: #8f8c84; --color-fg-disabled: #5a5853; --color-fg-on-accent: #17181a; --color-border-light: #2a2c2f; --color-border-medium: #3a3c40; --color-border-focus: #8fa392; --color-neutral-fg: #b3b1aa; --color-neutral-bg: #2c2d2f; --color-neutral-light-fg: #9a988f; --color-neutral-light-bg: #28292b; --color-info-fg: #9cb3c3; --color-info-bg: #233238; --color-success-fg: #a2bf9f; --color-success-bg: #273529; --color-warning-fg: #d1a870; --color-warning-bg: #3a2f1f; --color-danger-fg: #cf9593; --color-danger-bg: #3a2522; --color-role-primary-fg: #cfdcd0; --color-role-primary-bg: #2a332c; --color-role-secondary-fg: #d4d2ca; --color-role-secondary-bg: #2f2e2a; --color-role-fyi-fg: #bfbdb7; --color-role-fyi-bg: #32302c; /* Status palette — additional entries (dark) */ --color-in-progress-fg: #d1a870; --color-in-progress-bg: #3a2f1f; --color-review-fg: #b3a3cf; --color-review-bg: #2c2535; /* Archived status alias (dark) */ --color-archived-fg: var(--color-neutral-light-fg); --color-archived-bg: var(--color-neutral-light-bg); /* Kanban column headers (dark) — same hue family at lower chroma so the slate-base surface keeps the calm/zen palette in dark mode. */ --color-kanban-backlog: #38383b; --color-kanban-planned: #2a323a; --color-kanban-progress: #3a3325; --color-kanban-review: #322b3a; --color-kanban-approved: #2c3528; --color-kanban-shipped: #2a332f; /* Overlay backdrop — slightly heavier ink on the dark base. */ --color-overlay-backdrop: rgba(0, 0, 0, 0.55); /* Navigation bar (dark) — lifted above body bg #17181A so the chrome reads as distinct surface, not the same plane as content. */ --color-nav-bg: #26282b; --color-nav-bg-hover: #2d2f33; --color-nav-fg: #eceae4; --color-nav-fg-muted: #8f8c84; --color-nav-input-bg: #1f2123; --color-nav-input-border: #3a3c40; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.36); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.42); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50); --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.58); --focus-ring: 0 0 0 3px rgba(143, 163, 146, 0.45); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-accent: #8fa392; --color-accent-hover: #a0b4a3; --color-accent-active: #7d927f; --color-accent-soft: #2a332c; --color-bg-app: #17181a; --color-bg-card: #1f2123; --color-bg-input: #26282b; --color-bg-hover: #2d2f33; --color-bg-active: #353739; --color-fg-primary: #eceae4; --color-fg-secondary: #c2bfb7; --color-fg-tertiary: #8f8c84; --color-fg-disabled: #5a5853; --color-fg-on-accent: #17181a; --color-border-light: #2a2c2f; --color-border-medium: #3a3c40; --color-border-focus: #8fa392; --color-neutral-fg: #b3b1aa; --color-neutral-bg: #2c2d2f; --color-neutral-light-fg: #9a988f; --color-neutral-light-bg: #28292b; --color-info-fg: #9cb3c3; --color-info-bg: #233238; --color-success-fg: #a2bf9f; --color-success-bg: #273529; --color-warning-fg: #d1a870; --color-warning-bg: #3a2f1f; --color-danger-fg: #cf9593; --color-danger-bg: #3a2522; --color-role-primary-fg: #cfdcd0; --color-role-primary-bg: #2a332c; --color-role-secondary-fg: #d4d2ca; --color-role-secondary-bg: #2f2e2a; --color-role-fyi-fg: #bfbdb7; --color-role-fyi-bg: #32302c; --color-in-progress-fg: #d1a870; --color-in-progress-bg: #3a2f1f; --color-review-fg: #b3a3cf; --color-review-bg: #2c2535; --color-archived-fg: var(--color-neutral-light-fg); --color-archived-bg: var(--color-neutral-light-bg); --color-kanban-backlog: #38383b; --color-kanban-planned: #2a323a; --color-kanban-progress: #3a3325; --color-kanban-review: #322b3a; --color-kanban-approved: #2c3528; --color-kanban-shipped: #2a332f; --color-overlay-backdrop: rgba(0, 0, 0, 0.55); --color-nav-bg: #26282b; --color-nav-bg-hover: #2d2f33; --color-nav-fg: #eceae4; --color-nav-fg-muted: #8f8c84; --color-nav-input-bg: #1f2123; --color-nav-input-border: #3a3c40; } }