/* =================================================================== NORTHLIGHT FOUNDATION The approved design system, expressed as production tokens. This file is ADDITIVE. It defines the --bf-* namespace and a set of .bf-* primitives, and it deliberately does NOT re-point any legacy token (--ink, --blue, --success, --space-4 ...). Nothing on the live site changes when this file loads. A screen moves onto Northlight by switching that screen's own CSS onto --bf-*, one bounded PR at a time, deleting the screen's old CSS in the same PR. Load order: fonts -> bekefit -> northlight -> system -> app. Colour grammar (non-negotiable, enforced by review): GOLD (--bf-now) where you are NOW: a restrained mark (edge, node, chip, ring) on a light surface. Never a button, never a gold-filled card. (Owner, 22 Sep 2026) MINT (--bf-done) completed, achieved, positive. CORAL (--bf-attention) genuine attention: safety, billing. Coach-side. BLUE (--bf-blue-600) primary interaction. Every CTA is blue. NAVY (--bf-navy-*) structure, depth, and where you are GOING: the destination is the one navy object on a screen. The one documented exception is the marketing headline gold underline. =================================================================== */ :root{ /* ---- deep surfaces: coach console, marketing ---- */ --bf-navy-950:#070c16; --bf-navy-900:#0b1120; --bf-navy-800:#111a2e; --bf-navy-700:#16203a; --bf-navy-600:#1d2a48; --bf-edge-deep:#22304f; --bf-edge-deep-soft:rgba(255,255,255,.07); /* ---- light surfaces: client app, forms, reading ---- */ --bf-paper-0:#ffffff; --bf-paper-50:#f6f8fc; --bf-paper-100:#edf2fa; --bf-paper-200:#e0e8f5; --bf-edge-light:#d7e0ef; /* ---- text ---- */ --bf-on-deep-1:#f0f4fd; --bf-on-deep-2:#9fb0cc; --bf-on-light-1:#0e1524; --bf-on-light-2:#4c5b75; /* The tertiary inks are DARKER than the system was first drawn with: #7c8aa3 is 3.10:1 on --bf-paper-100 and #63779b is 3.57:1 on --bf-navy-700, and both of them carry real copy at 10 to 13px -- a struck-through standard price, the "example" disclaimers that are what make a product screenshot honest, the "optional" on a form label. A colour that fails AA on body text is not a quiet colour, it is an unreadable one. These clear 4.5:1 on every surface that CARRIES text, and stay clearly quieter than the -2 inks above them: --bf-on-light-3 5.09:1 on paper-0, 4.79 on paper-50, 4.53 on paper-100 --bf-on-deep-3 5.47:1 on navy-950, 5.26 on navy-900, 4.85 on navy-800, 4.51 on navy-700 Two surfaces are NOT in that list and must not be given -3 text: --bf-paper-200 (4.13:1) and --bf-navy-600 (3.97:1). They are edges and fills in this system, not backgrounds for small copy; put -2 on them. */ --bf-on-light-3:#606f88; --bf-on-deep-3:#7488ad; /* ---- brand ---- */ --bf-blue-700:#1b4fd8; --bf-blue-600:#2d68fa; --bf-blue-300:#8db2ff; --bf-blue-50:#e8efff; /* ---- semantic state ---- Each state carries three values: the colour itself, an ink variant that stays legible as text on paper, and a wash for backgrounds. */ --bf-done:#34d9a6; --bf-done-ink:#0d6b51; --bf-done-bg:#e6faf3; --bf-now:#ffc928; --bf-now-ink:#6b5200; /* THE INK THAT SITS ON THE COLOUR ITSELF, WHICH DOES NOT MOVE. --bf-now-ink and --bf-done-ink are gold and mint written on a NEUTRAL ground, so they flip with the theme. These two are written ON the gold and ON the mint, and gold and mint mean the same thing in either theme, so the ink on them cannot flip: in the dark theme the number inside the gold "now" node came out light gold on gold, and the check inside the mint one has always been white on mint at 1.9:1. Stated once, for both themes, because the ground they sit on is stated once. */ --bf-on-now:#4a3800; --bf-on-done:#06422f; --bf-now-bg:#fff6dd; --bf-now-line:#f0dca8; --bf-planned:#3a4a6b; --bf-planned-light:#c3cfe2; --bf-planned-bg:#f1f5fb; /* CORAL IS A NON-TEXT MARK, AND IT IS THE SAME COLOUR IN BOTH THEMES. Like gold and mint, coral MEANS something -- genuine attention -- so it does not move when the theme does, and it is therefore the one colour that has to survive being drawn on a white card AND on a near-black one. It is never text: --bf-attention-ink is, and that one does turn over. It was #f2704f, mixed when every surface it touched was deep. The day the console went light in THEME-2 it kept being drawn on paper, where the measurements are 2.84:1 for the Overview urgency stripe on the panel and 2.74:1 for the Client Person danger border against the page behind the card. Both are under the 3:1 that a non-text mark has to clear, and both had nothing watching them. This is 9.5% darker in HSL lightness at the same hue and saturation, so it is the same coral and a little stronger. The number that decides it is the WORST end of the panel, not the panel: --panel-bg is a gradient from #fbfcff to #f3f6fc, the stripe runs the full height of a row, and a reader sees both ends of it. On that end it is 3.14:1; on the lighter end 3.31:1; 3.40:1 on a white card; 3.19:1 on the page behind the person card. On the deep grounds it also lands on -- the marketing form field, and the same two coach-side objects in the dark theme -- 4.75 to 5.10:1. `the coral mark clears the bar on every ground it is drawn on` in theme.spec.mjs measures all seven, against the worst stop. */ --bf-attention:#f05933; --bf-attention-ink:#a8381c; --bf-attention-bg:#fdece7; /* THE SOLID FORM OF THE SAME MEANING. A wash with ink on it is how attention marks a chip or a row. The safety card is not a chip: it fills itself, and a filled card needs both halves of a pair mixed for each other rather than a ground borrowed from the error family, which is where it had been sitting -- --danger-solid, a pure red at hue 0, under a comment saying safety "is not alarming, it is a different conversation". This is the SAME HUE as --bf-attention, 12 degrees, darkened until white clears AA on it: coral with the lights turned down, not red. Two values were drawn and looked at rather than computed and accepted. The deeper one, #98361d, measured better -- 7.29:1 for the ink -- and on a phone it read as brick: closer to the error red it was leaving than to the coral it was joining, which is the one thing the change exists to prevent. This is the brighter of the two, and it is 1.65:1 against #8E1B1B, which is to say nobody will mistake one for the other. The eyebrow buys that brightness. It is drawn at 88% of the ink rather than 76%, because the 76% composite is what pins the ground dark, and at 11.5px uppercase against a 26px heading the hierarchy is carried by size and weight, not by four percent of alpha. */ --bf-attention-solid:#bf3a18; --bf-attention-on-solid:#ffffff; /* UNKNOWN is its own state, not a quieter MISSED and not an absence. A session nobody confirmed stays in the denominator; it is drawn hatched so it reads as "we do not know yet", never as a failure. */ --bf-unknown:#8ea0bd; --bf-unknown-ink:#4c5b75; --bf-unknown-bg:#f4f7fc; /* ---- data series: five, in this order, no sixth ---- */ --bf-s1:#2d68fa; --bf-s2:#34d9a6; --bf-s3:#ffc928; --bf-s4:#57c7e8; --bf-s5:#9b8cff; /* ---- gradients ---- */ --bf-grad-route:linear-gradient(90deg,#34d9a6,#2d68fa); --bf-grad-deep:radial-gradient(120% 90% at 80% -10%,rgba(45,104,250,.28),transparent 62%),linear-gradient(180deg,#0b1120,#0e1728); --bf-grad-now:linear-gradient(145deg,#ffc928,#f0a800); --bf-grad-blue:linear-gradient(145deg,#2d68fa,#1b4fd8); /* ---- hatch: the visual signature of "unknown" ---- */ --bf-hatch-unknown:repeating-linear-gradient(135deg,var(--bf-planned-light) 0 2px,transparent 2px 6px); /* ---- surface families ---- Two worlds. Deep is the coach console and marketing. Light is the client app. A component picks its family once, via .bf-deep/.bf-light, and then reads only these aliases. */ --bf-surface:var(--bf-paper-0); --bf-surface-raised:var(--bf-paper-0); --bf-surface-sunk:var(--bf-paper-50); --bf-surface-quiet:var(--bf-paper-100); --bf-border:var(--bf-edge-light); --bf-fg-1:var(--bf-on-light-1); --bf-fg-2:var(--bf-on-light-2); --bf-fg-3:var(--bf-on-light-3); --bf-focus:var(--bf-blue-600); /* Every family alias is mirrored here, this one included, so a component dropped outside a .bf-light/.bf-deep wrapper degrades to the light family instead of computing to nothing and shipping a card with no shadow. */ --bf-e-card:var(--bf-e2-light); /* ---- typography ---- */ --bf-font-display:"Bricolage Grotesque","Manrope",system-ui,sans-serif; --bf-font-sans:"Manrope","Heebo",system-ui,-apple-system,"Segoe UI",sans-serif; --bf-font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; --bf-t-display:clamp(34px,6vw,60px); --bf-t-h1:clamp(26px,3.6vw,38px); --bf-t-h2:clamp(21px,2.4vw,27px); --bf-t-h3:19px; --bf-t-h4:16px; --bf-t-body:15px; --bf-t-sm:13px; --bf-t-xs:12px; --bf-t-micro:11px; --bf-lh-tight:1.1; --bf-lh-snug:1.32; --bf-lh-body:1.55; --bf-lh-reading:1.62; --bf-ls-display:-.04em; --bf-ls-head:-.025em; --bf-ls-caps:.08em; --bf-w-regular:400; --bf-w-medium:500; --bf-w-semi:600; --bf-w-bold:700; /* 800 belongs to the SANS face, which ships variable 400-800 in both Manrope and Heebo. The display face ships at 700 only, so --bf-font-display and --bf-w-black must never meet: Latin would get a synthesised faux-bold off the 700 master while Hebrew, falling back to Heebo, got a real 800, and the two scripts would part company in the one place they must not. */ --bf-w-black:800; /* ---- space: 4pt ---- */ --bf-sp-1:4px; --bf-sp-2:8px; --bf-sp-3:12px; --bf-sp-4:16px; --bf-sp-5:20px; --bf-sp-6:24px; --bf-sp-7:32px; --bf-sp-8:40px; --bf-sp-9:56px; --bf-sp-10:72px; /* ---- radii ---- */ --bf-r-chip:6px; --bf-r-ctl:10px; --bf-r-card:14px; --bf-r-panel:18px; --bf-r-hero:24px; --bf-r-full:999px; /* ---- elevation ---- */ --bf-e1:0 1px 2px rgba(3,7,18,.28); --bf-e2:0 2px 4px rgba(3,7,18,.2),0 14px 34px -20px rgba(3,7,18,.9); --bf-e3:0 24px 60px -24px rgba(3,7,18,.95); --bf-e1-light:0 1px 2px rgba(14,21,36,.06); --bf-e2-light:0 1px 2px rgba(14,21,36,.05),0 10px 28px -14px rgba(14,21,36,.28); --bf-e3-light:0 2px 6px rgba(14,21,36,.06),0 26px 64px -28px rgba(14,21,36,.4); --bf-glow-now:0 0 0 6px rgba(255,201,40,.16),0 0 26px rgba(255,201,40,.42); --bf-glow-blue:0 8px 20px -10px rgba(45,104,250,.9); /* ---- motion ---- */ --bf-dur-1:120ms; --bf-dur-2:200ms; --bf-dur-3:320ms; --bf-dur-4:520ms; --bf-ease-out:cubic-bezier(.2,.8,.28,1); --bf-ease-in-out:cubic-bezier(.65,0,.35,1); --bf-ease-entrance:cubic-bezier(.16,1,.3,1); /* ---- layering ---- */ --bf-z-base:0; --bf-z-raised:10; --bf-z-sticky:70; --bf-z-drawer:80; --bf-z-modal:90; --bf-z-toast:100; /* ---- ergonomics ---- */ --bf-tap:44px; --bf-measure:64ch; --bf-wrap:1160px; --bf-gutter:20px; } /* =================================================================== THE TWO THEMES =================================================================== Northlight began with two SURFACE FAMILIES: light for the client app, deep for the coach console and marketing. A component picked a family and kept it. That is why the owner opened the Overview and saw a light page with an enormous navy queue sitting in the middle of it: two families on one screen, which reads as two themes colliding. A family is not a theme. These are the themes: LIGHT the whole product reads as one light product DARK the whole product reads as one dark product and the same component is light in one and deep in the other. The families above stay exactly as they are -- they are the palette these themes are mixed from. WHAT DOES NOT CHANGE WITH THE THEME. The colour grammar at the top of this file is meaning, not decoration, and it survives both: GOLD is where you are NOW, in either theme MINT is completed CORAL is genuine attention BLUE is interaction; every CTA is blue in either theme Only the GROUND under them moves. NAVY stops meaning "paint this object dark whatever the page is" and goes back to meaning structure and depth, which in a light theme is drawn with light. A PANEL is the thing that was going wrong: a structural block with a ground of its own inside a page -- the ranked queue, the client hero, the destination card, the quiet day. It gets its own tokens so one definition moves all of them, rather than each remembering a navy. =================================================================== */ :root{ color-scheme:light; /* A light panel is not a white card: it is a canvas, one step off the page, with a hairline and the faintest blue in it so the eye reads it as one block rather than as the page showing through. */ --panel-bg:linear-gradient(180deg,#fbfcff,#f3f6fc); --panel-edge:var(--bf-edge-light); --panel-edge-soft:rgba(14,21,36,.07); --panel-shadow:var(--bf-e2-light); --panel-fg-1:var(--bf-on-light-1); --panel-fg-2:var(--bf-on-light-2); --panel-fg-3:var(--bf-on-light-3); /* A chip ON a panel. White at 7% is invisible on a light ground, which is what the first draft of this shipped. */ --panel-chip-bg:rgba(14,21,36,.045); --panel-chip-strong-bg:rgba(14,21,36,.075); --panel-chip-line:var(--bf-edge-light); --panel-chip-strong-line:var(--bf-on-light-3); /* blue-600 was right when a light-theme panel was NAVY. This branch made the light panel a pale canvas, and blue-600 on its darker stop is 4.34:1 -- the mirror of the defect --link exists for, created by the same change. A link on a panel is read, so it takes the deeper blue; the ring beside it is not text and keeps blue-600. */ --panel-link:var(--bf-blue-700); --panel-ring:var(--bf-blue-600); --panel-btn-o-bg:rgba(14,21,36,.02); --panel-btn-o-line:var(--bf-edge-light); /* ---- state ---------------------------------------------------------- Every one of these replaces a hex that was typed into app.css or, worse, into a JS string. A state has one colour and one ground, everywhere -- which is why they live in the token sheet every shell loads rather than in a component sheet only two of them load. */ --success: #0B6B4F; --success-bg: #E7F6F0; --success-line: #BFE4D6; --warning: #8A6200; --warning-bg: #FFF6E0; --warning-line: #F0DCA8; --danger: #A32020; --danger-bg: #FDECEC; --danger-line: #F3C9C9; --info: var(--blue-lo); --info-bg: var(--blue-tint); --info-line: #C9D6E8; --neutral: #5B6A82; --neutral-bg: #EEF2F7; --neutral-line: #DDE5EF; --accent: #5B3FA8; --accent-bg: #EDE7FA; /* Safety is the one card painted as a SOLID state rather than a wash, so it needs a ground and an ink of its own: --danger is an INK token, and a card that fills itself with an ink token has no colour left to write with. */ --danger-solid:#8E1B1B; --danger-on-solid:#FFFFFF; /* BLUE IS INTERACTION, AND INTERACTION IS ALSO WRITTEN DOWN. Every CTA is a blue FILL with white on it, and that survives a theme unchanged. Blue as INK does not: the brand blues are mixed for white paper, and --blue-lo on a dark card is 2.6:1 -- the price on the checkout page, the sign-in alternative, thirteen controls on a person's page. A link colour is its own token so it can be re-mixed for the ground it is read on, exactly like --panel-link already is inside a panel. */ --link: var(--blue-lo); --link-hover: var(--blue); /* ---- the shell -------------------------------------------------------- THE BAR IS NOT A DECORATION, IT IS THE LARGEST OBJECT ON THE SCREEN. The app bar, the row of tabs under it and the client app's bottom navigation were painted with --surface-ink and white, which is to say NAVY WHATEVER THE THEME -- a plank of the other theme across the top of every light page, and the same defect as the navy queue, just outside the element the audit happened to start from. Navy goes back to meaning structure: in a dark theme the bar is the deep composition it always was, and in a light theme structure is drawn with light. */ --bar-bg: var(--bf-paper-0, #ffffff); --bar-line: var(--bf-edge-light); --bar-fg-1: var(--bf-on-light-1); --bar-fg-2: var(--bf-on-light-2); --bar-hover-bg: rgba(14,21,36,.05); --bar-btn-bg: rgba(14,21,36,.04); --bar-btn-hover: rgba(14,21,36,.09); /* The tab you are on is a CONTROL, so it is blue -- gold marks the present and is never something you press. */ --bar-on-bg: var(--blue-tint); --bar-on-fg: var(--link); --bar-on-line: var(--blue); /* Gold is the ring on a near-black bar because blue disappears into it. On a white bar gold is the thing that disappears. */ --bar-ring: var(--blue); /* The wordmark's second half. --blue-hi is a light blue mixed to be read on the marketing site's navy; on a white bar it is 2.2:1 and the brand's own name half disappears. */ --bar-accent: var(--link); /* The thing you have PICKED, in a row of things you could pick: a pill that inverts the page. In the light theme that is ink with white on it, which is what it always was. */ --pick-bg: var(--ink); --pick-fg: var(--on-ink); --pick-line: var(--ink); /* ---- the destination ------------------------------------------------- THE ONE OBJECT THIS FILE CALLED "THE ONE NAVY OBJECT ON A SCREEN". It is the singular thing on the journey -- where this is going -- and it earns being drawn differently from every card around it. What it did not earn is being NAVY on a light page, which is the sentence this whole programme exists to stop: navy means structure and depth, and in a light theme structure is drawn with light. So it keeps its singularity and changes its ground: a lit canvas here, the deep composition in the dark theme, where that IS the coherent thing. */ --dest-bg: radial-gradient(120% 120% at 100% 0%, rgba(45,104,250,.16), transparent 58%), linear-gradient(160deg, #eef3ff, #e3ebff); --dest-fg-1: var(--bf-on-light-1); --dest-fg-2: var(--bf-on-light-2); /* NOT --bf-on-light-3: this file's own note lists the grounds its -3 inks clear, and the destination's is not one of them -- #606f88 on it is 4.28:1. Nothing takes -3 here but an icon today, and an icon takes 3:1; one future caption in it would ship an AA failure. */ --dest-fg-3: #4f5d75; --dest-line: rgba(14,21,36,.10); --dest-accent: var(--bf-blue-700); --dest-shadow: 0 1px 2px rgba(14,21,36,.08), 0 22px 44px -30px rgba(27,79,216,.45); /* The pin on the rail sits on the destination's ground, so its collar is that ground rather than a fixed navy. */ --dest-pin-collar: #e8eeff; /* ---- the marketing surface ------------------------------------------ THE PUBLIC SITE, WHICH WAS PINNED TO LIGHT SINCE THE FIRST STAGE. home.css is written in the LIGHT FAMILY directly -- paper-0 for a card, on-light-2 for its small print, edge-light for its hairline -- so a dark page there was a checkerboard of white cards on navy bands, and the honest answer at the time was to pin it and say so. These are the same surfaces named by what they ARE rather than which family they came from, and the pin comes off with them. The page's BANDS are a different thing from a card on one. The homepage alternates paper, mist, two tints and two inks so that two light product sections in a row still read as two different places -- that rhythm is the design, not a theme leak, and it survives into the dark theme as an alternation of darks. */ --mk-card: var(--bf-paper-0); --mk-card-2: var(--bf-paper-50); --mk-card-3: var(--bf-paper-100); --mk-line-2: var(--bf-paper-200); --mk-edge: var(--bf-edge-light); --mk-fg-1: var(--bf-on-light-1); --mk-fg-2: var(--bf-on-light-2); --mk-fg-3: var(--bf-on-light-3); --mk-band-paper: var(--bf-paper-0); --mk-band-mist: var(--bf-paper-50); --mk-band-tint-blue: linear-gradient(180deg,#edf2fc,#f4f7fd); --mk-band-tint-mint: linear-gradient(180deg,#eef9f5,#f5fbf9); --mk-band-ink: var(--bf-navy-900); --mk-band-ink-2: var(--bf-navy-950); --mk-band-fg: var(--bf-on-light-1); /* Blue as INK on a marketing card, and the pale-blue accent the "who does what" step uses. blue-600 is mixed for white paper: on a raised card in the dark theme it is 3.7:1, under AA for the link text this page sets in it five times, and blue-50 is a light island wherever it lands. */ --mk-link: var(--bf-blue-700); --mk-accent-bg: var(--bf-blue-50); --mk-accent-fg: var(--bf-blue-700); /* ---- the semantic layer, from system.css ------------------------------ What a colour MEANS rather than what it is. It lived in system.css until a component sheet owning a token turned out to mean half the shells did not have it. */ /* ---- surfaces ------------------------------------------------------- */ --surface: var(--paper); /* a card */ --surface-sunk: var(--mist); /* the page behind the cards */ --surface-raised: #FBFCFE; /* a card on a card */ --surface-ink: var(--ink); /* the dark bar */ /* A quiet ground one step off the page, for an emphasis block that is not a theme of its own. */ --surface-quiet: var(--bf-surface-quiet); /* ---- borders -------------------------------------------------------- */ --border: var(--line); --border-strong: #CFDAE8; --border-ink: var(--line-ink); /* ---- state ---------------------------------------------------------- */ /* The state tokens moved to northlight.css, which is the token sheet and is loaded by every shell. They were here, and checkout -- which loads app.css but not this file -- therefore painted .notice.bad with no ground at all. A token that a component sheet owns is a token half the product cannot see. */ /* ---- spacing -------------------------------------------------------- */ /* One scale. --sp in bekefit.css is a marketing section rhythm and is not this; it is left alone. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ---- radii ---------------------------------------------------------- */ --radius-sm: 10px; --radius-md: var(--r); --radius-lg: var(--r-lg); --radius-pill: 999px; /* ---- elevation ------------------------------------------------------ */ --elev-1: var(--shadow); --elev-2: var(--shadow-lg); /* ---- interaction ---------------------------------------------------- */ /* 44px is the floor for anything a thumb has to hit. It is a token so it cannot drift back to 34px one button at a time. */ --tap: 44px; --focus: var(--blue); --focus-on-ink: var(--gold); /* blue-on-ink is invisible; gold is not */ } :root[data-theme="dark"]{ color-scheme:dark; /* And here the panel is the deep composition the console already had, unchanged, because in a dark theme that IS the coherent thing. */ --panel-bg:var(--bf-grad-deep); --panel-edge:var(--bf-edge-deep); --panel-edge-soft:var(--bf-edge-deep-soft); --panel-shadow:var(--bf-e2); --panel-fg-1:var(--bf-on-deep-1); --panel-fg-2:var(--bf-on-deep-2); --panel-fg-3:var(--bf-on-deep-3); --panel-chip-bg:rgba(255,255,255,.07); --panel-chip-strong-bg:rgba(255,255,255,.12); --panel-chip-line:var(--bf-edge-deep); --panel-chip-strong-line:rgba(255,255,255,.28); --panel-link:var(--bf-blue-300); --panel-ring:var(--bf-blue-300); --panel-btn-o-bg:rgba(255,255,255,.04); --panel-btn-o-line:var(--bf-on-deep-3); /* Each state keeps its MEANING and is mixed again for the ground it now sits on: a wash that reads as "gently green" on white reads as a light leak on a dark page. The ink gets lighter as the ground gets darker, because contrast is the thing being preserved, not the hex. */ --success:#5fe3b6; --success-bg:#0e2b23; --success-line:#1e4e40; --warning:#f5c65a; --warning-bg:#2e2410; --warning-line:#584214; --danger:#ff8f8f; --danger-bg:#331519; --danger-line:#5d2429; --info:var(--bf-blue-300); --info-line:#2b3f73; --neutral:#9fb0cc; --neutral-bg:#16203a; --neutral-line:#2c3c60; --accent:#c6b4ff; --accent-bg:#221a3d; /* Deep enough to be a dark-theme surface, red enough to still be the different conversation. --danger itself is light here and would be a flare on the page. */ --danger-solid:#5c1417; --danger-on-solid:#ffe9e9; --link: var(--bf-blue-300); --link-hover: #b9d0ff; /* The bar in the dark theme is exactly the composition the console always had. Nothing here is new; it is the same values, now said once. */ --bar-bg: var(--surface-ink); --bar-line: var(--border-ink); --bar-fg-1: var(--on-ink); --bar-fg-2: var(--on-ink-2); --bar-hover-bg: rgba(255,255,255,.07); --bar-btn-bg: rgba(255,255,255,.08); --bar-btn-hover: rgba(255,255,255,.16); /* #2F6BFF was replaced by --blue #2D68FA when the old one missed AA by a rounding; this wash still carried it. Mixed from the token now, so it cannot fall behind again. */ --bar-on-bg: color-mix(in srgb, var(--blue) 20%, transparent); --bar-on-fg: #ffffff; --bar-on-line: var(--bf-blue-300); --bar-ring: var(--gold); --bar-accent: var(--blue-hi); /* And in the dark theme it inverts the other way. --ink here is a shade DARKER than the page, so the pill that says which section you are in measured 1.03:1 against the page behind it: the shape disappeared and only the text got brighter. */ --pick-bg: var(--on-ink); --pick-fg: var(--ink); --pick-line: var(--on-ink); /* Unchanged: this is the composition the journey always had, and in a dark theme it is the coherent one. */ --dest-bg: radial-gradient(120% 120% at 100% 0%, rgba(45,104,250,.30), transparent 58%), linear-gradient(160deg, var(--bf-navy-700), var(--bf-navy-900)); --dest-fg-1: var(--bf-on-deep-1); --dest-fg-2: var(--bf-on-deep-2); --dest-fg-3: var(--bf-on-deep-3); --dest-line: rgba(255,255,255,.1); --dest-accent: var(--bf-blue-300); --dest-shadow: 0 1px 2px rgba(14,21,36,.12), 0 22px 44px -26px rgba(11,17,32,.75); --dest-pin-collar: var(--bf-navy-800); /* The marketing surface in the dark theme. The rhythm is kept and the polarity turns over: the bands that were the lightest are now the deepest, the two INK bands become the two raised ones, and a card on any of them is lighter still so it is a card rather than a hole. The inks are mixed for the cards they sit on rather than borrowed from the deep family, because --bf-on-deep-3 is 3.80:1 on a raised card here, which is under AA for the small print this page uses it for seventeen times. */ --mk-card: #1f2c4d; --mk-card-2: #16203a; --mk-card-3: #22304f; --mk-line-2: #2c3c60; --mk-edge: #2c3c60; --mk-fg-1: #f0f4fd; --mk-fg-2: #c2cfe4; --mk-fg-3: #93a6c6; --mk-band-paper: #0b1120; --mk-band-mist: #070c16; --mk-band-tint-blue: linear-gradient(180deg,#0c1632,#0a1020); --mk-band-tint-mint: linear-gradient(180deg,#08201c,#091420); --mk-band-ink: #111a2e; --mk-band-ink-2: #16203a; --mk-band-fg: var(--bf-on-deep-1); --mk-link: var(--bf-blue-300); --mk-accent-bg: #15224a; --mk-accent-fg: var(--bf-blue-300); /* The semantic tokens above that are var() of a primitive follow the theme on their own -- bekefit.css turned those over. These three are literals, which cannot: a raised card, a strong border, and the ring on a dark bar. */ --surface-raised:#16203a; --border-strong:#2c3c60; --focus-on-ink:var(--gold); /* * THE STATE WASHES, MIXED AGAIN. * * Every -bg above is a tint of white paper, which is the right answer on * paper and a light leak on a dark page. The audit found a whole month * column of a journey filled with --bf-now-bg: 369 by 838 pixels of pale * gold on a dark screen, which is not "this is now", it is a hole. * * The MEANING does not move -- gold is still now, mint still completed, * coral still attention -- so the hue is the same and the ground under it * is what changes. The inks go the other way for the same reason: an ink * mixed to be dark enough for white is invisible here. */ --bf-done-ink:#5fe3b6; --bf-done-bg:#0e2b23; --bf-now-ink:#f5c65a; --bf-now-bg:#2e2410; --bf-now-line:#584214; --bf-planned:#8ea0bd; --bf-planned-light:#3a4a6b; --bf-planned-bg:#111a2e; --bf-attention-ink:#ff8f8f; --bf-attention-bg:#331519; /* The same hue again, deeper, with a warm off-white rather than pure white so a filled card on a near-black page is not a lamp. 8.26:1 for the ink and 6.77:1 for the eyebrow, and the card separates from the page better than the red one did: 1.97 against 1.41. On this screen a solid card is told apart by its edge and its rail as much as by its brightness, which is why the dark value does not simply follow the light one down. */ --bf-attention-solid:#7a2c14; --bf-attention-on-solid:#ffeae6; --bf-unknown-ink:#9fb0cc; --bf-unknown-bg:#16203a; /* The surface family aliases, re-pointed. A component that reads only these -- which is what they were written for -- becomes dark without knowing the theme exists. */ --bf-surface:var(--bf-navy-900); --bf-surface-raised:var(--bf-navy-800); --bf-surface-sunk:var(--bf-navy-950); --bf-surface-quiet:var(--bf-navy-700); --bf-border:var(--bf-edge-deep); --bf-fg-1:var(--bf-on-deep-1); --bf-fg-2:var(--bf-on-deep-2); --bf-fg-3:var(--bf-on-deep-3); --bf-focus:var(--bf-blue-300); --bf-e-card:var(--bf-e2); } /* ---------- the theme control ------------------------------------------ A sun and a moon, one of which is showing, on a 44px target. The icon alone is not the control: theme.js puts the sentence on it -- "Switch to dark theme" -- in the page's own language, and keeps aria-pressed in step, because "button, moon" is not something anybody can use. It lives on the dark bar in the console and the client app and on the light one on the public site, so it takes its colour from whatever it is sitting on rather than naming one. AND IT LIVES HERE, not in system.css, because the public site does not load system.css. The first version did, so --tap resolved to nothing on the homepage and the control collapsed to the size of its icon: a 20px target, found by the homepage's own tap-target test. */ .themetog{ display:inline-flex; align-items:center; justify-content:center; inline-size:var(--bf-tap); block-size:var(--bf-tap); flex:none; padding:0; border:1px solid transparent; border-radius:var(--bf-r-full); background:none; color:inherit; cursor:pointer; } .themetog:hover{ background:rgba(127,127,127,.16); } /* The public header is TRANSPARENT over a hero that is navy in either theme, so what it sits on is not the page: inheriting the page's ink made it a near-black moon on a near-black bar. It wears what the links beside it wear, which is the ink that bar was designed for. */ .hdr .themetog{ color:var(--bf-on-deep-2); } .hdr .themetog:hover{ color:var(--bf-on-deep-1); } .themetog svg{ inline-size:20px; block-size:20px; } /* One of the two, never both, and never a layout jump between them. */ .themetog .themetog-moon{ display:none; } :root[data-theme="dark"] .themetog .themetog-sun{ display:none; } :root[data-theme="dark"] .themetog .themetog-moon{ display:inline; } /* THE WORDMARK TAKES THE PAGE IT IS ON, NOT THE PAGE IT WAS DRAWN FOR. bekefit.css paints .logo white with a --blue-hi second half, because the only place it had ever appeared was the marketing header, which is transparent over a navy hero in either theme. The legal pages put the same wordmark on PAPER. While they were pinned to light nobody saw it; the day the pin came off, "Beke" was white on white -- zero visible pixels -- and "Fit" was 2.34:1. This is the third time a mark mixed for navy had to be told which surface it is on, after the console bar and the marketing card. */ .legal .logo{ color:var(--mk-fg-1); } .legal .logo i{ color:var(--mk-link); } /* Breakpoints are fixed values, not tokens: custom properties cannot be used inside a media query. Northlight uses exactly these three. sm max-width: 599px one column, bottom nav, thumb reach md min-width: 600px two columns, side padding grows lg min-width: 1000px console layout, rail + workspace Any new WIDTH breakpoint must reuse one of them. Feature queries -- prefers-reduced-motion, forced-colors -- are a different thing and are not bound by this. */ /* =================================================================== SURFACE FAMILIES =================================================================== */ .bf-light{ --bf-surface:var(--bf-paper-0); --bf-surface-raised:var(--bf-paper-0); --bf-surface-sunk:var(--bf-paper-50); --bf-surface-quiet:var(--bf-paper-100); --bf-border:var(--bf-edge-light); --bf-fg-1:var(--bf-on-light-1); --bf-fg-2:var(--bf-on-light-2); --bf-fg-3:var(--bf-on-light-3); --bf-focus:var(--bf-blue-600); --bf-e-card:var(--bf-e2-light); background:var(--bf-surface-sunk); color:var(--bf-fg-1); } .bf-deep{ --bf-surface:var(--bf-navy-900); --bf-surface-raised:var(--bf-navy-800); --bf-surface-sunk:var(--bf-navy-950); --bf-surface-quiet:var(--bf-navy-700); --bf-border:var(--bf-edge-deep); --bf-fg-1:var(--bf-on-deep-1); --bf-fg-2:var(--bf-on-deep-2); --bf-fg-3:var(--bf-on-deep-3); --bf-focus:var(--bf-now); --bf-e-card:var(--bf-e2); background:var(--bf-surface-sunk); color:var(--bf-fg-1); } /* =================================================================== TYPOGRAPHY PRIMITIVES =================================================================== */ .bf-display{ font-family:var(--bf-font-display); font-weight:var(--bf-w-bold); font-size:var(--bf-t-display); line-height:var(--bf-lh-tight); letter-spacing:var(--bf-ls-display); text-wrap:balance; margin:0; } .bf-h1{font-size:var(--bf-t-h1);line-height:var(--bf-lh-tight);letter-spacing:var(--bf-ls-head);font-weight:var(--bf-w-black);text-wrap:balance;margin:0} .bf-h2{font-size:var(--bf-t-h2);line-height:var(--bf-lh-snug);letter-spacing:var(--bf-ls-head);font-weight:var(--bf-w-bold);text-wrap:balance;margin:0} .bf-h3{font-size:var(--bf-t-h3);line-height:var(--bf-lh-snug);letter-spacing:var(--bf-ls-head);font-weight:var(--bf-w-bold);margin:0} .bf-h4{font-size:var(--bf-t-h4);line-height:var(--bf-lh-snug);font-weight:var(--bf-w-bold);margin:0} .bf-body{font-size:var(--bf-t-body);line-height:var(--bf-lh-body);margin:0} .bf-reading{font-size:var(--bf-t-body);line-height:var(--bf-lh-reading);max-width:var(--bf-measure);margin:0} .bf-sm{font-size:var(--bf-t-sm);line-height:var(--bf-lh-snug)} .bf-xs{font-size:var(--bf-t-xs);line-height:var(--bf-lh-snug)} .bf-micro{font-size:var(--bf-t-micro);line-height:var(--bf-lh-snug)} .bf-label{ font-size:var(--bf-t-micro); font-weight:var(--bf-w-bold); letter-spacing:var(--bf-ls-caps); text-transform:uppercase; color:var(--bf-fg-3); } .bf-quiet{color:var(--bf-fg-2)} .bf-quieter{color:var(--bf-fg-3)} .bf-mono{font-family:var(--bf-font-mono)} /* Every number that sits in a column, a target, or a ratio. */ .bf-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* Hebrew has no Bricolage. The display face falls back to Heebo at the same weight, so Hebrew headlines keep the weight and the tightness without borrowing Latin letterforms. */ [dir="rtl"], :lang(he){ --bf-font-display:"Heebo",system-ui,sans-serif; --bf-font-sans:"Heebo",system-ui,-apple-system,"Segoe UI",sans-serif; --bf-ls-display:-.02em; --bf-ls-head:-.015em; } /* =================================================================== RTL PRIMITIVES Layout mirrors. Time does not. A chronological axis — a roadmap, a week strip, a sparkline, a then/now pair — keeps its LTR direction in Hebrew, because the axis encodes earlier-to-later, not reading order. Labels inside it still read in their own script, which is what .bf-bidi buys. =================================================================== */ .bf-chrono{direction:ltr} .bf-bidi{unicode-bidi:plaintext} /* Hatching is directional too: mirror the angle so it leans the same way relative to the reader in both scripts. */ [dir="rtl"]{ --bf-hatch-unknown:repeating-linear-gradient(45deg,var(--bf-planned-light) 0 2px,transparent 2px 6px); } /* Icons that point along the reading direction flip; icons that depict a thing (a clock, a flag, a person) never do. */ [dir="rtl"] .bf-ic-flip{transform:scaleX(-1)} /* =================================================================== FOCUS Visible on both families, never removed, never colour-only. =================================================================== */ .bf-focusable:focus-visible, .bf-deep :where(a,button,[role="button"],[tabindex],input,select,textarea,summary):focus-visible, .bf-light :where(a,button,[role="button"],[tabindex],input,select,textarea,summary):focus-visible{ outline:2px solid var(--bf-focus); outline-offset:2px; } /* No border-radius here. An outline already follows the element's own corners, so setting one would reshape the CONTROL for as long as it holds focus -- a pill CTA snapping to 6px on Tab and back on blur. */ /* =================================================================== LAYOUT PRIMITIVES =================================================================== */ .bf-wrap{max-width:var(--bf-wrap);margin-inline:auto;padding-inline:var(--bf-gutter)} .bf-stack{display:flex;flex-direction:column;gap:var(--bf-sp-4)} .bf-stack-sm{display:flex;flex-direction:column;gap:var(--bf-sp-2)} .bf-stack-lg{display:flex;flex-direction:column;gap:var(--bf-sp-7)} .bf-row{display:flex;align-items:center;gap:var(--bf-sp-3);flex-wrap:wrap} .bf-row-tight{display:flex;align-items:center;gap:var(--bf-sp-2)} .bf-spread{display:flex;align-items:center;justify-content:space-between;gap:var(--bf-sp-3)} .bf-push-end{margin-inline-start:auto} .bf-grid{display:grid;gap:var(--bf-sp-4)} .bf-card{ background:var(--bf-surface-raised); border:1px solid var(--bf-border); border-radius:var(--bf-r-card); padding:var(--bf-sp-4); } .bf-panel{ background:var(--bf-surface); border:1px solid var(--bf-border); border-radius:var(--bf-r-panel); padding:var(--bf-sp-6); } .bf-scrollx{ display:flex; gap:var(--bf-sp-3); overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .bf-scrollx > *{scroll-snap-align:start;flex:none} .bf-tap{min-width:var(--bf-tap);min-height:var(--bf-tap)} .bf-sr{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } /* =================================================================== ICONS One sprite, inlined into the shell at build time from assets/img/bf-icons.svg and referenced locally: Icons are decorative by default; the accessible name lives in the text beside them, or in a .bf-sr span when there is none. =================================================================== */ .bf-sprite{display:none} .bf-ic{ width:1em;height:1em;flex:none; fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round; vertical-align:-.125em; } .bf-ic-lg{width:1.5em;height:1.5em} .bf-ic-xl{width:2em;height:2em} .bf-ic-solid{fill:currentColor;stroke:none} /* =================================================================== MOTION Northlight animates arrival and state change, never decoration. =================================================================== */ .bf-anim-rise{animation:bf-rise var(--bf-dur-3) var(--bf-ease-entrance) both} .bf-anim-fade{animation:bf-fade var(--bf-dur-2) var(--bf-ease-out) both} .bf-pulse-now{animation:bf-pulse-now 2.4s var(--bf-ease-in-out) infinite} @keyframes bf-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes bf-fade{from{opacity:0}to{opacity:1}} @keyframes bf-pulse-now{0%,100%{box-shadow:var(--bf-glow-now)}50%{box-shadow:0 0 0 6px rgba(255,201,40,.08),0 0 26px rgba(255,201,40,.2)}} /* Respecting reduced motion is not a downgrade: the present moment is still marked, it simply stops moving. */ @media (prefers-reduced-motion: reduce){ :root{ --bf-dur-1:1ms; --bf-dur-2:1ms; --bf-dur-3:1ms; --bf-dur-4:1ms; } .bf-anim-rise, .bf-anim-fade, .bf-pulse-now{animation:none} .bf-pulse-now{box-shadow:var(--bf-glow-now)} .bf-scrollx{scroll-behavior:auto} } /* Forced colours: keep state meaning attached to shape and text, and let the system supply the palette. */ @media (forced-colors: active){ .bf-card,.bf-panel{border-color:CanvasText} .bf-ic{stroke:CanvasText} }