/* Tenant theme layer. * * A dojo's branding, expressed as the ONE semantic the platform lets a tenant * move: its accent. Everything else — layout, spacing, type, elevation, * radius, motion — comes from ks-tokens.v1.css and is identical at every dojo. * That is what makes a hundred dojos look like one platform while still * looking like themselves. * * WHAT A DOJO OWNS * its logo an image, set on the tenant root * its hero imagery an image, set per page * its accent colour --tn-accent below * its name and copy data, not design * * WHAT A DOJO DOES NOT OWN * the grid, the type scale, the elevation scale, the radius scale, button * and card shapes, motion, or the meaning of red. Red is reserved * platform-wide for deadlines, destructive actions and the primary ask, so * a red thing always means the same thing whichever dojo you are in. * * HOW A TENANT SETS ITS ACCENT * The runtime writes one custom property on from the tenant root's * stored brand colour: * document.documentElement.style.setProperty('--tn-accent', hex) * Nothing else is needed. --accent, --accent-deep, --accent-soft and the * readable --accent-ink all derive from it in the platform layer, so a dojo * cannot ship an unreadable button by choosing a pale colour. * * Unset, --accent falls back to the platform blue: an unthemed dojo looks * on-brand, never unstyled. */ :root { /* No default is declared here on purpose. Declaring --tn-accent with a value would beat the runtime's own inline property in some orders and quietly pin every dojo to one colour. The fallback lives in the platform layer (`var(--tn-accent, var(--ks-blue))`), which is the correct place for it. */ /* Derived companions a tenant may optionally override; both have sane defaults computed from the accent. */ --tn-accent-deep: color-mix(in oklab, var(--accent) 82%, #000 18%); } /* A dojo's public front door may sit on the warm neutral family, so the page a stranger meets feels different from the workspace a member signs into — without either leaving the platform's system. Applied by adding `data-ks-surface="warm"` to a page shell. */ [data-ks-surface="warm"] { --surface: var(--ks-warm); --surface-sunken: var(--ks-warm-2); --line: var(--ks-warm-line); }