/* ========================================================================== Bacco Tree App — design tokens. THE ONE FILE. Rev 1.1, 2026-09-23 15:23 CDT (Rev 1 07:58; 1.1 = light theme also scopes to an element; no value changed). Owner: app-ux-designer. Builders import it; they do not edit it. Source: playbooks/marketing/brand/BRAND.md (restrained map for data screens), JD 2026-09-23 00:27 CDT A-LOOK: "The app will look like Kainans business card". Sources per token, and every contrast ratio: tokens.md beside this file. RULES 1. No per-screen colour, ever. A screen uses these names or nothing. 2. Colour never carries meaning alone (state = words + weight + border). 3. Bar (this seat's, labelled — CD-66 has no library number): every text pair >= 7:1 (WCAG 2.2 SC 1.4.6 AAA, any size) every UI boundary >= 4.5:1 (above SC 1.4.11's 3:1 floor, for sun) 4. Where a BRAND.md value fails the bar, the bar won; see tokens.md §3. 5. Dark is the default (A-LOOK). Light is an explicit per-user choice set as — it does NOT follow the OS setting. 6. No metallic gradient, motif, tagline or serif on a data screen. The full look belongs to the splash / home header only (BRAND.md §6). ========================================================================== */ :root { /* ---- Colour: DARK (default) ---------------------------------------- */ --c-bg: #000000; /* Bacco Black ground */ --c-text: #FFFFFF; /* primary text 21.00 : 1 */ --c-text-2: #C7C7C7; /* secondary text (Silver) 12.42 : 1 */ --c-accent: #57A9FE; /* accent text, links, focus 8.51 : 1 */ --c-on-accent: #000000; /* text on accent fill 8.51 : 1 */ --c-rule: #007CFD; /* Bacco Blue: rules, dividers only (non-text) 5.30 : 1 */ --c-border: #C7C7C7; /* field & control borders 12.42 : 1 */ --c-alert-bg: #FFFFFF; /* alert / error block = inverse */ --c-alert-text: #000000; /* 21.00 : 1 */ /* ---- Pressed / chosen (E-67, app-ux-designer 2026-09-27 01:0x CDT) -- Aliases of the colours above, so the light theme follows on its own and no new colour value enters the app. Never white on #007CFD (3.96:1). */ --c-press-bg: var(--c-accent); /* outlined button, lit */ --c-press-text: var(--c-on-accent); --c-press-inv-bg: var(--c-bg); /* filled button, darkened */ --c-press-inv-text: var(--c-accent); --c-press-border: var(--c-accent); --c-chosen-bg: var(--c-accent); /* aria-pressed="true", persistent */ --c-chosen-text: var(--c-on-accent); --press-min-ms: 150; /* read by press.js */ --bw-press: 3px; /* ---- Type (BRAND.md §2: Roboto; builder self-hosts, offline-first) - */ --font-ui: "Roboto", Arial, "Helvetica Neue", Helvetica, sans-serif; --fw-body: 400; --fw-label: 500; --fw-head: 700; /* 300 (Light) is NOT used on data screens — thin stems die in sun. */ --fs-min: 18px; /* nothing on a crew screen is smaller */ --fs-body: 20px; --fs-label: 20px; /* control labels, weight 500 */ --fs-head: 24px; --fs-date: 32px; /* CD-06's work_date band, weight 700 */ --fs-number: 40px; /* figures a man types or checks, weight 500 */ --lh-body: 1.4; --lh-tight: 1.15; --ls-caps: 0.04em; /* capitals only; never track lowercase (BRAND §2) */ /* ---- Spacing (8 px grid) ------------------------------------------- */ --sp-1: 8px; --sp-2: 16px; /* page side gutter */ --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; /* ---- Touch (D-07; CD-64's 44 px is the floor, not the target) ------- */ --tap: 56px; /* minimum height AND width of anything tappable */ --tap-primary: 64px; /* the one primary action per screen */ --tap-gap: 8px; /* minimum clear space between two targets */ /* ---- Lines & shape -------------------------------------------------- */ --bw: 2px; /* control border */ --bw-focus: 3px; /* focus ring, colour = --c-accent, offset 2px */ --bw-rule: 2px; /* the blue rule */ --radius: 6px; color-scheme: dark; } /* ---- Colour: LIGHT (explicit choice, for the sun try — D-09 / Q D-7) --- */ :root[data-theme="light"], [data-theme="light"] { /* Rev 1.1: also scopes to one element, for previews */ --c-bg: #FFFFFF; --c-text: #000000; /* 21.00 : 1 */ --c-text-2: #4D4D4D; /* 8.45 : 1 (BRAND #595959 = 7.00, no margin) */ --c-accent: #004FA2; /* 7.95 : 1 (BRAND #0067D6 = 5.37, fails 7) */ --c-on-accent: #FFFFFF; /* 7.95 : 1 */ --c-rule: #0067D6; /* 5.37 : 1 non-text only (BRAND light rule) */ --c-border: #4D4D4D; /* 8.45 : 1 */ --c-alert-bg: #000000; --c-alert-text: #FFFFFF; /* 21.00 : 1 */ color-scheme: light; } /* ---- Base wiring: the only element rules in this file ----------------- */ html { background: var(--c-bg); color: var(--c-text); } body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-ui); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } :focus-visible { outline: var(--bw-focus) solid var(--c-accent); outline-offset: 2px; } /* ---- E-67: tap flash + chosen toggle (playbooks/app/design/E-67-pressed-state.md §4). JD 2026-09-27 00:5x: "I still want a button to change or light up to know the app recieved to push of the button." .is-pressing is set by press.js on finger-down for >= 150 ms; .fill marks a button whose resting fill is not the ground. No rule here names :focus, :focus-visible, input, select or textarea - the focus ring above is untouched. */ button, [role="button"] { -webkit-tap-highlight-color: transparent; transition: none; } button[aria-pressed="true"], [role="button"][aria-pressed="true"] { background: var(--c-chosen-bg); color: var(--c-chosen-text); border-color: var(--c-chosen-bg); font-weight: var(--fw-head); } .is-pressing { background: var(--c-press-bg) !important; color: var(--c-press-text) !important; border: var(--bw-press) solid var(--c-press-border) !important; } .is-pressing[aria-pressed="true"], .is-pressing.fill { background: var(--c-press-inv-bg) !important; color: var(--c-press-inv-text) !important; }