/* NumbersClear design tokens — fallback until brand-registry build runs. * Source of truth: design-export/numbersclear/NumbersClear.html :root block. * Colour values live ONLY in this fallback file and in platform/brands/. * No hex in sites/numbersclear-app/src/ (colour-boundary enforced). * * The NC design system uses two variable layers: * --brand-* brand-registry standard (consumed by @aioras/ui-shared) * --ink/--pri/--pos/… NC short-form (consumed by the SPA dashboard) * Both layers are emitted here so marketing pages and the SPA share one * token surface with zero duplication. */ :root { color-scheme: dark; /* ── NC ink palette (background layers, dark → light) ─────────────── */ --ink: #0A0D12; --ink-2: #0E121A; --ink-3: #121723; --ink-raised: #181F2E; --ink-over: #1E2738; /* ── NC border / line layers ──────────────────────────────────────── */ --line: rgba(222,232,248,0.07); --line-2: rgba(222,232,248,0.12); --line-3: rgba(222,232,248,0.20); /* ── NC text palette ──────────────────────────────────────────────── */ --text: #EAF1FA; --text-dim: rgba(234,241,250,0.60); --text-mid: rgba(234,241,250,0.40); --text-faint: rgba(234,241,250,0.24); /* ── NC primary: clarity-cyan ─────────────────────────────────────── */ --pri: oklch(0.81 0.115 216); --pri-2: oklch(0.88 0.10 216); --pri-deep: oklch(0.60 0.10 216); --pri-soft: color-mix(in oklab, oklch(0.81 0.115 216) 15%, transparent); --pri-line: color-mix(in oklab, oklch(0.81 0.115 216) 40%, transparent); --pri-ink: #03141B; /* ── NC severity: traffic-light ───────────────────────────────────── */ --pos: oklch(0.80 0.15 158); --pos-soft: color-mix(in oklab, oklch(0.80 0.15 158) 15%, transparent); --pos-line: color-mix(in oklab, oklch(0.80 0.15 158) 38%, transparent); --warn: oklch(0.83 0.135 80); --warn-soft: color-mix(in oklab, oklch(0.83 0.135 80) 15%, transparent); --warn-line: color-mix(in oklab, oklch(0.83 0.135 80) 40%, transparent); --crit: oklch(0.67 0.195 23); --crit-soft: color-mix(in oklab, oklch(0.67 0.195 23) 18%, transparent); --crit-line: color-mix(in oklab, oklch(0.67 0.195 23) 45%, transparent); /* ── NC connector brand marks ─────────────────────────────────────── */ --c-shopify: #95BF47; --c-amazon: #FF9E2C; --c-qb: #2CA01C; /* ── third-party platform colours (PlatformMark2 SVGs) ──────────── */ --c-xero: #13B5EA; --c-sage: #00D639; --c-ml: #FFE600; --c-ml-face: #2D3277; --c-tn: #2C6DF6; --c-alegra: #00B5A5; --c-siigo-bg: #0A3D62; --c-siigo: #00C2A8; --c-gads-y: #FBBC04; --c-gads-b: #4285F4; --c-gads-g: #34A853; --c-meta: #0866FF; /* ── flag colours (EN / ES language selector SVGs) ──────────────── */ --f-gb-navy: #0A2F6E; --f-gb-white: #FFFFFF; --f-gb-red: #C8102E; --f-es-red: #C60B1E; --f-es-gold: #FFC400; /* ── NC typography stacks ─────────────────────────────────────────── */ --display: 'Space Grotesk', system-ui, sans-serif; --sans: 'Hanken Grotesk', -apple-system, system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; /* ── NC layout tokens ─────────────────────────────────────────────── */ --rail-w: 244px; --top-h: 60px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --r: 8px; --r-sm: 5px; --r-lg: 12px; /* ── brand-registry standard layer (consumed by @aioras/ui-shared) ─ */ --brand-radius: 8px; --brand-radius-sm: 5px; --brand-radius-lg: 12px; --brand-font-sans: 'Hanken Grotesk', -apple-system, system-ui, sans-serif; --brand-font-display: 'Space Grotesk', system-ui, sans-serif; --brand-font-mono: 'IBM Plex Mono', ui-monospace, monospace; --brand-motion-personality: "soft"; --brand-motion-duration-micro: 100ms; --brand-motion-duration-short: 200ms; --brand-motion-duration-medium: 320ms; --brand-motion-duration-long: 480ms; --brand-motion-ease-standard: cubic-bezier(0.33, 1.0, 0.68, 1.0); --brand-motion-ease-emphasized: cubic-bezier(0.22, 1.0, 0.36, 1.0); --brand-motion-ease-entrance: cubic-bezier(0.16, 1.0, 0.3, 1.0); --brand-motion-ease-exit: cubic-bezier(0.5, 0.0, 0.75, 0.0); --brand-motion-distance-entrance-y: 16px; --brand-motion-distance-reveal-scale: 0.94; --brand-bg: #0A0D12; --brand-ink: #EAF1FA; --brand-surface: #121723; --brand-surface-hover: #181F2E; --brand-surface-sunken: #0E121A; --brand-ink-muted: rgba(234,241,250,0.60); --brand-ink-faint: rgba(234,241,250,0.40); --brand-border: rgba(222,232,248,0.07); --brand-border-strong: rgba(222,232,248,0.20); --brand-primary: #3FC8E6; --brand-primary-hover: #5AD6EF; --brand-on-primary: #03141B; --brand-success: #4ADE80; --brand-on-success: #03141B; --brand-warning: #E6B84A; --brand-on-warning: #03141B; --brand-danger: #D44A3B; --brand-on-danger: #FFFFFF; --brand-info: #3FC8E6; --brand-on-info: #03141B; --brand-focus-ring: rgba(63,200,230,0.4); --brand-accent: #3FC8E6; } [data-theme="dark"] { color-scheme: dark; --brand-bg: #0A0D12; --brand-ink: #EAF1FA; --brand-surface: #121723; --brand-surface-hover: #181F2E; --brand-surface-sunken: #0E121A; --brand-ink-muted: rgba(234,241,250,0.60); --brand-ink-faint: rgba(234,241,250,0.40); --brand-border: rgba(222,232,248,0.07); --brand-border-strong: rgba(222,232,248,0.20); --brand-primary: #3FC8E6; --brand-primary-hover: #5AD6EF; --brand-on-primary: #03141B; --brand-success: #4ADE80; --brand-on-success: #03141B; --brand-warning: #E6B84A; --brand-on-warning: #03141B; --brand-danger: #D44A3B; --brand-on-danger: #FFFFFF; --brand-info: #3FC8E6; --brand-on-info: #03141B; --brand-focus-ring: rgba(63,200,230,0.4); --brand-accent: #3FC8E6; } [data-theme="light"] { color-scheme: light; --brand-bg: #f5f5f4; --brand-ink: #1c1917; --brand-surface: #ffffff; --brand-surface-hover: #f0f0ef; --brand-surface-sunken: #ebebea; --brand-ink-muted: #78716c; --brand-ink-faint: #a8a29e; --brand-border: rgba(0,0,0,0.06); --brand-border-strong: rgba(0,0,0,0.14); --brand-primary: #2A99B3; --brand-primary-hover: #238AA2; --brand-on-primary: #FFFFFF; --brand-success: #059669; --brand-on-success: #FFFFFF; --brand-warning: #B8860B; --brand-on-warning: #FFFFFF; --brand-danger: #C41E3A; --brand-on-danger: #FFFFFF; --brand-info: #2A99B3; --brand-on-info: #FFFFFF; --brand-focus-ring: rgba(42,153,179,0.4); --brand-accent: #2A99B3; }