/* ============================================================================ Contour · design tokens The ONLY file that may contain literal colours, sizes or durations. Every other stylesheet consumes these variables. Light is the default; [data-theme="dark"] on swaps the colour roles. ========================================================================== */ :root { /* ---- type ------------------------------------------------------------ */ --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --fs-xs: 11px; --lh-xs: 16px; /* micro labels, counts, kbd */ --fs-sm: 12px; --lh-sm: 16px; /* labels, rail items, chips */ --fs-base: 13px; --lh-base: 1.45; /* body + grid cells (contract) */ --fs-md: 14px; --lh-md: 20px; /* comfortable body */ --fs-lg: 16px; --lh-lg: 24px; /* section titles */ --fs-xl: 24px; --lh-xl: 32px; /* page titles */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --tracking-caps: .04em; /* ---- spacing · 4px base, 8px working rhythm -------------------------- */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; /* the rhythm unit */ --sp-3: 12px; --sp-4: 16px; /* rail padding */ --sp-6: 24px; /* section gap */ --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ---- shell geometry --------------------------------------------------- */ --topbar-h: 48px; --viewbar-h: 40px; --rail-w: 280px; /* view rail, collapsible */ --rail-w-min: 192px; --rail-w-max: 320px; --config-w: 320px; /* configure rail */ --control-h: 32px; --control-h-lg: 36px; --control-h-sm: 26px; --col-header-h: 36px; --col-w-default: 180px; --board-col-w: 280px; --content-max: 1200px; /* ---- density · row heights ------------------------------------------- */ --row-short: 32px; --row-medium: 44px; --row-tall: 60px; --row-h: var(--row-medium); /* ---- radius ----------------------------------------------------------- */ --radius-sm: 4px; --radius: 6px; /* controls (contract) */ --radius-lg: 8px; /* panels, cards */ --radius-pill: 999px; /* ---- borders ---------------------------------------------------------- */ --border-w: 1px; --border: var(--border-w) solid var(--line); --border-soft: var(--border-w) solid var(--line-2); /* ---- motion ----------------------------------------------------------- */ --dur-fast: 120ms; /* hover / focus */ --dur-panel: 180ms; /* panel + rail transitions */ --dur-drag: 150ms; /* drag settling */ --ease: cubic-bezier(.2, .6, .2, 1); /* ---- layering --------------------------------------------------------- */ --z-rail: 10; --z-sticky: 20; --z-popover: 100; --z-modal: 200; --z-menu: 250; /* anchored menus, ABOVE any modal/drawer that raised them */ --z-toast: 300; /* ---- colour roles · LIGHT -------------------------------------------- */ --canvas: #F7F8FA; --surface: #FFFFFF; --raised: #FFFFFF; --sunken: #F2F4F7; /* The emphasis ramp is monotonic and every rank clears WCAG AA 4.5:1 for normal text on every shell background, including --active (#EAECF0), the darkest of them. --text-3 was #858F9E, which measured 2.97-3.27 and was the only token still failing; reaching 4.5 pushed it past the old --text-2, so --text-2 steps down one rank with it and the three ranks stay distinct. Ratios on canvas / surface / sunken+hover / active: --text 15.29 / 16.24 / 14.74 / 13.73 --text-2 7.23 / 7.69 / 6.98 / 6.50 --text-3 5.11 / 5.43 / 4.92 / 4.59 */ --text: #182230; --text-2: #475467; --text-3: #5F6B7A; --text-inverse: #FFFFFF; --line: #D0D5DD; --line-2: #E4E7EC; --hover: #F2F4F7; --active: #EAECF0; --selected: rgba(79, 70, 229, .10); --accent: #4F46E5; --accent-hover: #4338CA; --accent-soft: #EEF2FF; --accent-line: #C7D2FE; --on-accent: #FFFFFF; --focus-ring: #4F46E5; --focus-ring-w: 2px; --scrim: rgba(16, 24, 40, .40); /* semantic · validation and execution only — never business stages */ --success: #067647; --success-soft: #ECFDF3; --success-line: #ABEFC6; --warning: #B54708; --warning-soft: #FFFAEB; --warning-line: #FEDF89; --danger: #B42318; --danger-soft: #FEF3F2; --danger-line: #FECDCA; --info: #175CD3; --info-soft: #EFF8FF; --info-line: #B2DDFF; /* ---- operator object colours · twelve curated + two neutrals -------- Referenced by name from the store (Object_.color, vocabulary option colour). Resolved in JS as var(--obj-) with --accent as fallback. They tint dots, chips and markers only; never primary buttons or error states. */ --obj-red: #E03E3E; --obj-orange: #D9730D; --obj-amber: #CB912F; --obj-yellow: #B79B1E; --obj-green: #0F8A5F; --obj-teal: #0E8A84; --obj-cyan: #0B7FA8; --obj-blue: #2563EB; --obj-indigo: #4F46E5; --obj-violet: #7C3AED; --obj-purple: #9333EA; --obj-pink: #DB2777; --obj-brown: #8A6A4B; --obj-slate: #667085; --obj-gray: #667085; /* tint recipes — consumers use color-mix against these, so one hue serves dot, chip, tray and row-tint in both themes */ --tint-weak: 10%; --tint-chip: 16%; --tint-strong: 26%; /* ---- elevation -------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05); --shadow-sm: 0 1px 3px rgba(16, 24, 40, .10), 0 1px 2px rgba(16, 24, 40, .06); --shadow-md: 0 4px 12px rgba(16, 24, 40, .10), 0 2px 4px rgba(16, 24, 40, .06); --shadow-lg: 0 16px 40px rgba(16, 24, 40, .16), 0 4px 10px rgba(16, 24, 40, .08); } /* ---- colour roles · DARK ------------------------------------------------ */ [data-theme="dark"] { --canvas: #11151C; --surface: #191F29; --raised: #222B38; --sunken: #141922; /* same rule in reverse: #7D8A9C measured 4.07 on --raised and 3.63 on --active. Lightened until every rank clears 4.5:1 on every dark surface. Ratios on canvas / surface / raised+hover / active: --text-2 8.63 / 7.81 / 6.74 / 6.00 --text-3 7.24 / 6.55 / 5.65 / 5.04 */ --text: #F2F4F7; --text-2: #A8B3C4; --text-3: #98A4B5; --text-inverse: #11151C; --line: #3B475B; --line-2: #2A3342; --hover: #222B38; --active: #2A3342; --selected: rgba(165, 180, 252, .14); --accent: #A5B4FC; --accent-hover: #C7D2FE; --accent-soft: #232A44; --accent-line: #3D4677; --on-accent: #11151C; --focus-ring: #A5B4FC; --scrim: rgba(4, 7, 12, .60); --success: #6CE9A6; --success-soft: #0B2C1F; --success-line: #1F6B48; --warning: #FEC84B; --warning-soft: #2E2210; --warning-line: #7A5314; --danger: #FDA29B; --danger-soft: #2E1513; --danger-line: #7A2C25; --info: #84CAFF; --info-soft: #0E2138; --info-line: #1F4C86; --obj-red: #F97066; --obj-orange: #F79009; --obj-amber: #FDB022; --obj-yellow: #E8C547; --obj-green: #3CCB7F; --obj-teal: #2ED3C6; --obj-cyan: #36BFFA; --obj-blue: #84ADFF; --obj-indigo: #A5B4FC; --obj-violet: #C3B5FD; --obj-purple: #D6BBFB; --obj-pink: #F670C7; --obj-brown: #C4A484; --obj-slate: #A8B3C4; --obj-gray: #A8B3C4; --tint-weak: 14%; --tint-chip: 22%; --tint-strong: 34%; --shadow-xs: 0 1px 2px rgba(0, 0, 0, .40); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .50), 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 4px 14px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .40); --shadow-lg: 0 18px 46px rgba(0, 0, 0, .62), 0 4px 12px rgba(0, 0, 0, .45); } /* ---- narrow shell geometry --------------------------------------------- Below 600px the view toolbar wraps onto a second line (css/app.css), so the shell's second grid row and the fixed rails' `top` — both computed from --viewbar-h — have to grow with it. Kept here so there is still exactly one number describing the height of that bar. */ @media (max-width: 600px) { :root { --viewbar-h: 72px; } } /* ---- density selector · set on .app from View.density ------------------- */ [data-density="short"] { --row-h: var(--row-short); } [data-density="medium"] { --row-h: var(--row-medium); } [data-density="tall"] { --row-h: var(--row-tall); } /* ---- reduced motion ----------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-panel: 0ms; --dur-drag: 0ms; } }