/* ========================================================================== Applied Continuity, design tokens -------------------------------------------------------------------------- The only file in this project permitted to contain hex literals. Every token below names the property of the mark it serves: P1 one continuous stroke, nothing breaks, nothing lifts P2 uniform stroke weight, no modulation P3 all terminals cut at 45 degrees, flat chamfers P4 wide and low, roughly 3:1 P5 an interlock, two forms sharing one path where they meet P6 pure black on white, no color, no gradient, no shadow A token that traces to none of the six, and to no part of the continuity thesis, does not belong here. ========================================================================== */ :root { /* --- Color, P6 ------------------------------------------------------ Monochrome. No accent exists at any tier. Any accent would either compete with the indigo KnowledgeBricks already owns or invent a fourth brand color for a parent that has to read neutral above all three. Ratios are computed against --paper by the WCAG relative-luminance formula and are recorded in docs/RATIONALE.md. */ --ink: #0B0C0E; /* 18.73:1 all text, focus fill. Not pure black */ --graphite: #3A3D42; /* 10.44:1 secondary text */ --steel: #6B7076; /* 4.78:1 metadata, labels. Clears AA normal text */ --rule: #8A8A84; /* 3.32:1 hairlines. Clears 3:1, so rules may carry structural meaning, not just decoration */ --mist: #EFEFEC; /* 1.06:1 subtle fills ONLY. Never text, never meaning */ --paper: #FAFAF8; /* --- canvas, and text set on --ink */ /* --- The children's colors, P6 restated ------------------------------ The parent has no color of its own. These are the child brands' colors and they appear ONLY inside a child's tile, never in Applied Continuity's own chrome. That is the hierarchy stated rather than asserted: every colour on this page belongs to someone else. Sourced, not invented. Indigo is confirmed in the KnowledgeBricks brief and in kb-website. Green is confirmed in reparse/src/app/globals.css. Highbay has no brand colour defined anywhere yet, so its field ships as ink with a visible placeholder rather than a guess. See TBC-18. Both defined colours clear AA for paper text reversed out of them. */ --kb-indigo: #3A56D2; /* 5.84:1 against --paper */ --reparse-green:#217346; /* 5.58:1 against --paper */ /* --highbay: [TBC-18] no brand colour exists yet */ /* Semantic aliases. Components reference these, never the raw scale, so an inverted surface only has to reassign six values. */ --surface: var(--paper); --surface-fill: var(--mist); --text: var(--ink); --text-2: var(--graphite); --text-3: var(--steel); --line: var(--rule); --invert-bg: var(--ink); --invert-fg: var(--paper); /* --- Type ------------------------------------------------------------ Archivo: neutral grotesk, tight apertures. Self-hosted, Latin subset, weight axis only. The width axis was dropped deliberately: it cost 55 KB against a 150 KB page budget for one line of display type, and P4 is a proportion the layout delivers, not something a font axis has to. Mono is the system stack, not Geist Mono. Geist Mono is already owned by KnowledgeBricks alongside indigo. A family thread runs parent to child, and there is no parent system for the children to have inherited from, so reusing it would read as brand bleed and make the parent look like a KnowledgeBricks sub-page. Zero bytes, deliberately unbranded, and it leaves each child brand free to own its own mono. */ --font-sans: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Display is set very large and very tight. P4. */ --t-display: clamp(3.5rem, 12vw, 10rem); --t-h2: clamp(1.75rem, 4vw, 3rem); --t-h3: clamp(1.25rem, 2.4vw, 1.75rem); --t-lead: clamp(1.125rem, 2vw, 1.5rem); --t-body: 1.0625rem; --t-label: 0.75rem; --t-meta: 0.8125rem; --lh-display: 0.88; --lh-tight: 1.0; --lh-snug: 1.15; --lh-lead: 1.4; --lh-body: 1.55; --tr-display: -0.045em; --tr-h2: -0.02em; --tr-h3: -0.01em; --tr-label: 0.18em; /* uppercase, wide. Nav, labels, section markers ONLY */ --tr-meta: 0.02em; --w-regular: 400; --w-medium: 500; --w-bold: 700; --measure: 68ch; /* prose cap. Readability, not column styling */ /* --- Spacing, P4 ---------------------------------------------------- Generous between sections, tight within them. Horizontal rhythm over tall stacked rhythm. */ --s1: 0.25rem; /* 4px */ --s2: 0.5rem; /* 8px */ --s3: 1rem; /* 16px */ --s4: 1.5rem; /* 24px */ --s5: 2.5rem; /* 40px */ --s6: 4rem; /* 64px */ --s7: 6.5rem; /* 104px */ --s8: 10.5rem; /* 168px */ --gutter: clamp(var(--s4), 5vw, var(--s6)); --max-width: 1440px; /* --- Rule weight, P2 ------------------------------------------------ The single non-zero border width in the entire system, focus outlines included. The interface equivalent of uniform stroke. If a second weight ever appears, the system has broken its own argument. */ --rule-w: 1px; /* --- Chamfer, P3 ---------------------------------------------------- 45-degree cuts via clip-path, never border-radius. Two opposing corners, top-left and bottom-right, not all four: the mark cuts terminals, not every corner of a shape, and four cuts make octagons. Two cuts establish the same 45-degree diagonal axis the mark's stroke travels. */ --chamfer: 12px; --chamfer-lg: 20px; --cut: polygon( var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer) ); --cut-lg: polygon( var(--chamfer-lg) 0, 100% 0, 100% calc(100% - var(--chamfer-lg)), calc(100% - var(--chamfer-lg)) 100%, 0 100%, 0 var(--chamfer-lg) ); /* --- Motion, P1, P3 ------------------------------------------------- Minimal and mechanical. Nothing bounces, nothing fades in on scroll, so there are no scroll-triggered animations at all. One shared curve, symmetric. Two behaviours only: rules that draw from one end, and elements that translate along a 45-degree vector. Everything under 300ms. All of it is disabled under prefers-reduced-motion. */ --ease: cubic-bezier(0.65, 0, 0.35, 1); --dur: 180ms; --dur-slow: 280ms; --slide: 4px; /* translate(var(--slide), calc(var(--slide) * -1)) = 45deg */ } /* Inverted surface, used by alt-b.html. P6 read in reverse: the same six values reassigned, nothing else in the system changes. */ [data-surface="invert"] { --surface: var(--ink); --surface-fill: #16181B; --text: var(--paper); --text-2: #C7C9CC; /* 11.79:1 on ink */ --text-3: #9A9DA2; /* 7.19:1 on ink */ --line: #63666C; /* 3.40:1 on ink. Lifted from a fainter gray that measured 2.31:1 and failed the 3:1 non-text threshold. The brief asked for faintly glowing hairlines; contrast wins that argument. */ --invert-bg: var(--paper); --invert-fg: var(--ink); }