/* Brief design tokens: the single source for colour, type, radius and elevation. Guide: docs/DESIGN.md ("Step 6 design system" > Token layers). Components in styles.css and base.css read only these variables; no component may hard-code a colour (rule zero, enforced by tests/unit/tokens.test.js). Three layers (868mjj58u, PRD 0.7 R1, 19 Oct 2026): 1. CORE fixed for every tenant: surfaces, ink, lines, solid, status, kind tints, photo, shadows, type, radius, spacing, layout. 2. TENANT overridable per workspace: accent, accent-ink, accent-tint, wash-a, wash-b, brand-a, brand-b (and the brand mark image). Defaults are Brief's own. 3. USER theme (light, dark, follow device) and, in strings.js, locale. Picks values, never adds colours. The dark set is the second value of every light-dark(LIGHT, DARK) pair: one declaration serves both a pinned Dark (data-app-theme) and a device in dark mode, so the two can never drift. Until R1 sign-off the step 6 values (rebuilt dark ladder) apply only with the new shell switch on (html[data-shell="new"]); with it off the app is v3 exactly. 868mjj596 folds them into the base layers and retires the v3 values. A tenant override is a block :root[data-shell="new"][data-tenant=""] placed at the end of this file, setting only TENANT tokens, light and dark. It must pass the guard rails in public/contrast.js (BriefContrast.checkTenant) in both themes, or it is refused with the reason in words. None ships yet; the CI test runs the rails on Brief's own defaults. */ /* ======================= 3. USER: theme ======================= */ :root{ color-scheme:light dark } :root[data-app-theme="light"]{ color-scheme:light } :root[data-app-theme="dark"]{ color-scheme:dark } /* Newsreader 500 thins on dark grounds: 600 in dark, whichever way dark was chosen. */ :root[data-app-theme="dark"]{ --w-head:600 } @media (prefers-color-scheme:dark){ :root:not([data-app-theme="light"]){ --w-head:600 } } /* ======================= 1. CORE (v3 values, every page) ======================= */ :root{ /* Surfaces */ --bg: light-dark(#F7F7F8, #0E0E10); /* page */ --side: light-dark(#F1F1F3, #141416); /* sidebar and rail */ --surface: light-dark(#FFFFFF, #1B1B1E); /* cards, groups, fields */ --raised: light-dark(#FFFFFF, #2E2E35); /* sheets, popovers, toasts: one step above surface */ --fill: light-dark(#F0F0F2, #26262A); /* grey chips, hovers */ --fill-2: light-dark(#E6E6E9, #313136); /* pressed / selected nav */ /* Ink */ --ink: light-dark(#141416, #F2F2F4); /* titles, body */ --ink-2: light-dark(#55555C, #B9B9C0); /* summaries, secondary */ --muted: light-dark(#6B6B73, #86868E); /* meta, ages, labels */ /* Lines */ --line: light-dark(#E4E4E8, #2B2B30); /* rules, borders */ --hair: light-dark(#EDEDF0, #252529); /* card edge, row dividers */ --ctl: light-dark(#C9C9D0, #6A6A75); /* control borders, 3:1 on surface */ /* Solid (black pill): core, so a tenant never colours the primary pill */ --solid: light-dark(#1D1D20, #F2F2F4); --solid-ink: light-dark(#FFFFFF, #111113); /* Signal */ --amber: light-dark(#A15C00, #E6A552); /* ageing, forced carry */ --red: light-dark(#C0342A, #F07F70); /* late, errors */ --red-tint: light-dark(#FCEDEB, #33201D); --green: light-dark(#1B7F52, #58C996); /* done, ok */ --green-tint: light-dark(#E7F5EE, #15291F); --goal-fill: light-dark(#E6EEF7, #1C2A3B); /* the small "Goal 1" label */ --goal-ink: light-dark(#1F3F63, #A9C7EA); --goal-on: light-dark(#FFFFFF, #0F0F12); --mail: light-dark(#1F6FB2, #7DB7EA); /* email cards: envelope, left edge */ --mail-tint: light-dark(#E6F0F9, #15222E); --amber-tint: light-dark(#FBF1E3, #2E2416); /* "Soon" tag (6 Oct) */ --report: light-dark(#0D7377, #5CC8CF); /* report flags: marker on rows (868me7h93) */ --report-tint: light-dark(#E2F3F3, #13292A); /* Kind tints, step 6 (category fills, never an accent) */ --k-meet: light-dark(#F0F0F2, #38383F); /* meeting, call (neutral) */ --k-meet-ink: light-dark(#45454C, #D3D3DA); --k-trv: light-dark(#E4EDF5, #1D2B38); /* travel (blue-grey) */ --k-trv-ink: light-dark(#235078, #A3C8E8); --k-life: light-dark(#F7E8D7, #35281B); /* life events (warm sand) */ --k-life-ink: light-dark(#7A4300, #EBBD8A); --k-home: light-dark(#E4EFE7, #1C2C22); /* home (sage) */ --k-home-ink: light-dark(#245C3B, #98D2AC); --photo: light-dark(#DDE5EC, #2A3540); /* photo placeholder ground */ --photo-fig: light-dark(#93A6B6, #6F8496); /* placeholder silhouette, decorative */ /* Overlay behind the open rail on narrower screens */ --scrim: light-dark(rgba(20,20,22,.18), rgba(0,0,0,.5)); /* Moved out of styles.css as tokens, same values in both themes as before (868mjj596, rule zero) */ --sheet-scrim: rgba(0,0,0,.32); /* behind an open sheet */ --edit-wash: rgba(0,0,0,.04); /* an editable name on hover */ --hover: rgba(127,127,127,.06); /* a Settings row on hover */ --badge-ink: #FFFFFF; /* text on the red count badge */ --mask: #000; /* mask alpha for the brand ring, not a colour */ --shadow-sheet: 0 20px 60px rgba(0,0,0,.25); /* Elevation */ --shadow: 0 1px 2px light-dark(rgba(22,22,40,.04), rgba(0,0,0,.4)), 0 10px 30px light-dark(rgba(22,22,40,.06), rgba(0,0,0,0)); --shadow-pop: 0 18px 48px light-dark(rgba(22,22,40,.16), rgba(0,0,0,.55)), 0 2px 6px light-dark(rgba(22,22,40,.06), rgba(0,0,0,0)); /* Type: Figtree 400 / 500 / 600 / 700 / 800 */ --font: "Figtree", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; --t-display: 36px; /* h1 week and Today title (32px under 420px) */ --t-h1-sm: 32px; --t-stat: 30px; /* ledger numbers */ --t-detail: 28px; /* detail title (24px under 1080px) */ --t-ws: 24px; /* workstream header */ --t-h2: 20px; /* proposal change line */ --t-card: 18px; /* card title (17px under 420px), brand mark */ --t-h3: 17px; /* section header */ --t-lead: 16px; /* nav, list rows, inputs */ --t-body: 15px; /* body, summaries */ --t-small: 14px; /* because line, chips, toasts */ --t-meta: 13px; /* ages, meta, uppercase labels */ --t-caption: 12px; --t-micro: 11px; /* uppercase tags */ /* Newsreader headings, step 6: display 34 (30 under 420), detail 28, h2 22; weight --w-head */ --font-head: "Newsreader", Georgia, "Times New Roman", serif; --t-head-display: 34px; --t-head-detail: 28px; --t-head-h2: 22px; --w-head: 500; /* Radius */ --r-card: 26px; /* cards, proposals, sign-in card */ --r-group: 22px; /* grouped lists, tiles, popovers */ --r-input: 18px; /* editable lines, banners */ --r-field: 16px; /* form fields, day tiles, results */ --r-row: 14px; /* nav items, popover rows */ --r-small: 12px; /* ••• button, date input */ --r-pill: 999px; /* chips, dock, segmented control */ /* Layout */ --gutter: 16px; /* phone side gutter */ --fold-gap: 24px; /* gap across the Fold hinge */ --touch: 44px; /* minimum tap target */ --rail-w: 72px; /* closed icon rail, 600px and up */ --rail-open: 248px; /* open rail */ /* Layout, step 6 (868mjj58v; new shell only until R1 sign-off). Breakpoints are 600 and 840: under 600 drawer and one pane; 600 to 839 fixed rail plus one pane; 840 and up two panes. Rail and list grow with the screen: open foldable 80 / 392, iPad 88 / 420, desktop 96 / 460. */ --rail-fixed: 80px; /* fixed labelled rail */ --list-w: 392px; /* list pane beside a detail */ --col-detail: 620px; /* detail text column cap: wider screens add margin, not content */ --drawer-w: 300px; /* phone drawer */ } @media (max-width:419px){ :root{ --t-head-display:30px } } @media (min-width:1100px){ :root{ --rail-fixed:88px; --list-w:420px } } @media (min-width:1340px){ :root{ --rail-fixed:96px; --list-w:460px } } /* ======================= 2. TENANT defaults (Brief, v3 values) ======================= */ :root{ --accent: light-dark(#5A2DF4, #A08BFF); /* the one accent: interaction only */ --accent-ink: light-dark(#FFFFFF, #120B2A); /* text on an accent fill */ --accent-tint: light-dark(#F0EBFE, #231D3D); /* selected row, current tab */ --wash-a: light-dark(#FBE2D2, #2B1D16); /* peach wash, top left */ --wash-b: light-dark(#D9E9F4, #14212B); /* blue wash, top right */ --brand-a: #F5A36B; /* brand mark ring, with --accent */ --brand-b: #EE6F8E; } /* ======================= Step 6 set, new shell only until R1 sign-off ======================= */ /* 1. CORE, step 6 (signed off 18 Oct 2026). Depth in dark comes from lightness (bg, side, surface, raised), not shadow: --shadow is none in dark and --shadow-pop gains a 1px white edge at 6%. Light values are v3's except amber-tint, scrim and the shadows. */ :root[data-shell="new"]{ --bg: light-dark(#F7F7F8, #0F0F12); --side: light-dark(#F1F1F3, #18181C); --surface: light-dark(#FFFFFF, #222227); --fill: light-dark(#F0F0F2, #38383F); --fill-2: light-dark(#E6E6E9, #45454E); --ink: light-dark(#141416, #ECECEF); --ink-2: light-dark(#55555C, #BDBDC5); --muted: light-dark(#6B6B73, #A0A0AA); --line: light-dark(#E4E4E8, #55555F); --hair: light-dark(#EDEDF0, #3A3A42); --solid: light-dark(#1D1D20, #ECECEF); --solid-ink: light-dark(#FFFFFF, #141416); --amber: light-dark(#A15C00, #E9AB5C); --amber-tint: light-dark(#FBEEDC, #3A2C17); --red: light-dark(#C0342A, #F38A7C); --red-tint: light-dark(#FCEDEB, #3A2320); --green: light-dark(#1B7F52, #5FCF9C); --green-tint: light-dark(#E7F5EE, #18302A); --goal-fill: light-dark(#E6EEF7, #24344A); --goal-ink: light-dark(#1F3F63, #B4D0F0); --goal-on: light-dark(#FFFFFF, #18181C); --scrim: light-dark(rgba(20,20,22,.32), rgba(0,0,0,.6)); --shadow: 0 1px 2px light-dark(rgba(20,20,22,.04), transparent), 0 4px 14px light-dark(rgba(20,20,22,.04), transparent); --shadow-pop: 0 0 0 1px light-dark(transparent, rgba(255,255,255,.06)), 0 12px 36px light-dark(rgba(20,20,22,.14), rgba(0,0,0,.5)), 0 2px 6px light-dark(rgba(20,20,22,.06), transparent); } /* 2. TENANT defaults, step 6 (Brief). A tenant override goes below, as :root[data-shell="new"][data-tenant=""]{ ... }, which outranks this block. */ :root[data-shell="new"]{ --accent: light-dark(#5A2DF4, #A996FF); --accent-ink: light-dark(#FFFFFF, #140D30); --accent-tint: light-dark(#F0EBFE, #2F2850); --wash-a: light-dark(#FBE2D2, #2A1E17); --wash-b: light-dark(#D9E9F4, #16222C); --brand-a: #F5A36B; --brand-b: #EE6F8E; }