/* 02-brands/_hyperclank.css — HyperClank's tokens, scoped. * * Two brands share one component library (see README.md). Gantry's tokens are the globals in * 01-settings; HyperClank's are these, defined inside the .brand-hyperclank class that * layouts/hyperclank.html.erb puts on . Custom properties inherit, so every .c-, .o- * and .u- rule rendered inside that scope resolves HyperClank's values without one component * rule being duplicated or overridden. * * That is the rule for this layer: override ROLES, never components. A HyperClank page that * needs a different colour gets a token here, not a .brand-hyperclank .c-panel rule. A role * that does not exist yet is added to 01-settings/_semantic.css for both brands. * * This layer sorts after 01-settings and before everything that consumes tokens, so nothing * about the cascade depends on where in 06-components a rule happens to sit — the scope wins * on inheritance, not on order. * * Nothing in this file may change a pixel of gantry.software: no selector here matches * outside .brand-hyperclank. */ .brand-hyperclank { /* ── grounds and text: Gantry's, unchanged. The two brands stand on the same near-black field and the same gray ramp; what separates them is which accent leads and how much room the chrome takes, not the colour of the paper. The pigments come from 01-settings/_palette.css, so no hex literal is written here. The accents swap places: green leads on this brand where amber leads on Gantry's, and amber is the second colour — attention and states, never the link colour. Every ground, stroke and text role is therefore left alone: :root's values inherit into this scope, and repeating them here would only be a second copy to keep in step. */ --accent: var(--green); --accent-bright: color-mix(in oklab, var(--green) 55%, white); --accent-soft: color-mix(in oklab, var(--green) 14%, var(--surface)); --warn: var(--amber); /* ── type — the same one mono family (the components draw boxes with it), on a slightly larger, airier scale: the company site reads as pages, not as a terminal. */ --text-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.2rem); --text-3xl: clamp(2.3rem, 1.5rem + 3.2vw, 3rem); --lh-cell: 1.6; --tracking-label: 0.18em; /* ── space — roomier than the product site's cell rhythm. */ --space-xl: 3rem; --space-2xl: 5rem; --gap-stack: var(--space-lg); --gutter-page: clamp(1rem, 4vw, 3rem); --measure: 68ch; --shell-max: 104ch; /* o-appshell's pinned top and bottom rows. HyperClank's header and footer are pages chrome rather than a terminal's one-cell bars, so the rows are taller — this is the main thing the eye reads as "more space" on this brand. */ --bar-h: 4.5rem; background: var(--surface); color: var(--text); }