/* =========================================================================== * The tokens. Face lift of 16 September 2026. * * Every token NAME that ever existed here still exists, because every module * in the tree reads var(--at-*) and a name that disappears takes a screen * with it. What changed is the VALUES: they are the measured surfaces of the * screen the end customer picked, so changing this one file re-dresses the * whole product. * * The names are unchanged from the Ledger pass. What they hold is not: * * --at-paper #ffffff cards, panels, list ground * --at-band #f4f6f4 the page behind the cards * --at-field #eef1ee the second surface: header row, hover, quiet chip * --at-ink #081729 the top bar * --at-ink2 #0f2a4a the area bar under it * --at-rule #dde2dc every 1px border and every row divider * --at-rule2 #e4e8e3 the third surface, and a dash not yet reached * --at-tx #101b28 text * --at-tx2 #485661 second line text, sub lines, body cells * --at-tx3 #5f6c78 labels and column headings * --at-loud #b7412c one mark per screen * * Two of the measured values were moved and both moves are in the report. * The measured muted text is #8996a0, which is 3.03 to 1 on white and 2.66 * on the header row: a column heading nobody with ordinary eyes can read at * ten in the morning is not a design, so --at-tx3 is #5f6c78, which is the * same grey four steps darker and clears AA on all three surfaces it is * drawn on. The measured secondary #485661 is kept exactly. * * The five state colours are NOT decided here. They are decided in * src/schema.js, measured there, and written into the page at boot as * #ll-palette. So is the accent, which is now the teal #0e7c74: it is the * one primary control AND the completed dash in the four dash meter, which * is why it lives with the state colours and is measured against them. * * Type: the system stack. The mockup loads Manrope, IBM Plex Sans and IBM * Plex Mono from a font service; the offline build makes zero network * requests, so it cannot. The sizes below are the mockup's, carried by the * system stack. * * The craft pass of 17 September 2026 changed four things in this file and * added thirteen names. It removed none. * * 1. The weights. --at-weight-medium was 600 and --at-weight-display was * 700, both carried over from a mockup with a display face to hold * them up. On the system stack they read as shouting. They are 500, * which is what the design language has said since the first page. * Every module that asks for a weight by name is corrected by this * one line and does not have to touch its own CSS. * 2. A line height for each size, and one display size, 30px, which is a * KPI number and nothing else. * 3. One focus ring, --at-focus-*, so every control in the product draws * the same ring. The accent on a light surface; white on the two dark * bars, where the accent measures 2.86 to 1 against the navy and a * non text indicator has to clear 3 to 1. * 4. The two shadows, half a step apart at the same angle in the same * ink, so a menu floating over a card reads as one system. * * No colour value moved. The five state colours and the accent are still * decided and measured in src/schema.js and nowhere else. * * The frame pass of 23 September 2026 (owner decisions 15 to 17) moved * three things and added names. It removed none. * * 1. The weights are the customer's: 700 to 800 for tabs, headings, * values, names, table headers and pills, 400 to 500 for body text. * --at-weight-medium is 700 and --at-weight-display is 800, so every * module that asks for emphasis by name gets his weight without * touching its own sheet. --at-weight-body-strong (500) is the quiet * emphasis inside a sentence. * 2. The display size is his tile number, 26px, and the tally number has * a size of its own, 16px. * 3. Two state tokens the tiles need and the palette did not carry: the * hold purple (a job waiting on the client) and the pending indigo (a * job waiting to be sent out). They are state, never category. * 4. ONE primary button, .ll-btn-primary: a solid accent pill with white * text at 12.5px and 700, the way his "+ New Order" is drawn. One quiet * button beside it, .ll-btn-quiet. Both live here so every module can * use them without drawing a button of its own. --at-loud stays a state * colour and is never a button. * ========================================================================= */ :root { /* ---- The surfaces, under their own names ---- */ --at-paper: #ffffff; --at-band: #f4f6f4; --at-field: #eef1ee; --at-ink: #081729; --at-ink2: #0f2a4a; --at-rule: #dde2dc; --at-rule2: #e4e8e3; --at-tx: #101b28; --at-tx2: #485661; --at-tx3: #5f6c78; --at-loud: #b7412c; --at-onink: #ffffff; /* text on the ink bars */ --at-onink-quiet: #aebdcf; /* the quiet half of a dark bar, 9.43 to 1 */ /* The strong border, for a card under the pointer and a rule that has to be seen. Measured off the mockup. */ --at-rule-strong: #c7cec5; /* The dark bars carry controls of their own: the search box in the header, the bucket that is on, a column heading under the pointer. */ --at-ink-raise: #16304f; /* a control sitting on an ink bar */ --at-ink-raise2: #1d3c61; /* that control, under the pointer */ --at-ink-edge: #24405f; /* a hairline drawn on an ink bar */ --at-ink2-hover: #16345a; /* the area bar, hovered */ /* The row whose panel is open. The accent tint, which is what the mockup puts under a selected row. */ --at-row-open: #e3f2f0; /* The accent as the build ships it. src/schema.js writes the measured value over this at boot, and the office's own pick after that; this is only what a page reads before either has run. */ --at-accent: #0e7c74; /* Two states the tiles need that the five do not carry (23 September). Hold is work waiting on the client to decide; pending is work waiting to be sent out. Tint, ink and solid, the same three the five carry. Hold ink on white 5.36 to 1, pending ink on white 7.33 to 1. */ --at-stateHold: #f0ebf7; --at-stateHold-ink: #7a5fa3; --at-stateHold-solid: #7a5fa3; --at-statePending: #e9eafb; --at-statePending-ink: #4550a8; --at-statePending-solid: #4550a8; /* Wave 6 (decision 203): the red license badge on the Contractors word. White on the badge red 5.44 to 1. */ --ll-lic-badge-bg: #c0392b; --ll-lic-badge-ink: #ffffff; /* The mark in the top left corner: the accent running into the navy of the tab bar, the way the customer drew it. */ --at-mark-fill: linear-gradient(155deg, var(--at-accent) 0%, var(--at-ink2) 115%); /* The quiet grey of the line under the office name, on the ink bar. */ --at-onink-tag: #9fb0c4; /* The day on the right of the bar, and the pill the search box sits in. */ --at-onink-soft: #c7d3e0; --at-onink-fill: rgba(255, 255, 255, 0.08); --at-onink-fill2: rgba(255, 255, 255, 0.14); --at-onink-edge: rgba(255, 255, 255, 0.14); /* ---- Type. The mockup's scale, on the system stack. ---- */ --at-font-sans: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; /* There is no display face. The mockup's display face is Manrope and we cannot ship it, so the display name points at the body stack and the difference is carried by weight and tracking. */ --at-font-display: var(--at-font-sans); --at-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --at-font-size-xs: 11px; --at-font-size-sm: 11px; --at-font-size-base: 13px; --at-font-size-title: 17px; /* One display size, and it is a KPI number and nothing else. This is the single extension to the three size law and it is taken so that the five numbers at the top of the working screen carry the screen. Nothing else in the product may read it. */ --at-font-size-display: 26px; /* His tally number, his button and the line under a tile. */ --at-font-size-tally: 16px; --at-font-size-button: 12.5px; --at-font-size-tile-sub: 11.5px; --at-font-size-brand: 14.5px; --at-font-size-brand-tag: 10.5px; /* The letters over his mini month in the rail, and nothing else. */ --at-font-size-mini: 9.5px; /* A line height for each size, so a stack of text sits on a rhythm rather than on whatever the browser worked out. */ --at-line-height-xs: 15px; --at-line-height-base: 18px; --at-line-height-title: 22px; --at-line-height-display: 30px; --at-line-height-control: 18px; --at-line-height-pill: 16px; --at-line-height-button: 20px; /* Two weights. 600 and 700 were carried over from a mockup that had a display face to carry them; on the system stack they read as shouting, and the design language has said 400 and 500 since the first page. The names are unchanged, so every module that asks for medium or display gets the corrected weight without touching a line of its own CSS. */ --at-weight-regular: 400; --at-weight-medium: 700; --at-weight-display: 800; /* The customer's scale by name (decision 17). Bold is a tab, a heading, a name, a table header or a pill; heavy is a value; body strong is the quiet emphasis inside running text. */ --at-weight-body-strong: 500; --at-weight-bold: 700; --at-weight-heavy: 800; --at-tracking-display: 0; /* Small uppercase text needs air between the letters or it reads as a smudge. A big number needs the opposite. */ --at-tracking-caps: 0.06em; --at-tracking-tight: -0.01em; /* ---- Neutrals / text ---- */ --at-text: var(--at-tx); --at-text-muted: var(--at-tx2); --at-text-faint: var(--at-tx3); --at-text-inverse: #ffffff; --at-text-tab-inactive: var(--at-tx2); --at-icon-plus: var(--at-tx2); --at-quiet-opacity: 0.78; /* ---- Surfaces ---- */ --at-surface: var(--at-paper); /* The page behind the cards, which is what the list, the tiles and the rail all sit on. */ --at-surface-grid-backdrop: var(--at-band); --at-surface-header-strip: var(--at-field); /* the column heading row */ --at-surface-hover: #eef1ee; --at-surface-subtle: rgba(16, 27, 40, 0.05); --at-surface-tabstrip: var(--at-band); --at-surface-band: var(--at-band); --at-surface-panel: var(--at-paper); --at-surface-3: var(--at-rule2); /* ---- Brand / accent ---- The accent teal arrives from schema.js as --at-accent. These two are the strong and the tint beside it, measured off the mockup. Green here still only ever means finished. */ --at-accent-strong: #0a5f59; --at-accent-tint: #e3f2f0; --at-green: var(--at-accent-strong); --at-blue: var(--at-ink2); --at-blue-selection-fill: var(--at-accent-tint); /* ---- Borders. One hairline, everywhere. ---- */ --at-border-hairline: var(--at-rule); --at-border-grid: var(--at-rule); --at-border-header: var(--at-rule); --at-border-frozen: var(--at-rule); --at-border-control: var(--at-rule-strong); /* ---- Radii. The mockup rounds: 10px on a card, 5px on a tag, a full lozenge on a pill. ---- */ --at-radius-cell-selection: 0px; --at-radius-xs: 3px; --at-radius-sm: 5px; --at-radius-md: 7px; /* Decision 94 (his 35): softer, rounder surfaces. A card, a panel and a window corner are 12px, his number, so every module that asks for the large radius by name gets it without touching its own sheet. */ --at-radius-lg: 12px; --at-radius-pill: 9999px; /* ---- THE MODERN LOOK (his 35, decision 94) ---- The marine blue pill tabs, system wide. These are his nine names with his light values; the dark values are said again in the shell's dark sheet (app.js DARK_TOKENS), so dark mode follows. The track is the rounded strip a row of tabs sits in, the ink is a tab at rest, hover is under the pointer, on is the tab you are standing on (white ink, which dark does not change), soft is a selected card or row. The seat accent is NOT here: it still colours the one primary button (decision 17), and the tabs are the same blue for every seat. */ --tab-track: #eef3f8; --tab-track-bd: #d6e1ec; --tab-ink: #3c5068; --tab-hover: #dfe9f3; --tab-hover-ink: #123a5e; --tab-on: #1b4d7a; --tab-on-ink: #fff; --tab-on-shadow: 0 2px 6px rgba(27, 77, 122, .35); --tab-soft: #e3edf6; /* The main tab bar is pills on the navy: the one you are on is a white pill with the marine ink, its count plate the marine under white. */ --tab-bar-on: #ffffff; --tab-bar-on-ink: #1b4d7a; --tab-bar-hover: rgba(255, 255, 255, .08); /* A red count on a tab (an unfinished item), and on the tab you are on. */ --tab-badge: #e0473a; --tab-badge-ink: #ffffff; --tab-badge-on: #ffffff; --tab-badge-on-ink: #c0392b; /* The section you are on in Setup, Merchant and Help: the same pill. */ --at-nav-on: var(--tab-on); --at-nav-on-ink: var(--tab-on-ink); --at-nav-on-hover: var(--tab-on); /* ---- Elevation. Two shadows and nothing else. --at-shadow-low is for a thing that sits ON the page: a card, a tile, the rail, the list. --at-shadow-high is for a thing that floats OVER it: a menu, a popover, a toast. Nothing gets both and nothing gets a third. Both are the same ink at the same angle, one step apart, so a menu opened over a card reads as one system. ---- */ --at-shadow-low: 0 1px 2px rgba(15, 30, 45, 0.07); --at-shadow-high: 0 1px 2px rgba(15, 30, 45, 0.07), 0 8px 24px rgba(15, 30, 45, 0.12); --at-shadow-tooltip: 0 0 0 1px rgba(15, 30, 45, 0.14); --at-shadow-frozen: 3px 0 0 0 rgba(15, 30, 45, 0.05); --at-ring-cell: 0 0 0 2px var(--at-accent); --at-ring-cell-editing: 0 0 0 1px var(--at-accent); /* ---- Focus. One ring, drawn from here, on every control in the product. It is the accent on a light surface. On the two dark bars the accent sits 2.86 to 1 against the navy behind it, which is under the 3 to 1 a non text indicator has to clear, so a control on ink takes the white ring instead at 14.48 to 1. ---- */ --at-focus-width: 2px; --at-focus-offset: 2px; --at-focus-color: var(--at-accent); --at-focus-color-onink: #ffffff; --at-focus-ring: 0 0 0 2px var(--at-accent); --at-focus-ring-onink: 0 0 0 2px #ffffff; /* ---- Layout. ---- */ --at-statusbar-width: 0px; /* His bar is 64px, and his tab row under it 38px. The two are the only things that stay put while the page scrolls under them. */ --at-header-height: 64px; --at-navbar-height: 38px; /* The page gutter, his 28px down each side on a wide screen. Sixteen is the least it ever is, never the most: under 1024px of window it comes back to sixteen so a narrow screen keeps its room for the work. */ --at-page-gutter: 28px; --at-areastrip-height: 34px; /* The period strip, the office's own line of figures. It is drawn on two screens and only for the seat that is allowed it, so it is 0 on every other screen and this is what it stands at when it is there. */ --at-tally-height: 44px; --at-bucketbar-height: 52px; --at-detail-height: 236px; --at-tabstrip-height: 28px; --at-toolbar-height: 34px; --at-sidebar-width: 200px; --at-summarybar-height: 28px; /* LLView's own four row heights, under the names other modules read. The working list runs at 'tall', which is the mockup's 88px row with two lines in the Due cell and two in the Matter cell. Short is what a dense table still uses, and the money tables read it by name. */ --at-row-height-short: 28px; --at-row-height-medium: 56px; --at-row-height-tall: 88px; --at-row-height-extra-tall: 128px; --at-column-width-default: 140px; --at-gutter-width: 34px; --at-icon-size: 16px; --at-chip-height: 20px; /* ---- The KPI tile row and the right rail ---- */ /* 12 + 14 + 4 + 32 + 4 + 14 + 12. The tile is the sum of its parts rather than a round number with the type dropped into it. */ --at-kpi-height: 92px; --at-kpi-gap: 12px; --at-rail-width: 300px; --at-rail-gap: 16px; /* Below this the rail folds away, so nothing ever scrolls sideways on a laptop. */ --at-rail-min: 1200px; /* ---- The nine work order columns, at 1366, in pixels. ---- */ --at-col-due: 104px; --at-col-job: 104px; --at-col-level: 92px; --at-col-case: 190px; --at-col-client: 150px; --at-col-branch: 108px; --at-col-server: 112px; --at-col-progress: 84px; --at-col-status: 146px; --at-col-party: 152px; /* ---- Spacing. 4 / 8 / 12 / 16 / 24 / 32 and nothing between. Every gap and every pad on a screen is one of these six. The page gutter is its own token, --at-page-gutter, the same on every floor so the left edge of the bar, the tabs, the tiles, the list and the rail is one line down the screen. ---- */ --at-space-1: 4px; --at-space-2: 8px; --at-space-3: 12px; --at-space-4: 16px; --at-space-5: 24px; --at-space-6: 32px; /* ---- Cell renderers ---- */ --at-linked-record-bg: var(--at-field); --at-rating-filled: var(--at-tx); --at-rating-empty: var(--at-rule); /* ---- The select palette. Identity is not state, so the ten "colours" a select option can carry no longer carry ten hues. Every one of them resolves to the quiet identity chip of the measurement: #eef1ee fill, #485661 text, a 1px #dde2dc border and a 5px radius. The names survive because a hundred stored option definitions point at them. ---- */ --at-blueLight2: #eef1ee; --at-cyanLight2: #eef1ee; --at-tealLight2: #eef1ee; --at-greenLight2: #eef1ee; --at-yellowLight2: #eef1ee; --at-orangeLight2: #eef1ee; --at-redLight2: #eef1ee; --at-pinkLight2: #eef1ee; --at-purpleLight2: #eef1ee; --at-grayLight2: #eef1ee; --at-blueLight1: #e4e8e3; --at-cyanLight1: #e4e8e3; --at-tealLight1: #e4e8e3; --at-greenLight1: #e4e8e3; --at-yellowLight1: #e4e8e3; --at-orangeLight1: #e4e8e3; --at-redLight1: #e4e8e3; --at-pinkLight1: #e4e8e3; --at-purpleLight1: #e4e8e3; --at-grayLight1: #e4e8e3; /* Bright and Dark1 are the swatch names LLView's own colour picker asks for by hand. They stay separable there, and nothing in the product's own screens reads them: state colour comes from the five state tokens. */ --at-blueBright: #2f5f92; --at-cyanBright: #2f5f92; --at-tealBright: #0e7c74; --at-greenBright: #2f7d5b; --at-yellowBright: #a66a10; --at-orangeBright: #a66a10; --at-redBright: var(--at-loud); --at-pinkBright: var(--at-loud); --at-purpleBright: #4a4450; --at-grayBright: #5f6c78; --at-blueDark1: #2f5f92; --at-cyanDark1: #2f5f92; --at-tealDark1: #0a5f59; --at-greenDark1: #2f7d5b; --at-yellowDark1: #9e6404; --at-orangeDark1: #9e6404; --at-redDark1: #b7412c; --at-pinkDark1: #b7412c; --at-purpleDark1: #4a4450; --at-grayDark1: #485661; } /* A narrow window gives the gutter back to the work: sixteen, the least. */ @media (max-width:1023px){ :root { --at-page-gutter: 16px; } } /* =========================================================================== * THE ONE PRIMARY BUTTON, and the quiet one beside it (decision 17). * * A solid accent pill with white text, 12.5px at 700, the way the customer * drew "+ New Order". Every module that needs a primary control uses this * class rather than drawing its own, so the product has one. The loud red is * a state of play and is never a button. * ========================================================================= */ .ll-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:6px; height:30px;padding:0 14px;border:1px solid var(--at-accent); border-radius:var(--at-radius-pill);background:var(--at-accent); color:var(--at-accent-onsolid,#ffffff);font-family:var(--at-font-sans); font-size:var(--at-font-size-button);line-height:1;font-weight:var(--at-weight-bold); white-space:nowrap;cursor:pointer;text-decoration:none; transition:background .12s ease,border-color .12s ease} .ll-btn-primary:hover{background:var(--at-accent-strong);border-color:var(--at-accent-strong)} .ll-btn-primary:focus{outline:none} .ll-btn-primary:focus-visible{outline:var(--at-focus-width) solid var(--at-focus-color); outline-offset:var(--at-focus-offset)} .ll-btn-primary:disabled,.ll-btn-primary[aria-disabled="true"]{background:var(--at-rule2); border-color:var(--at-rule);color:var(--at-tx3);cursor:not-allowed} .ll-btn-primary svg{flex:0 0 auto} .ll-btn-quiet{display:inline-flex;align-items:center;justify-content:center;gap:6px; height:30px;padding:0 14px;border:1px solid var(--at-rule-strong); border-radius:var(--at-radius-pill);background:var(--at-paper);color:var(--at-tx2); font-family:var(--at-font-sans);font-size:var(--at-font-size-button);line-height:1; font-weight:var(--at-weight-bold);white-space:nowrap;cursor:pointer;text-decoration:none} .ll-btn-quiet:hover{background:var(--at-field);color:var(--at-tx)} .ll-btn-quiet:focus{outline:none} .ll-btn-quiet:focus-visible{outline:var(--at-focus-width) solid var(--at-focus-color); outline-offset:var(--at-focus-offset)} .ll-btn-quiet:disabled{color:var(--at-tx3);cursor:not-allowed}