/* Mockarty Cloud — embedded design system. * Tokens imported from internal/designsystem/css/tokens.css. * The same tokens power the on-prem admin, so any visual retune * there propagates here automatically on next rebuild. * * Dark mode is class-based (.light / .dark on ) — the * main admin app uses the same pattern. prefers-color-scheme * would force a user with a system dark preference into dark * mode even when they explicitly chose light; the class-based * model lets the toggle in the user menu override the system. * * a11y notes (this stylesheet is read top-to-bottom): * - Focus rings use --focus-ring (3px accent halo). Visible * only on :focus-visible, never on click. * - Color-mix tints are used for status backgrounds; they * work in both themes without separate dark variants. * - prefers-reduced-motion disables the few transitions. */ /* ---------- Theme application ---------- * The .light / .dark classes on are added by app.js * (theme toggle + cookie persistence). Default to the user's * system preference if no explicit choice has been persisted. * The cascade order is: * 1. .light / .dark (explicit) — wins * 2. prefers-color-scheme: dark (system) — fallback * 3. :root defaults — light */ :root, .light, html:not(.dark) { /* The full token set is defined in tokens.css above; this * file consumes them. We re-declare nothing — tokens are * the single source of truth. */ } html.boot-pending body { visibility: hidden; } /* ---------- Cloud-local accent CHIP tokens ---------- * The shared --accent-light tint is intentionally faint (a soft selection * wash). For an accent BADGE/active-pill, accent-coloured TEXT on that faint * tint failed WCAG AA in light (2.98:1). These cloud-scoped variables give the * accent chip a readable recipe in BOTH themes WITHOUT mutating the shared * tokens: a slightly deeper accent-tinted background, and a text tone derived * from the accent — darkened toward black in light (AA on the tint), kept as the * bright accent in dark (already ~6.5:1 on the dark base). Derived from * --accent-color via color-mix, so a brand-accent change still propagates. */ .light, html:not(.dark) { --cw-chip-bg: color-mix(in srgb, var(--accent-color) 18%, var(--bg-primary)); /* Deep accent (accent-hover toward black) — 6.6:1 on the chip tint. A lighter accent on this pale tint only reached ~4:1 (the tint is bluish, so luminance separation needs a genuinely deep text). */ --cw-chip-text: color-mix(in srgb, var(--accent-hover) 70%, #000); /* ── Cloud craft tokens (light) — all derived from brand tokens ────────── These are the cloud cabinet's visual-craft layer: the values the shared design-system tokens don't pin (the page's ambient backdrop, the elevated console surfaces, the hairline weights, the segmented-nav fill, the hero mesh). Every value is derived via color-mix from --accent-color / --bg-* so a brand or theme retune still propagates. Nothing here changes the MEANING of a shared token. */ --cw-page-bg: var(--bg-secondary); /* App shell surface: cards/header sit a touch above the page so the console reads as layered, not flat. */ --cw-surface: var(--bg-primary); --cw-surface-sunken: color-mix(in srgb, var(--bg-secondary) 70%, var(--bg-tertiary)); /* A hairline a shade softer than the hard --border-color, for interior row dividers where the full border would read too heavy. */ --cw-hairline: color-mix(in srgb, var(--border-color) 60%, transparent); /* Segmented nav track + the active pill fill. */ --cw-seg-track: color-mix(in srgb, var(--bg-tertiary) 55%, var(--bg-secondary)); --cw-seg-active: var(--bg-primary); /* Hero — the auth split panel. A confident accent wash + the request/ response mesh strokes. */ --cw-hero-bg: linear-gradient(155deg, color-mix(in srgb, var(--accent-color) 13%, var(--bg-primary)) 0%, color-mix(in srgb, var(--accent-color) 5%, var(--bg-secondary)) 55%, var(--bg-secondary) 100%); --cw-hero-stroke: color-mix(in srgb, var(--accent-color) 30%, transparent); --cw-hero-stroke-strong: color-mix(in srgb, var(--accent-color) 55%, transparent); --cw-hero-text: var(--text-secondary); --cw-hero-method: var(--accent-hover); --cw-hero-ok: var(--success-text); /* Card top-accent rail (signature on primary cards). */ --cw-rail: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 40%, var(--accent-purple))); } .dark { --cw-chip-bg: color-mix(in srgb, var(--accent-color) 18%, var(--bg-primary)); --cw-chip-text: var(--accent-color); /* ── Cloud craft tokens (dark) ── */ --cw-page-bg: var(--bg-primary); --cw-surface: var(--bg-secondary); --cw-surface-sunken: color-mix(in srgb, var(--bg-primary) 60%, var(--bg-tertiary)); --cw-hairline: color-mix(in srgb, var(--border-color) 70%, transparent); --cw-seg-track: color-mix(in srgb, var(--bg-tertiary) 60%, var(--bg-primary)); --cw-seg-active: var(--bg-tertiary); --cw-hero-bg: linear-gradient(155deg, color-mix(in srgb, var(--accent-color) 16%, var(--bg-secondary)) 0%, color-mix(in srgb, var(--accent-color) 6%, var(--bg-primary)) 55%, var(--bg-primary) 100%); --cw-hero-stroke: color-mix(in srgb, var(--accent-color) 32%, transparent); --cw-hero-stroke-strong: color-mix(in srgb, var(--accent-color) 60%, transparent); --cw-hero-text: var(--text-secondary); --cw-hero-method: var(--accent-color); --cw-hero-ok: var(--success-text); --cw-rail: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 45%, var(--accent-purple))); } html:not(.light):not(.dark) { color-scheme: light; } @media (prefers-color-scheme: dark) { html:not(.light):not(.dark) { color-scheme: dark; } } /* ---------- Base / reset ---------- */ * { box-sizing: border-box; } /* The `hidden` attribute must always win. Author element rules like `button { display: inline-flex }` (below) out-specify the UA `[hidden]` rule, so a `