/* ============================================================================ progressed — design tokens ---------------------------------------------------------------------------- The single source of truth for every colour, type, spacing, radius, shadow, z-index and motion value in the product. Nothing downstream (base.css, components.css, the prototypes) may use a literal hex or a pixel magic number that could live here instead. Rule for Claude Code: if you need a value that is not here, ADD it here first and reference the variable — do not inline it. System name is one token (--wordmark-text) and one SVG (assets/wordmark.svg), so re-branding is a two-file change. ============================================================================ */ :root { /* ---- Brand -------------------------------------------------------------- */ --wordmark-text: "progressed"; /* also set in assets/wordmark.svg */ /* ---- Palette: raw ramp -------------------------------------------------- * * Neutrals are slate, never pure black. Do not reference the raw ramp in * components — use the semantic roles below. */ --slate-900: #1B2130; --slate-700: #48526A; --slate-600: #5E6880; /* added 2026-08-06 — the tertiary TEXT step */ --slate-500: #79839A; --slate-400: #A2AABB; --slate-300: #B7BEcc; --slate-250: #CED4E0; --slate-200: #E1E5EE; --slate-100: #F1F3F8; --slate-75: #F7F8FB; --slate-60: #EEF0F4; --slate-50: #E9ECF3; --indigo-600: #3B44B4; --indigo-500: #4B54C6; --indigo-400: #6B74D8; --indigo-300: #8189E0; --indigo-50: #ECEDFB; --amber-700: #B26A00; --amber-500: #E79119; --amber-50: #FBEEDA; --red-700: #C23A2E; --red-500: #D64B3E; --red-50: #FAE5E2; --green-700: #2C7A57; --green-500: #4FA07A; --green-50: #E2F0EA; /* ---- Palette: semantic roles ------------------------------------------- */ --bg: var(--slate-60); /* app chrome behind cards */ --surface: #FFFFFF; /* cards, panels, table rows */ --surface-alt: var(--slate-100); /* headers, quiet fills */ --surface-sunk: var(--slate-50); /* track behind progress bars */ --ink: var(--slate-900); /* primary text */ --ink-2: var(--slate-700); /* secondary text */ /* Tertiary / meta TEXT — dates, counts, hints, table heads, tab and segment labels, at 11–12.5px. This is real content, not decoration, so it clears WCAG AA (4.5:1) on EVERY backdrop it is used on, not just white: white #FFFFFF 5.57 · slate-75 #F7F8FB 5.25 · surface-alt #F1F3F8 5.02 · bg #EEF0F4 4.89 · surface-sunk #E9ECF3 4.71 (all pass) It shipped as --slate-500 (#79839A) = 3.80:1 on white and 3.21:1 on the sunk track behind .c-seg — a fail everywhere it appeared. Clearing AA on the tinted fills is what forces the darker step, so --ink-2 and --ink-3 now sit closer together; that is affordable here because nearly every --ink-3 use is ALSO set apart by type (uppercase, 11px, semi-bold, letter-spaced), so the hierarchy never rested on colour alone. Do not lighten it back. */ --ink-3: var(--slate-600); --ink-4: var(--slate-400); /* faint / disabled — never real content */ --border: var(--slate-200); --border-strong: var(--slate-250); --border-heavy: var(--slate-300); /* Interactive teal was the PARENT brand (its.fashion); progressed reserves indigo for interaction so the two never clash on a co-branded screen. */ --primary: var(--indigo-500); --primary-hover: var(--indigo-600); --primary-soft: var(--indigo-50); --primary-line: var(--indigo-300); --on-primary: #FFFFFF; /* Semantic — colour is reserved for MEANING. A warning must be able to be the loudest thing on an otherwise quiet screen. */ --warn: var(--amber-700); /* amber text / icon */ --warn-bar: var(--amber-500); /* amber fills (gantt bars) */ --warn-soft: var(--amber-50); --warn-border: #F0E0C0; --danger: var(--red-700); /* red text / icon */ --danger-bar: var(--red-500); --danger-soft: var(--red-50); --danger-border: #F1CEC9; --ok: var(--green-700); --ok-bar: var(--green-500); --ok-soft: var(--green-50); /* Progress-meter "to do" segment. A FILL, not text, so it keeps the mid grey --ink-3 used to carry rather than following it darker: text contrast and adjacent-fill contrast are different requirements, and darkening this would have collapsed "to do" against the indigo "in progress" beside it (1.63:1 → 1.11:1). Meaning never rests on it alone — the meter carries a labelled legend, dots and a percentage. */ --meter-todo: var(--slate-500); /* Gantt bar fills — muted so warning states pop against them. */ --bar-planned: #C6CCDA; --bar-active: var(--indigo-400); --bar-done: var(--green-500); --bar-risk: var(--warn-bar); --bar-blocked: var(--danger-bar); --critical: #7A3AA0; /* critical-path marker (outline + slack) — a distinct violet: NOT red (that reads as danger/blocked) and NOT the indigo selection ring. Shared with the avatar palette so it stays a house colour. */ --weekend: #F3F4F8; /* weekend column shading */ --today-line: var(--primary); /* ---- Type -------------------------------------------------------------- * * Pairing (justified in design-notes.md): * Display = Space Grotesk — the wordmark + headings, used with restraint * Text = IBM Plex Sans — the dense data workhorse * Mono = IBM Plex Mono — dates & durations, true tabular numerals * Fallbacks are system stacks so the UI renders before/without the woff2s. */ --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale (px). Data surfaces sit at 12–14; nothing meaningful < 11. */ --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-21: 21px; --fs-24: 24px; --fs-26: 26px; --fs-30: 30px; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --lh-tight: 1.25; --lh-snug: 1.4; --lh-body: 1.6; --tracking-tight: -0.02em; /* display headings */ --tracking-wide: 0.06em; /* eyebrows / overlines (UPPERCASE) */ /* ---- Spacing (4px base rhythm) ----------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---- Radius ------------------------------------------------------------ */ --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 14px; --radius-pill: 999px; /* ---- Elevation --------------------------------------------------------- * * Resting surfaces are flat (1px border). Shadow signals "lifted above the * page": popovers, menus, the slide-over, modals, the drag tooltip. */ --shadow-sm: 0 1px 2px rgba(20,25,40,.12); --shadow-pop: 0 10px 34px rgba(20,25,40,.20); --shadow-panel: -16px 0 48px rgba(20,25,40,.18); --shadow-modal: 0 24px 60px rgba(20,25,40,.34); --shadow-tooltip: 0 6px 20px rgba(20,25,40,.30); /* ---- Z-index scale ----------------------------------------------------- */ --z-header: 20; --z-sticky: 30; --z-panel: 41; --z-popover: 50; --z-modal: 55; --z-toast: 60; /* ---- Motion ------------------------------------------------------------ * * Quick and functional. Everything is gated by prefers-reduced-motion in * base.css. */ --dur-fast: 150ms; --dur: 200ms; --dur-panel: 220ms; --ease: cubic-bezier(.4, 0, .2, 1); /* ---- Gantt geometry (load-bearing constants — see design-notes) -------- */ --gantt-row-h: 34px; /* task/subtask row height */ --gantt-section-h: 30px; /* section (group) row height */ --gantt-bar-h: 16px; /* task bar height */ --gantt-tree-w: 436px; /* left tree column width */ --gantt-axis-h: 56px; /* timeline header height */ /* Pixels per calendar day, per zoom level. Read by gantt.js. */ --gantt-daywidth-day: 22; --gantt-daywidth-week: 9.6; --gantt-daywidth-month: 3.4; /* ---- Template designer grid tracks (structural layout) ---------------- */ --tpl-col-offset: 92px; /* offset / duration numeric columns */ --tpl-col-role: 170px; /* role-hint column */ --tpl-col-date: 96px; /* preview start / finish columns */ --tpl-col-action: 32px; /* row delete-button column */ }