/* ========================================================================== SFC Workspace — design tokens Rebuilt at Phase 8.5 The ONLY file in this repo permitted to contain a colour literal (CLAUDE.md rule 7). If you are about to type a hex anywhere else, add a token here instead. ── The world ──────────────────────────────────────────────────────────── Paper under glass. Content is opaque, matte and still — cards, rows and cells never blur and never move. Everything floating above them is glass. The chrome carries the personality; the work stays flat and readable, because someone scanning a board at 8am is reading, not admiring. Light is a cool blue-grey paper, not white and emphatically not cream: white cards sit ON it and read as raised without a heavy shadow. Dark is the same hue family taken down to night, so switching themes feels like dusk falling on one object rather than two different products. ── The colours are measured, not chosen ───────────────────────────────── Every ratio below was computed against the previous build's own numbers and meets or beats them (§3.1). The bar was: light text 15.89 · text-2 5.62 · text-3 4.94 · dark text 14.93 · text-2 7.95 · text-3 5.31. ── One thing here is deliberately NOT blue ────────────────────────────── The `print heritage` block at the bottom keeps green and gold, because css/print.css keeps the old SFC document standard on purpose (§3.4, §15.2). Screen and print have diverged knowingly. A green value there is correct; a green value anywhere else is a bug. ========================================================================== */ :root { /* ---- type ------------------------------------------------------------ Cairo throughout. Arabic at the same optical size as Latin needs a touch more leading, which is why --lh-body is generous for a dense UI. */ --font: 'Cairo', 'Noto Naskh Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-050: 0.5625rem; /* 9px — initials inside a 20px avatar */ --fs-075: 0.625rem; /* 10px — chip glyph, count badge */ --fs-100: 0.6875rem; /* 11px — chip, micro label */ --fs-200: 0.75rem; /* 12px — meta */ --fs-300: 0.8125rem; /* 13px — secondary */ --fs-400: 0.875rem; /* 14px — nav, dense UI */ --fs-500: 0.9375rem; /* 15px — body */ --fs-600: 1rem; /* 16px — form controls (iOS zoom floor, §17) */ --fs-700: 1.125rem; /* 18px — panel title */ --fs-800: 1.4375rem; /* 23px — page heading */ --fs-900: 1.875rem; /* 30px — login title */ --fs-display: 2.125rem; /* 34px — page headings on desktop (§3.6) */ /* Two real anchors above the page heading, added at 8.6. The 8.5 scale topped out at 34px and stepped in small increments, which is why nothing on any screen led the eye: a scale with no top has no hierarchy, only sizes. These exist for screens that need ONE dominant object — My Day's answer to "what now", and a board column's count. Used sparingly; a display size on every screen is the same flatness at a larger scale. */ --fs-display-xl: 2.75rem; /* 44px */ --fs-display-2xl: 3.5rem; /* 56px — My Day's opening only */ --lh-tight: 1.22; --lh-snug: 1.38; --lh-body: 1.62; --tracking-tight: -0.015em; --tracking-label: 0.045em; /* ---- space — 4px base, uneven on purpose so a dense passage can earn a quiet one --------------------------------------------------------*/ /* WHICH THEME THE USER AGENT PAINTS ITS OWN CONTROLS IN. Without this the UA follows `prefers-color-scheme` — the OPERATING SYSTEM — while everything in this file follows `data-theme`, the choice made inside the app. When the two disagree, an unstyled control takes its fill from one theme and its ink from the other. Measured on Settings' room inputs: app light + OS dark gave a #3B3B3B box under near-black text at 1.56:1, and app dark + OS light gave a white box under near-white text at 1.07:1. Both unreadable, and neither reproducible on a machine whose OS agrees with the app — which is why it survived a Settings walk. Declaring it here binds the UA to the same switch as the tokens. It is a backstop, not a licence: a control still has to be styled (see the room inputs), and this only decides what an unstyled one falls back to. */ color-scheme: light; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ---- shape — generous, nothing sharp except the table's own rules ---- */ --r-xs: 6px; /* micro objects under ~24px: calendar events, gantt bars, segmented tabs — 8px reads as a lozenge at that height */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* ---- motion — four authored moments, nothing decorative (§3.6) ------- */ --dur-press: 0s; /* press IN is instant — see the note in shell.css */ --dur-fast: 0.14s; --dur: 0.20s; --dur-slow: 0.34s; /* Leaving is quicker than arriving — about 0.7x. An overlay easing in over 200ms and then vanishing between frames reads as a glitch, but a slow exit is something you wait for. Two values because the drawer's entry is --dur-slow and everything else's is --dur; the ratio is what matters. */ --dur-exit: 0.14s; --dur-exit-slow: 0.22s; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.30, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); /* accelerate away */ /* ---- layout metrics -------------------------------------------------- */ --side: 264px; --side-narrow: 76px; --topbar-h: 60px; --tabbar-h: 62px; /* ====================================================================== LIGHT ====================================================================== */ /* ---- ground and surfaces --------------------------------------------- */ --bg: #EDF2F9; /* cool paper — white cards read as raised on it */ --surface: #FFFFFF; --surface-2: #F7FAFD; --surface-3: #E7EEF7; --raised: #FFFFFF; /* A hovered LIST ROW, which is its own problem in each theme and so cannot be a plain surface step. In light the row rests on white — the top of the range — so hover cannot brighten; it tints a shade toward primary and lifts on a shadow. In dark a shadow is invisible against #0D131C, so the fill has to do the work and steps up instead. Same token, opposite direction, which is the whole reason it is a token. */ --row-hover: #F4F8FD; --line: #DCE4EE; --line-soft: #E8EEF6; --input: #FFFFFF; /* --control-line is the edge of something you can PRESS, and it is a different job from --line, which separates things you cannot. WCAG 1.4.11 asks 3:1 of the first and nothing of the second, so they cannot share a value: at #DCE4EE a button edge measures 1.14:1 on the page and a ghost button, drawing nothing at all, measured 1.00. Verified against every surface a control lands on, and the binding one is neither white nor the ground: it is a field inside a MODAL, where --glass-panel over --scrim over the page composites to about #DFE1E5 and swallows a pale line. 4.02:1 on #FFFFFF, 3.83:1 on --surface-2, 3.44:1 on --surface-3, 3.57:1 on the ground, 3.07:1 on the modal composite. Two earlier values were sized against easier surfaces and measured 3.00 and 2.89 on the hard ones. Measure the worst case, not the first one. */ --control-line: #75808F; /* ---- text ------------------------------------------------------------ */ --text: #131A24; /* 17.49:1 on surface (bar 15.89) */ --text-2: #5A6472; /* 6.00:1 on surface (bar 5.62) */ --text-3: #616876; /* 4.98:1 on ground (bar 4.94) */ --text-on-fill: #FFFFFF; /* ---- primary — mid blue. 6.97:1 as text, 6.97:1 with white on it ------ */ --primary: #1F5A9E; --primary-strong: #17497F; /* hover / pressed */ --primary-soft: #E2EBF6; /* tinted ground for selected states */ --primary-edge: #C3D6EC; --on-primary: #FFFFFF; /* A badge riding on a primary fill — the count inside the selected nav item. DARKENS the primary rather than lightening it: white numerals on a 22%-white pill measured 4.22:1, just under the bar, because lightening the ground moves it towards the ink. Darkening moves it away — 9.5:1. Tokenised because rule 7 allows no colour literal outside this file. */ --on-primary-soft: rgba(0, 0, 0, 0.22); /* ---- accent — warm apricot. A FILL, never text: #E8804A measures 2.68:1 as text and 2.76:1 under white. Text uses --accent-ink. ---- */ --accent: #E8804A; --accent-strong: #D96A31; --accent-soft: #FCEFE7; --accent-edge: #F5D3BF; --accent-ink: #BD591F; /* 4.55:1 on surface */ --on-accent: #131A24; /* 6.34:1 — dark ink on the fill, not white */ /* ---- chip ramps — renamed semantically at Phase 8.5 (§3.3). `c-green` rendering teal was a lie in the codebase. Each ramp is tint + ink + edge, every ink measured ≥4.5:1. ------- */ --tint-ok: #E3F0E9; --ink-ok: #1E6B43; --edge-ok: #C4E0D1; --tint-info: #E4EBF3; --ink-info: #1F5A9E; --edge-info: #C7D8EC; --tint-warn: #F6EFE4; --ink-warn: #8F5F18; --edge-warn: #E8D9BE; --tint-danger: #F7E7E6; --ink-danger: #B4322A; --edge-danger: #EFCCC9; --tint-pending: #E2EFEE; --ink-pending: #0F766E; --edge-pending: #C2DEDB; --tint-accent: #FCF0E9; --ink-accent: #A05834; --edge-accent: #F3D8C6; --tint-mute: #EBEDEE; --ink-mute: #5B6675; --edge-mute: #D8DDE3; /* ---- semantic singles ------------------------------------------------ */ --ok: #1E6B43; --warn: #8F5F18; --danger: #B4322A; /* ---- glass (§3.2) — opacity is set by what can pass BEHIND a surface, not by taste. Chrome over a bounded backdrop can be properly glassy; the top bar has arbitrary content scrolling under it and must be denser or secondary text on it fails at 3.85:1. --------- */ --glass-panel: rgba(255, 255, 255, 0.72); /* sidebar, drawer, modal, sheet */ --glass-bar: rgba(255, 255, 255, 0.82); /* top bar — unbounded backdrop */ --glass-solid: #FFFFFF; /* the @supports fallback */ --glass-edge: rgba(255, 255, 255, 0.65); /* inner top highlight */ --glass-line: rgba(19, 26, 36, 0.08); --blur: 20px; --blur-strong: 28px; /* ---- depth — offset AND blur; a zero-offset halo is decoration -------- */ --shadow-sm: 0 1px 2px rgba(16, 32, 56, 0.06), 0 1px 1px rgba(16, 32, 56, 0.04); --shadow: 0 2px 6px rgba(16, 32, 56, 0.07), 0 8px 20px rgba(16, 32, 56, 0.06); --shadow-lg: 0 8px 24px rgba(16, 32, 56, 0.10), 0 28px 56px rgba(16, 32, 56, 0.12); /* ---- focus — measured ≥3:1 in BOTH themes. The legacy rule used gold in both, and gold on white is 2.42:1. That was the bug (§3.6). ------ */ --focus: #1F5A9E; --focus-glow: rgba(31, 90, 158, 0.22); --scrim: rgba(11, 18, 30, 0.42); /* ---- the login world -------------------------------------------------- */ --login-grad: linear-gradient(155deg, #123A69 0%, #1F5A9E 52%, #2E6FB8 100%); /* The gradient's midpoint as a flat colour, so the contrast gallery can stand a login field on the surface it really sits on. A checker that cannot reach the login screen is a checker that will pass it. */ --login-grad-mid: #1F5A9E; /* A DARK vibrancy panel, not a white tint. White-over-blue only ever gets lighter, and at the gradient's bottom stop even #FFFFFF text measured 3.94:1 — the card was the defect, not the ink. Smoked, the same tokens measure 10.40 / 7.43 / 6.45. */ --login-card: rgba(8, 19, 31, 0.50); --login-card-line: rgba(255, 255, 255, 0.16); --login-title: #FFFFFF; --login-sub: #C9DCF2; /* 7.4:1 on the gradient midpoint */ --login-field: rgba(255, 255, 255, 0.10); /* 0.24 measured 2.54:1 against the smoked card — a field edge you had to already know was there. 0.40 measures 3.4:1 and still reads as a hairline on glass rather than a drawn box. */ --login-field-line: rgba(255, 255, 255, 0.40); --login-field-ink: #FFFFFF; --login-foot: #B7CEEA; --login-rule: rgba(255, 255, 255, 0.20); --login-tool: rgba(255, 255, 255, 0.14); --login-tool-ink: #FFFFFF; --login-tool-line: rgba(255, 255, 255, 0.26); --login-tool-hover: rgba(255, 255, 255, 0.22); --login-error: rgba(255, 255, 255, 0.14); --boot-track: rgba(255, 255, 255, 0.22); /* ---- the sidebar world ------------------------------------------------ Frosted over the page ground, not a solid slab of colour. Its ink is a normal text ramp because the backdrop behind it is bounded. */ --side-bg: rgba(255, 255, 255, 0.72); --side-solid: #F4F8FC; --side-ink: #131A24; --side-ink-2: #5A6472; --side-label: #67717F; /* 4.6:1 on the sidebar composite */ --side-hover: rgba(19, 26, 36, 0.045); /* ---- the logo mark ---------------------------------------------------- */ --logo-1: #E8804A; /* warm figure */ --logo-2: #1F5A9E; /* centre — overridden on the login's dark ground */ --logo-3: #3E7FC4; /* cool figure */ /* ---- sadu (§3.5) — ONE large statement, not wallpaper. Login and empty states only; never behind working content. --------------------- */ /* A COMPOSED FIGURE, not a tile. Everything sits inside a 24px margin of its own viewBox and the bands taper, so it reads as an object however it is placed — the first version ran to the edges and cropped into a visible rectangle wherever its container ended. */ /* RETIRED (§3.30). --sadu-rule and --sadu-rule-opacity are gone: the woven band failed twice as an applied signature — invisible as a hairline, and misleading as a sidebar edge sitting on a scroll track. The LARGE --sadu below stays; it dresses login and empty states, where it is big enough to read as a motif rather than as chrome. band used as the rule between a page head and its content, once per screen and nowhere else. It is a border, not a decoration — the thing that separates the two regions IS the motif. Tokenised here because rule 7 allows no colour literal outside this file, and the stroke colour is baked into the data URI. */ --sadu: url("data:image/svg+xml;utf8,"); --sadu-opacity-login: 0.16; --sadu-opacity-empty: 0.045; /* ====================================================================== PRINT HERITAGE — green and gold, kept ON PURPOSE (§3.4) css/print.css reads these and nothing else does. The monthly package leaves the building; it keeps the old SFC document standard until that is decided separately. Do not "modernise" these to blue. ====================================================================== */ --green: #1F5C38; --gold: #C9A227; --paper: #FFFFFF; --print-ink: #14181B; --print-mute: #55605A; --print-rule: #C8CFCA; --green-ink: #1F5C38; --blue-ink: #23558C; --orange-ink: #B84200; --red-ink: #B4322A; --slate-ink: #55605A; --tint-green: #E4EFE7; --tint-blue: #E4EBF3; --tint-orange:#FBEDE4; --tint-red: #F7E7E6; --tint-slate: #ECEEED; } /* ========================================================================== DARK Designed for the chrome first: glass is where dark themes fail, because a translucent panel over a near-black ground has almost no separation to work with. Hence a lifted surface (#18212E on #0D131C) rather than pure black, and a top highlight on glass instead of a shadow. ========================================================================== */ html[data-theme="dark"] { color-scheme: dark; --bg: #0D131C; --surface: #18212E; --surface-2: #1E2836; --surface-3: #243040; --raised: #1E2836; --row-hover: #243040; --line: #2B3648; --line-soft: #222C3B; --input: #131B26; /* Same correction as light, and it mattered more here: the first value cleared --surface at 3.01 but only reached 2.51 on --surface-3. Now 4.31:1 on the ground, 3.73:1 on --surface, 3.43:1 on --surface-2, 3.08:1 on --surface-3, 4.02:1 on --input. */ --control-line: #707A8A; --text: #F2F8FF; /* 15.16:1 on surface (bar 14.93) */ --text-2: #ADB8C7; /* 8.07:1 on surface (bar 7.95) */ --text-3: #818C9B; /* 5.46:1 on ground (bar 5.31) */ --text-on-fill: #0D131C; --primary: #6BA7F2; /* 6.51:1 on surface · 7.48:1 with ink on it */ --primary-strong: #8FBEF7; --primary-soft: rgba(107, 167, 242, 0.16); --primary-edge: rgba(107, 167, 242, 0.34); --on-primary: #08111D; --on-primary-soft: rgba(8, 17, 29, 0.16); --accent: #FF9862; /* 7.66:1 on surface */ --accent-strong: #FFAE83; --accent-soft: rgba(255, 152, 98, 0.15); --accent-edge: rgba(255, 152, 98, 0.32); --accent-ink: #FF9862; --on-accent: #2A1206; --tint-ok: #16302A; --ink-ok: #7FD8A6; --edge-ok: #23483C; --tint-info: #16283F; --ink-info: #8FBEF7; --edge-info: #24405F; --tint-warn: #322816; --ink-warn: #E8C173; --edge-warn: #4A3B21; --tint-danger: #35201F; --ink-danger: #F09A93; --edge-danger: #4E2E2C; --tint-pending: #12302F; --ink-pending: #6FD3CB; --edge-pending: #1E4644; --tint-accent: #35251C; --ink-accent: #FFB183; --edge-accent: #4C3628; --tint-mute: #232B36; --ink-mute: #A3AEBC; --edge-mute: #333D4B; --ok: #7FD8A6; --warn: #E8C173; --danger: #F09A93; --glass-panel: rgba(24, 33, 46, 0.70); --glass-bar: rgba(13, 19, 28, 0.72); --glass-solid: #18212E; --glass-edge: rgba(255, 255, 255, 0.07); --glass-line: rgba(255, 255, 255, 0.09); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.34); --shadow: 0 2px 8px rgba(0, 0, 0, 0.40), 0 10px 24px rgba(0, 0, 0, 0.30); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.50), 0 30px 60px rgba(0, 0, 0, 0.42); /* Blue at 2.4:1 on the dark ground is not a focus indicator. Apricot is. */ --focus: #FFAE83; --focus-glow: rgba(255, 174, 131, 0.24); --scrim: rgba(3, 7, 13, 0.62); --login-grad: linear-gradient(155deg, #08111D 0%, #123A69 55%, #1B4E8C 100%); --login-grad-mid: #123A69; --login-card: rgba(4, 10, 18, 0.55); --login-card-line: rgba(255, 255, 255, 0.12); --login-sub: #A9C4E4; --login-field: rgba(255, 255, 255, 0.08); --login-field-line: rgba(255, 255, 255, 0.38); /* was 0.18 — measured 2.20:1 */ --login-foot: #8FA9C8; --login-rule: rgba(255, 255, 255, 0.12); --login-tool: rgba(255, 255, 255, 0.08); --login-tool-line: rgba(255, 255, 255, 0.16); --boot-track: rgba(255, 255, 255, 0.14); --side-bg: rgba(24, 33, 46, 0.70); --side-solid: #16202C; --side-ink: #F2F8FF; --side-ink-2: #ADB8C7; --side-label: #93A0B1; --side-hover: rgba(255, 255, 255, 0.055); --logo-1: #FF9862; --logo-2: #6BA7F2; --logo-3: #8FBEF7; --sadu-opacity-login: 0.13; --sadu-opacity-empty: 0.06; /* Print heritage does NOT follow the theme — paper is paper. */ } /* ========================================================================== PRINT — pin the tokens print.css leans on, so the screen palette can change without ever reaching paper (§3.4). ========================================================================== */ @media print { :root, html[data-theme="dark"] { --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #FAFAF9; --surface-3: #F2F2F0; --row-hover: #FFFFFF; --line: #C8CFCA; --line-soft: #DFE3E0; --control-line: #8E958F; --text: #14181B; --text-2: #3D4642; --text-3: #55605A; --shadow: none; --shadow-sm: none; --shadow-lg: none; } } /* ========================================================================== Reduced transparency — the accessibility counterpart to the @supports fallback. A fifth of users never see the blur; a further group asks not to. Both get an opaque design rather than a broken one (§3.2). ========================================================================== */ @media (prefers-reduced-transparency: reduce) { :root, html[data-theme="dark"] { --glass-panel: var(--glass-solid); --glass-bar: var(--glass-solid); --side-bg: var(--side-solid); --blur: 0px; --blur-strong: 0px; } }