/* ══════════════════════════════════════════════════════════════════════════ GlueArrow skin — LAYER 2 ══════════════════════════════════════════════════════════════════════════ The entire per-storefront surface: eight custom properties plus the mark. Nine things. Provisioning writes them onto the app root and every pattern reads them. Nothing else in any GlueArrow codebase may name a colour. WHY EIGHT AND NOT EIGHTY. Six Korra layouts already inject the merchant's brand colour under six different names (--r-accent, --qd-primary, --vn-accent, --accent, a JS object, and brand.primary), and a seventh writes --accent onto instead of the app root. The rail existed; it was spelled seven ways, so nothing could be shared. One name, one element, one time. WHY THE REST ARE DERIVED, NOT STORED. Secondary ink, tertiary ink, hairlines and the accent wash are computed from the eight below. Storing them lets a storefront save a combination that fails contrast, and nobody would find out until a customer could not read a label. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── The eight. Defaults are the neutral storefront: a merchant who has set nothing still gets a correct, legible site. ──────────────────── */ /* 1. The brand colour. merchant_storefronts.primary_color. */ --ga-accent: #1d1d1f; /* 2. Text that sits ON the accent. Stored, not computed, because CSS cannot yet pick a contrasting colour reliably. Provisioning sets #ffffff or #1d1d1f by measuring contrast once, at write time. */ --ga-accent-ink: #ffffff; /* 3. Body text. */ --ga-ink: #1d1d1f; /* 4. Card and panel ground. */ --ga-surface: #ffffff; /* 5. Page ground. */ --ga-ground: #f5f5f7; /* 6. The face. Customer-facing storefronts choose from the approved set. Operator surfaces override this with --ga-font-brand (see fonts.css). */ --ga-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* 7. Squarer or softer, without inventing radii. 0.5 to 1.5. */ --ga-radius-scale: 1; /* 8. Density. 1 is the default rhythm; 0.875 tightens a data-heavy console, 1.125 opens up a marketing storefront. Multiplies pattern padding only, never type and never touch targets. */ --ga-density: 1; /* The ninth is the mark itself: a logo file or a first letter. It is not CSS, so it arrives as a prop or an , not a custom property. */ } /* ── Derived. Do not set these per storefront. ──────────────────────────── A separate block so the guard in test/rail.test.js can read the owned set and the computed set apart, and fail if the owned set grows quietly. */ :root { --ga-ink-2: #6e6e73; --ga-ink-3: #aeaeb2; --ga-line: #ebebef; --ga-accent-wash: rgba(29, 29, 31, .08); --ga-accent-deep: #000000; } /* Derivation proper, where the browser supports it. Declared after the flat fallbacks above so an older browser keeps a working, if fixed, palette. */ @supports (color: color-mix(in srgb, #000 50%, #fff)) { :root { --ga-ink-2: color-mix(in srgb, var(--ga-ink) 62%, var(--ga-surface)); --ga-ink-3: color-mix(in srgb, var(--ga-ink) 38%, var(--ga-surface)); --ga-line: color-mix(in srgb, var(--ga-ink) 8%, var(--ga-surface)); --ga-accent-wash: color-mix(in srgb, var(--ga-accent) 12%, var(--ga-surface)); --ga-accent-deep: color-mix(in srgb, var(--ga-accent) 82%, var(--ga-ink)); } }