/* GENERATED by frontend/scripts/generate-tokens.cjs — DO NOT EDIT BY HAND. Source of truth: frontend/packages/design-system/src/ (regenerate: `yarn --cwd frontend tokens`). The shared components (ms-*) of the Rails pages, concatenated from src/css/ in the order of its index.css. The React applications import the same sources directly. */ @layer tokens, base, components, pages; /* ——— src/css/base.css ——— */ /* What every surface of the brand shares under its root (.kl — the Rails pages, .ms-brand — the designer and the checkout): headings in the display typeface, the weight of bold text, the colour of a text selection and the focus ring, both in the tone. :where() keeps it at zero specificity, so a component or a page decides the rest. */ @layer base { :where(.kl, .ms-brand) :where(h1, h2, h3, h4, h5, h6) { font-family: var(--font-display); font-weight: var(--weight-regular); } /* Jost is loaded up to 500: a heavier weight would be synthesised. */ :where(.kl, .ms-brand) :where(strong, b) { font-weight: var(--weight-medium); } :where(.kl, .ms-brand) ::selection { background: var(--tone-pale); color: var(--ink); } :where(.kl, .ms-brand) :focus-visible { outline: 2px solid var(--tone); outline-offset: 3px; } } /* ——— src/css/button.css ——— */ /* A button: a pill with a label (and an icon). One strong action per view is --primary (the garnet gradient); the second is --secondary (glass with a line of the tone); --quiet is the lightest glass, for actions beside a drawing. Works on