/* ========================================================================== bright color, quiet sibling ("Werkzeug") for own products: qrating, Invoicer, vip-invites, crt.watch, sender.report and the like. Same family as bright-color-design, one step quieter: - the palette stays, but a product shows ONE accent colour at a time - ink and paper stay, the paper a shade lighter - Anton is reserved for the product name; everything else is Atkinson - 1 px lines and a 6 px radius instead of 2 px and hard corners - depth is a hairline, never a hard offset Everything is scoped to .bca, so a page can carry both handwritings. ========================================================================== */ .bca { /* Ground and ink ------------------------------------------------------ */ --bca-ink: #111111; --bca-ink-quiet: #5e5b55; /* the workbench tone: 6,9:1 on white */ --bca-paper: #f7f6f2; /* page ground, a shade lighter than the website */ --bca-surface: #ffffff; --bca-sunken: #f1efe9; /* the workbench hover tone, here a sunken field */ --bca-line: #e3e0d8; /* hairlines between rows, as in the workbench */ --bca-line-loud: #8e8a80; /* field edges: 3,4:1 against white */ /* One accent per product. Set it once, everything follows. ------------- */ --bca-accent: #1dc3f3; /* cyan */ --bca-on-accent: #05202a; /* type on the accent, from the pairing table */ --bca-accent-soft: color-mix(in srgb, var(--bca-accent) 14%, #ffffff); --bca-accent-edge: color-mix(in srgb, var(--bca-accent) 55%, #ffffff); /* States, straight from the family palette ---------------------------- */ --bca-ok: #bfd535; --bca-warn: #fed329; --bca-bad: #d61f7a; --bca-bad-text: #8c1a4c; --bca-ok-soft: color-mix(in srgb, var(--bca-ok) 18%, #ffffff); --bca-warn-soft: color-mix(in srgb, var(--bca-warn) 22%, #ffffff); --bca-bad-soft: color-mix(in srgb, var(--bca-bad) 8%, #ffffff); /* Form, size, rhythm --------------------------------------------------- */ --bca-radius: 6px; --bca-radius-sm: 4px; --bca-shadow: 0 1px 2px rgba(17, 17, 17, .06); --bca-shadow-pop: 0 8px 24px rgba(17, 17, 17, .1); --bca-control: 40px; --bca-move: 120ms; --bca-font-name: "Anton", Impact, "Arial Narrow", system-ui, sans-serif; --bca-font-text: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif; --bca-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --bca-size-h1: 1.75rem; --bca-size-h2: 1.25rem; --bca-size-h3: 1rem; --bca-size-body: .9375rem; --bca-size-small: .8125rem; --bca-size-label: .6875rem; --bca-leading: 1.6; --bca-measure: 36rem; --bca-space-1: 4px; --bca-space-2: 8px; --bca-space-3: 12px; --bca-space-4: 16px; --bca-space-6: 24px; --bca-space-8: 32px; --bca-space-12: 48px; --bca-width: 1040px; --bca-gutter: 20px; } /* The accent per product. A tenant colour goes into --bca-accent at runtime; the pair on it comes from the pairing table of the main skill. */ .bca-accent-cyan { --bca-accent: #1dc3f3; --bca-on-accent: #05202a; } .bca-accent-lime { --bca-accent: #bfd535; --bca-on-accent: #111111; } .bca-accent-yellow { --bca-accent: #fed329; --bca-on-accent: #111111; } .bca-accent-violet { --bca-accent: #aa4b88; --bca-on-accent: #ffffff; } .bca-accent-pink { --bca-accent: #d61f7a; --bca-on-accent: #ffffff; } .bca-accent-ink { --bca-accent: #111111; --bca-on-accent: #ffffff; } /* Night: the tools run on servers, people look at them at odd hours. data-theme sits on (set by a script before the first paint) or on the .bca element itself; both selectors beat the .bca defaults above. */ [data-theme="dark"] .bca, .bca[data-theme="dark"] { --bca-ink: #e6e4de; /* 14,5:1 on the ground */ --bca-ink-quiet: #a3a097; /* 7,0:1, same tone as the workbench */ --bca-paper: #0b0b0c; --bca-surface: #141415; --bca-sunken: #0f0f10; --bca-line: #2a2a2d; --bca-line-loud: #6e6e74; --bca-on-accent: #111111; --bca-accent-soft: color-mix(in srgb, var(--bca-accent) 18%, var(--bca-surface)); --bca-accent-edge: color-mix(in srgb, var(--bca-accent) 45%, var(--bca-surface)); --bca-ok-soft: color-mix(in srgb, var(--bca-ok) 16%, var(--bca-surface)); --bca-warn-soft: color-mix(in srgb, var(--bca-warn) 16%, var(--bca-surface)); --bca-bad-soft: color-mix(in srgb, var(--bca-bad) 16%, var(--bca-surface)); --bca-bad-text: #ff5ca8; --bca-shadow: 0 1px 2px rgba(0, 0, 0, .5); --bca-shadow-pop: 0 8px 24px rgba(0, 0, 0, .55); }