/* * The hosted pages' design tokens (docs/backlog/refined/Q22.md Q22a2; the company Design System and * Theming Standard). This is the ONLY file that holds values: base.css, the templates and the client * modules reference the semantic roles below through var(--...), and a test fails any literal there. * * Tier 0/1 primitives: --palette-*, --font-*, --space-*, ... Declared in :root only. * Tier 2 semantic roles, the standard's fixed vocabulary: --surface, --surface-raised, --text, * --text-muted, --action-primary, --on-action-primary, --action-text, --border-subtle, * --control-edge, --danger, --focus-ring. * Products [data-product=""] blocks override SEMANTIC ROLES ONLY (standard section 7). The * server sets data-product on from the closed brand list, so there is no flash of * the wrong brand. * * PLACEHOLDERS. Every colour here is a neutral placeholder chosen to pass the contrast gate * (src/pages/contrast.mts, B1). The product faces, logos and colours are owed to Lee (Q22 section 8 * D7 and D8). Until they arrive, every product block maps its roles to the same neutral placeholder * accent and a page names its product as text. Replacing a product's colours is an edit to its * block (and, if it needs new primitives, to :root); the contrast gate then re-checks every pair. * * Light theme only, color-scheme: light (section 8 D7). The system font stack: no webfont, so * nothing to self-host and no third-party request. */ :root { color-scheme: light; /* Tier 0/1 primitives: neutral placeholders (owed to Lee, D7/D8). */ --palette-neutral-0: #ffffff; --palette-neutral-50: #f4f5f7; --palette-neutral-200: #d9dde3; --palette-neutral-500: #7d858f; --palette-neutral-700: #4f5763; --palette-neutral-900: #1b1f24; --palette-placeholder-blue-700: #1f4fbf; --palette-placeholder-accent-700: #33475b; --palette-red-700: #b3261e; --font-family-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-size-body: 1rem; --font-size-heading-1: 1.5rem; --font-size-heading-2: 1.25rem; --line-height-body: 1.5; --font-weight-heading: 600; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --measure-page: 30rem; --radius-control: 0.375rem; --border-width: 1px; --focus-ring-width: 3px; --focus-ring-offset: 2px; --shadow-raised: none; /* WCAG 2.2 2.5.8 asks 24 x 24 CSS px; the pages use the 44 px of 2.5.5 (AAA) on every control. */ --size-target-min: 2.75rem; /* Q22c: the authenticator-app QR code, quiet zone included. */ --size-qr: 12rem; /* Tier 2 semantic roles: the Barnes Technology brand (bt). */ --surface: var(--palette-neutral-0); --surface-raised: var(--palette-neutral-50); --text: var(--palette-neutral-900); --text-muted: var(--palette-neutral-700); --action-primary: var(--palette-placeholder-blue-700); --on-action-primary: var(--palette-neutral-0); --action-text: var(--palette-placeholder-blue-700); --border-subtle: var(--palette-neutral-200); --control-edge: var(--palette-neutral-500); --danger: var(--palette-red-700); --focus-ring: var(--palette-placeholder-blue-700); --font-family: var(--font-family-system); } /* Perkery (loyalty): PLACEHOLDER roles until Lee supplies the brand (D7/D8). */ [data-product="loyalty"] { --action-primary: var(--palette-placeholder-accent-700); --action-text: var(--palette-placeholder-accent-700); --focus-ring: var(--palette-placeholder-accent-700); } /* AXIS: PLACEHOLDER roles until Lee supplies the brand (D7/D8). */ [data-product="axis"] { --action-primary: var(--palette-placeholder-accent-700); --action-text: var(--palette-placeholder-accent-700); --focus-ring: var(--palette-placeholder-accent-700); } /* Runsheet: PLACEHOLDER roles until Lee names a source (D8). */ [data-product="runsheet"] { --action-primary: var(--palette-placeholder-accent-700); --action-text: var(--palette-placeholder-accent-700); --focus-ring: var(--palette-placeholder-accent-700); } /* Perkery Media: PLACEHOLDER roles until Lee names a source (D8). */ [data-product="media"] { --action-primary: var(--palette-placeholder-accent-700); --action-text: var(--palette-placeholder-accent-700); --focus-ring: var(--palette-placeholder-accent-700); }