/*! AUTO-GENERATED — DO NOT EDIT HERE. * Vendored from civicos/packages/ui/src/tokens.css (@civicos/ui v0.3.5 @e97fc3a) on 2026-07-15. * Edit the source in the civicos repo and run `pnpm --filter @civicos/ui sync`. * App-specific styles belong in your own namespaced CSS, never in this file. */ /** * CivicOS design tokens — Layer 0, the framework-neutral brand contract. * * Source of truth for CivicOS styling. Values come from the OCN Technology brand: * ink #15181C, white, indigo accent #382CDD, typeface DM Sans. Tone sits between * GOV.UK (accessible, high-contrast, structured) and a modern civic product (calm * surfaces, subtle depth, a confident accent). * * This file is shipped verbatim to every product — the portal consumes it directly; * the legacy apps (CMS, council portal) vendor it via `scripts/sync.mjs`. See * README.md for the upstream/downstream rules. Do not fork the values per app. */ :root { /* Brand accent (indigo) — buttons, links, rules, call-outs. Never the logo. */ --cvc-color-brand: #382cdd; --cvc-color-brand-dark: #2a1fb0; --cvc-color-brand-contrast: #ffffff; --cvc-color-brand-soft: #eeecff; /* Surfaces --cvc-color-bg = the PAGE GROUND (mode-dependent; see modes below) --cvc-color-surface = a raised card (always white) --cvc-color-muted = a subtle fill for component internals (table footers, tag chips, hover) — mode-INDEPENDENT so it survives a white content ground. Table headers use ink (--cvc-color-text), not muted. */ --cvc-color-bg: #eef0fb; --cvc-color-surface: #ffffff; --cvc-color-muted: #eef0fb; --cvc-color-border: #e4e7ec; --cvc-color-border-strong: #c9cdd6; /* Text — primary ink and a muted grey */ --cvc-color-text: #15181c; --cvc-color-text-muted: #59616e; /* Focus — GOV.UK-style yellow for a strong, accessible focus signal */ --cvc-color-focus: #ffdd00; --cvc-color-focus-ink: #15181c; /* State */ --cvc-color-danger: #b3140c; --cvc-color-danger-soft: #fde8e7; --cvc-color-success: #1a7f4b; --cvc-color-success-soft: #e2f4ea; --cvc-color-warning: #9a5b00; --cvc-color-warning-soft: #fbeed6; /* Radius */ --cvc-radius-sm: 4px; --cvc-radius: 8px; --cvc-radius-lg: 12px; --cvc-radius-pill: 999px; /* Spacing (4px base) */ --cvc-space-1: 4px; --cvc-space-2: 8px; --cvc-space-3: 12px; --cvc-space-4: 16px; --cvc-space-5: 24px; --cvc-space-6: 40px; --cvc-space-7: 64px; /* Elevation */ --cvc-shadow-sm: 0 1px 2px rgba(21, 24, 28, 0.06); --cvc-shadow: 0 1px 2px rgba(21, 24, 28, 0.05), 0 8px 24px rgba(21, 24, 28, 0.06); --cvc-shadow-accent: 0 10px 28px rgba(56, 44, 221, 0.18); /* Type — DM Sans everywhere; serif + mono for document/code surfaces. Guarded var() so it works both in the portal (next/font sets --font-dm-sans) and in apps that load "DM Sans" by name via @font-face / Google Fonts. */ --cvc-font-sans: var(--font-dm-sans, "DM Sans"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --cvc-font-serif: Georgia, "Times New Roman", Times, serif; --cvc-font-mono: ui-monospace, "JetBrains Mono", "Fira Code", "SFMono-Regular", Menlo, Consolas, monospace; --cvc-text-xs: 0.78rem; --cvc-text-sm: 0.9rem; --cvc-text-base: 1rem; --cvc-text-lg: 1.15rem; --cvc-text-xl: 1.4rem; --cvc-text-2xl: 2rem; } /** * MODES — app (default) vs content. * App mode (the :root default): white cards on an indigo-haze ground, for * interactive tools (portal, editor, admin) where depth helps you operate a UI. * Content mode: a white page ground for reading/consumption sites (public council * pages), where content flows directly and borders/rules do the work instead of * raised cards. Set the class on (whole content site) or a subtree. */ .cvc-content { --cvc-color-bg: #ffffff; }