/* * Design tokens — runtime CSS custom property overrides. * * Injected once by the shell so every micro UI inherits them. * These override the defaults set by @theme in theme.css, enabling * runtime theming (white-labelling, dark mode toggle) without rebuilding. * * In production: host this file on a CDN and reference it from the shell. * See "Extracting micro UIs to their own repos" in the root README. */ :root { --color-primary: hsl(221 83% 53%); --color-primary-hover: hsl(221 83% 45%); --color-primary-fg: hsl(0 0% 100%); --color-background: hsl(0 0% 100%); --color-foreground: hsl(224 71% 4%); --color-surface: hsl(210 40% 98%); --color-surface-raised: hsl(0 0% 100%); --color-muted: hsl(210 40% 96%); --color-muted-fg: hsl(215 16% 47%); --color-border: hsl(214 32% 91%); --color-input: hsl(214 32% 91%); --color-ring: hsl(221 83% 53%); --color-success: hsl(142 72% 29%); --color-success-fg: hsl(0 0% 100%); --color-warning: hsl(38 92% 50%); --color-warning-fg: hsl(0 0% 100%); --color-danger: hsl(0 72% 51%); --color-danger-fg: hsl(0 0% 100%); --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; } /* Dark mode overrides — must be global so they are not trapped inside a micro-frontend's @scope block, where .dark would need to be a descendant of the scope root rather than an ancestor on . */ .dark { --color-primary: hsl(217 91% 60%); --color-primary-hover: hsl(217 91% 68%); --color-background: hsl(224 71% 4%); --color-foreground: hsl(210 40% 98%); --color-surface: hsl(222 47% 11%); --color-surface-raised: hsl(217 33% 17%); --color-muted: hsl(217 33% 17%); --color-muted-fg: hsl(215 20% 65%); --color-border: hsl(217 33% 17%); --color-input: hsl(217 33% 17%); --color-ring: hsl(217 91% 60%); --color-success: hsl(142 72% 40%); --color-warning: hsl(38 92% 55%); --color-danger: hsl(0 72% 60%); }