@astherix/ui 0.40.0

package/theme.css

@@ -0,0 +1,909 @@
+/*
+ * @astherix/ui theme
+ * Import after Tailwind in your app's main stylesheet:
+ *
+ *   @import "tailwindcss";
+ *   @import "@astherix/ui/theme.css";
+ *   @source "../node_modules/@astherix/ui/dist";
+ */
+
+/* Dark mode follows a `.dark` class on <html> (works with next-themes and Laravel starter kits). */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* Type — Schibsted Grotesk: a sturdy grotesk with open counters, readable at UI sizes. */
+  --font-sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  /* Headings use the body font by default; set --font-heading to give them their own. */
+  --font-heading: var(--font-sans);
+  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
+
+  /* Blue — the brand color, anchored on Bootstrap's #0d6efd at 500 */
+  --color-blue-50: #eef5ff;
+  --color-blue-100: #d9e8ff;
+  --color-blue-200: #b6d3ff;
+  --color-blue-300: #86b6fe;
+  --color-blue-400: #4d94fd;
+  --color-blue-500: #0d6efd;
+  --color-blue-600: #0a5ad6;
+  --color-blue-700: #0848ad;
+  --color-blue-800: #0a3c8a;
+  --color-blue-900: #0c326f;
+  --color-blue-950: #081f47;
+
+  /* Ash — neutrals with a faint cool cast so they sit well next to blue */
+  --color-ash-50: #f6f7f9;
+  --color-ash-100: #eceef2;
+  --color-ash-200: #d9dde4;
+  --color-ash-300: #bcc3cd;
+  --color-ash-400: #959ea9;
+  --color-ash-500: #717a86;
+  --color-ash-600: #58606b;
+  --color-ash-700: #454c56;
+  --color-ash-800: #2f343b;
+  --color-ash-900: #1d2126;
+  --color-ash-950: #121418;
+
+  /* Shape — corner radius for buttons and other controls */
+  --radius-control-sm: 0.1875rem; /* slightly rounded */
+  --radius-control: 0.375rem;     /* medium, the default */
+  --radius-control-lg: 0.75rem;   /* more rounded */
+  --radius-modal: 0.875rem;       /* modal panels */
+  --radius-card: 0.75rem;         /* cards */
+}
+
+/* Semantic tokens — components only use these, so re-theming means overriding these variables. */
+:root {
+  --ui-bg: var(--color-ash-50);
+  --ui-surface: #ffffff;
+  --ui-fg: var(--color-ash-900);
+  --ui-fg-muted: var(--color-ash-600);
+  --ui-border: var(--color-ash-200);
+  --ui-border-strong: var(--color-ash-300);
+  --ui-ring: var(--color-blue-500);
+
+  --ui-primary: var(--color-blue-500);
+  --ui-primary-hover: var(--color-blue-600);
+  --ui-primary-edge: var(--color-blue-800);
+  --ui-primary-fg: #ffffff;
+
+  --ui-secondary: #ffffff;
+  --ui-secondary-hover: var(--color-ash-100);
+
+  --ui-danger: #b42318;
+  --ui-danger-hover: #912018;
+  --ui-danger-edge: #5c140f;
+  --ui-danger-fg: #ffffff;
+
+  --ui-success: #15803d;
+  --ui-success-fg: #ffffff;
+  --ui-warning: #b45309;
+  --ui-warning-fg: #ffffff;
+  --ui-info: #0369a1;
+  --ui-info-fg: #ffffff;
+
+  /* Extra brand accents for controls that can take a color (e.g. Switch color="secondary"). */
+  --ui-tone-secondary: #15803d;
+  --ui-tone-secondary-fg: #ffffff;
+  --ui-tone-tertiary: #ea580c;
+  --ui-tone-tertiary-fg: #2a0f03;
+
+  /* Drop shadows for buttons (the `shadow` prop). Two layers: a tight contact
+     shadow plus a softer, wider one; heavier levels spread further. */
+  --ui-shadow-color: 29 33 38;
+  --ui-shadow-sm: 0 1px 2px rgb(var(--ui-shadow-color) / 0.14);
+  --ui-shadow-md: 0 1px 2px rgb(var(--ui-shadow-color) / 0.12), 0 3px 8px -1px rgb(var(--ui-shadow-color) / 0.14);
+  --ui-shadow-lg: 0 2px 4px rgb(var(--ui-shadow-color) / 0.1), 0 8px 18px -4px rgb(var(--ui-shadow-color) / 0.22);
+  --ui-shadow-xl: 0 3px 6px rgb(var(--ui-shadow-color) / 0.1), 0 16px 32px -8px rgb(var(--ui-shadow-color) / 0.32);
+
+  /* Modal */
+  --ui-backdrop: rgb(18 20 24 / 0.5);
+  --ui-backdrop-dark: rgb(8 10 13 / 0.82);
+  --ui-backdrop-blur: rgb(18 20 24 / 0.22);
+  --ui-backdrop-blur-radius: 8px;
+  --ui-backdrop-solid: var(--color-ash-50);
+  --ui-shadow-modal: 0 2px 6px rgb(var(--ui-shadow-color) / 0.08), 0 24px 56px -12px rgb(var(--ui-shadow-color) / 0.35);
+}
+
+.dark {
+  --ui-bg: var(--color-ash-950);
+  --ui-surface: var(--color-ash-900);
+  --ui-fg: var(--color-ash-50);
+  --ui-fg-muted: var(--color-ash-400);
+  --ui-border: var(--color-ash-800);
+  --ui-border-strong: var(--color-ash-700);
+  --ui-ring: var(--color-blue-300);
+
+  --ui-primary: var(--color-blue-400);
+  --ui-primary-hover: var(--color-blue-300);
+  --ui-primary-edge: var(--color-blue-600);
+  --ui-primary-fg: var(--color-blue-950);
+
+  --ui-secondary: var(--color-ash-900);
+  --ui-secondary-hover: var(--color-ash-800);
+
+  --ui-danger: #f47a6e;
+  --ui-danger-hover: #f89a90;
+  --ui-danger-edge: #c0392b;
+  --ui-danger-fg: #2a0906;
+
+  --ui-success: #4ade80;
+  --ui-success-fg: #052e16;
+  --ui-warning: #fbbf24;
+  --ui-warning-fg: #2b1700;
+  --ui-info: #38bdf8;
+  --ui-info-fg: #04203a;
+
+  --ui-tone-secondary: #4ade80;
+  --ui-tone-secondary-fg: #052e16;
+  --ui-tone-tertiary: #fb923c;
+  --ui-tone-tertiary-fg: #3b1204;
+
+  /* Dark backgrounds need deeper, darker shadows to read at all. */
+  --ui-shadow-color: 0 0 0;
+  --ui-shadow-sm: 0 1px 2px rgb(var(--ui-shadow-color) / 0.4);
+  --ui-shadow-md: 0 1px 2px rgb(var(--ui-shadow-color) / 0.4), 0 3px 8px -1px rgb(var(--ui-shadow-color) / 0.45);
+  --ui-shadow-lg: 0 2px 4px rgb(var(--ui-shadow-color) / 0.4), 0 8px 18px -4px rgb(var(--ui-shadow-color) / 0.6);
+  --ui-shadow-xl: 0 3px 6px rgb(var(--ui-shadow-color) / 0.4), 0 16px 32px -8px rgb(var(--ui-shadow-color) / 0.75);
+
+  --ui-backdrop: rgb(0 0 0 / 0.62);
+  --ui-backdrop-dark: rgb(0 0 0 / 0.86);
+  --ui-backdrop-blur: rgb(0 0 0 / 0.38);
+  --ui-backdrop-solid: var(--color-ash-950);
+  --ui-shadow-modal: 0 2px 6px rgb(0 0 0 / 0.4), 0 24px 56px -12px rgb(0 0 0 / 0.7);
+}
+
+@theme inline {
+  --color-bg: var(--ui-bg);
+  --color-surface: var(--ui-surface);
+  --color-fg: var(--ui-fg);
+  --color-fg-muted: var(--ui-fg-muted);
+  --color-border: var(--ui-border);
+  --color-border-strong: var(--ui-border-strong);
+  --color-ring: var(--ui-ring);
+  --color-primary: var(--ui-primary);
+  --color-primary-hover: var(--ui-primary-hover);
+  --color-primary-edge: var(--ui-primary-edge);
+  --color-primary-fg: var(--ui-primary-fg);
+  --color-secondary: var(--ui-secondary);
+  --color-secondary-hover: var(--ui-secondary-hover);
+  --color-danger: var(--ui-danger);
+  --color-danger-hover: var(--ui-danger-hover);
+  --color-danger-edge: var(--ui-danger-edge);
+  --color-danger-fg: var(--ui-danger-fg);
+  --color-success: var(--ui-success);
+  --color-success-fg: var(--ui-success-fg);
+  --color-warning: var(--ui-warning);
+  --color-warning-fg: var(--ui-warning-fg);
+  --color-info: var(--ui-info);
+  --color-info-fg: var(--ui-info-fg);
+  --color-tone-secondary: var(--ui-tone-secondary);
+  --color-tone-secondary-fg: var(--ui-tone-secondary-fg);
+  --color-tone-tertiary: var(--ui-tone-tertiary);
+  --color-tone-tertiary-fg: var(--ui-tone-tertiary-fg);
+}
+
+@layer base {
+  html {
+    font-family: var(--font-sans);
+    font-feature-settings: "ss01" 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  body {
+    background-color: var(--color-bg);
+    color: var(--color-fg);
+  }
+}
+
+/*
+ * Experimental: running-light loading indicator for Button (loadingIndicator="orbit").
+ * A conic gradient rotates around the button and is masked down to a thin ring.
+ * Tweak per button or app with --ui-orbit-color, --ui-orbit-width, --ui-orbit-speed.
+ */
+@property --ui-orbit-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+
+@keyframes ui-orbit {
+  to {
+    --ui-orbit-angle: 360deg;
+  }
+}
+
+@keyframes ui-orbit-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+@layer components {
+  .ui-btn-orbit-glow {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    filter: drop-shadow(0 0 3px var(--ui-orbit-color));
+  }
+
+  .ui-btn-orbit {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: var(--ui-orbit-width, 2px);
+    background: conic-gradient(
+      from var(--ui-orbit-angle),
+      transparent 0turn 0.55turn,
+      color-mix(in srgb, var(--ui-orbit-color) 35%, transparent) 0.8turn,
+      var(--ui-orbit-color) 0.97turn,
+      transparent 1turn
+    );
+    /* keep only the ring between the padding edge and the content box */
+    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+    -webkit-mask-composite: xor;
+    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+    animation: ui-orbit var(--ui-orbit-speed, 1.1s) linear infinite;
+  }
+
+  /* With reduced motion, the whole ring gently pulses instead of running. */
+  @media (prefers-reduced-motion: reduce) {
+    .ui-btn-orbit {
+      background: var(--ui-orbit-color);
+      animation: ui-orbit-pulse 1.6s ease-in-out infinite;
+    }
+  }
+}
+
+/* Modal animations */
+@keyframes ui-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes ui-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+@keyframes ui-modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.98);
+  }
+}
+@keyframes ui-modal-out {
+  to {
+    opacity: 0;
+    transform: translateY(6px) scale(0.985);
+  }
+}
+
+/*
+ * Experimental: progress loading indicator for Button (loadingIndicator="progress").
+ * Without a `progress` value it creeps toward ~92% and completes when the work ends.
+ * Tweak with --ui-progress-fill, --ui-progress-bar, --ui-progress-height, --ui-progress-duration.
+ */
+@keyframes ui-progress-creep {
+  from {
+    width: 0%;
+  }
+  15% {
+    width: 34%;
+  }
+  45% {
+    width: 66%;
+  }
+  to {
+    width: 92%;
+  }
+}
+
+/*
+ * Rich text styles. Used by Editor, and for showing saved HTML:
+ *   <div className="ui-prose" dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />
+ */
+@layer components {
+  .ui-prose {
+    color: var(--color-fg);
+    font-size: 0.9375rem;
+    line-height: 1.65;
+    overflow-wrap: anywhere;
+  }
+  .ui-prose > * + * {
+    margin-top: 0.75em;
+  }
+  .ui-prose h2 {
+    font-size: 1.25em;
+    font-weight: 600;
+    line-height: 1.3;
+    letter-spacing: -0.01em;
+    margin-top: 1.4em;
+  }
+  .ui-prose h1 {
+    font-family: var(--font-heading);
+    font-size: 1.75em;
+    font-weight: 600;
+    line-height: 1.15;
+    letter-spacing: -0.02em;
+    text-wrap: balance;
+  }
+  .ui-prose h2,
+  .ui-prose h3,
+  .ui-prose h4 {
+    font-family: var(--font-heading);
+    text-wrap: balance;
+  }
+  .ui-prose h4 {
+    font-size: 1em;
+    font-weight: 600;
+    margin-top: 1.2em;
+  }
+  .ui-prose img,
+  .ui-prose video {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius-control-lg);
+  }
+  .ui-prose figcaption {
+    margin-top: 0.5em;
+    font-size: 0.85em;
+    color: var(--color-fg-muted);
+  }
+  .ui-prose pre {
+    overflow-x: auto;
+    padding: 0.85em 1em;
+    border-radius: var(--radius-control);
+    background: var(--color-secondary-hover);
+    font-size: 0.85em;
+    line-height: 1.6;
+  }
+  .ui-prose pre code {
+    background: none;
+    padding: 0;
+    font-size: inherit;
+  }
+  .ui-prose table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.9em;
+    font-variant-numeric: tabular-nums;
+  }
+  .ui-prose th {
+    text-align: left;
+    font-weight: 600;
+    border-bottom: 1px solid var(--color-border-strong);
+    padding: 0.5em 0.75em 0.5em 0;
+  }
+  .ui-prose td {
+    border-bottom: 1px solid var(--color-border);
+    padding: 0.5em 0.75em 0.5em 0;
+  }
+  .ui-prose mark {
+    background: color-mix(in srgb, var(--color-warning) 28%, transparent);
+    color: inherit;
+    border-radius: 2px;
+    padding: 0 0.1em;
+  }
+  .ui-prose h3 {
+    font-size: 1.075em;
+    font-weight: 600;
+    line-height: 1.35;
+    margin-top: 1.2em;
+  }
+  .ui-prose > :first-child {
+    margin-top: 0;
+  }
+  .ui-prose h2 + *,
+  .ui-prose h3 + * {
+    margin-top: 0.4em;
+  }
+  .ui-prose a {
+    color: var(--color-primary);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+  }
+  .ui-prose strong {
+    font-weight: 600;
+  }
+  .ui-prose ul,
+  .ui-prose ol {
+    padding-left: 1.4em;
+  }
+  .ui-prose ul {
+    list-style: disc;
+  }
+  .ui-prose ol {
+    list-style: decimal;
+  }
+  .ui-prose li + li,
+  .ui-prose li > ul,
+  .ui-prose li > ol {
+    margin-top: 0.25em;
+  }
+  .ui-prose li::marker {
+    color: var(--color-fg-muted);
+  }
+  .ui-prose li > p {
+    margin: 0;
+  }
+  .ui-prose blockquote {
+    border-left: 3px solid var(--color-border-strong);
+    padding-left: 0.9em;
+    color: var(--color-fg-muted);
+  }
+  .ui-prose code {
+    font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
+    font-size: 0.875em;
+    background: var(--color-secondary-hover);
+    border-radius: 0.25rem;
+    padding: 0.1em 0.3em;
+  }
+  .ui-prose hr {
+    border: 0;
+    border-top: 1px solid var(--color-border);
+    margin-block: 1.25em;
+  }
+
+  /* Editor-only: placeholder on the empty first line */
+  .ui-editor-content p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    color: color-mix(in srgb, var(--color-fg-muted) 75%, transparent);
+    float: left;
+    height: 0;
+    pointer-events: none;
+  }
+  .ui-editor-content {
+    min-height: inherit;
+  }
+}
+
+
+/* Activity indicators */
+@keyframes ui-dot {
+  0%, 80%, 100% {
+    transform: scale(0.55);
+    opacity: 0.35;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes ui-eq {
+  0%, 100% {
+    transform: scaleY(0.3);
+  }
+  50% {
+    transform: scaleY(1);
+  }
+}
+@keyframes ui-beacon {
+  from {
+    transform: scale(0.4);
+    opacity: 0.7;
+  }
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+@keyframes ui-indeterminate {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(250%);
+  }
+}
+@keyframes ui-shimmer {
+  from {
+    background-position: 150% 0;
+  }
+  to {
+    background-position: -50% 0;
+  }
+}
+@keyframes ui-breathe {
+  50% {
+    opacity: 0.45;
+  }
+}
+
+@layer components {
+  .ui-skeleton {
+    background-color: var(--color-secondary-hover);
+    background-image: linear-gradient(
+      90deg,
+      transparent 0%,
+      color-mix(in srgb, var(--color-surface) 70%, transparent) 50%,
+      transparent 100%
+    );
+    background-size: 50% 100%;
+    background-repeat: no-repeat;
+    animation: ui-shimmer 1.5s ease-in-out infinite;
+  }
+  .ui-skeleton-pulse {
+    background-color: var(--color-secondary-hover);
+    animation: ui-breathe 1.8s ease-in-out infinite;
+  }
+  .ui-skeleton-still {
+    background-color: var(--color-secondary-hover);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ui-skeleton-pulse {
+      animation: ui-breathe 2.6s ease-in-out infinite;
+    }
+    .ui-skeleton {
+      background-image: none;
+      animation: ui-breathe 2s ease-in-out infinite;
+    }
+  }
+  /* The orbit indicator: a ring with a fading tail, spinning */
+  .ui-orbit-ring {
+    border-radius: 9999px;
+    background: conic-gradient(from 0deg, transparent 0turn 0.35turn, color-mix(in srgb, var(--ai) 30%, transparent) 0.7turn, var(--ai) 0.98turn, transparent 1turn);
+    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ai-thickness, 3px)), #000 calc(100% - var(--ai-thickness, 3px) + 0.5px));
+    mask: radial-gradient(farthest-side, transparent calc(100% - var(--ai-thickness, 3px)), #000 calc(100% - var(--ai-thickness, 3px) + 0.5px));
+  }
+}
+@keyframes ui-stripes {
+  from {
+    background-position: 14px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+/* Avatar initials: a soft color picked from the name (the hue is set per avatar). */
+@layer components {
+  .ui-avatar-initials {
+    background: hsl(var(--av-h, 215) 58% 91%);
+    color: hsl(var(--av-h, 215) 42% 30%);
+  }
+  .dark .ui-avatar-initials {
+    background: hsl(var(--av-h, 215) 28% 24%);
+    color: hsl(var(--av-h, 215) 62% 84%);
+  }
+}
+
+/* Dropdown menus */
+@keyframes ui-menu-down {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+  }
+}
+@keyframes ui-menu-up {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.98);
+  }
+}
+
+/* DataTable refresh indicators */
+@keyframes ui-border-run {
+  from {
+    stroke-dashoffset: var(--o, 0);
+  }
+  to {
+    stroke-dashoffset: calc(var(--o, 0) - 100);
+  }
+}
+@keyframes ui-sweep {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes ui-refresh-done {
+  from {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent);
+  }
+  to {
+    box-shadow: 0 0 0 3px transparent;
+  }
+}
+
+/* Timeline: the thread draws itself as it scrolls into view (where supported). */
+@keyframes ui-thread {
+  from {
+    transform: scaleY(0);
+  }
+  to {
+    transform: scaleY(1);
+  }
+}
+@layer components {
+  @supports (animation-timeline: view()) {
+    @media (prefers-reduced-motion: no-preference) {
+      .ui-thread-draw {
+        transform-origin: top;
+        animation: ui-thread linear both;
+        animation-timeline: view();
+        animation-range: entry 20% cover 45%;
+      }
+    }
+  }
+}
+
+/* Checkbox check mark draws in */
+@keyframes ui-check-draw {
+  from {
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+/* Toasts */
+@keyframes ui-toast-in-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(16px) scale(0.97);
+  }
+}
+@keyframes ui-toast-in-top {
+  from {
+    opacity: 0;
+    transform: translateY(-16px) scale(0.97);
+  }
+}
+@keyframes ui-toast-timer {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+/* Slider: the thumb turns into a frosted glass lens while pressed. */
+@layer components {
+  .ui-glass {
+    background: color-mix(in srgb, #ffffff 34%, transparent);
+    -webkit-backdrop-filter: blur(3px) saturate(1.9) brightness(1.08);
+    backdrop-filter: blur(3px) saturate(1.9) brightness(1.08);
+    box-shadow:
+      inset 0 1px 1px rgb(255 255 255 / 0.85),
+      inset 0 -3px 6px rgb(255 255 255 / 0.18),
+      inset 0 0 0 1px rgb(255 255 255 / 0.55),
+      0 6px 16px -4px rgb(0 0 0 / 0.28),
+      0 0 0 0.5px color-mix(in srgb, var(--sl, var(--color-primary)) 30%, transparent);
+  }
+  .dark .ui-glass {
+    background: color-mix(in srgb, #ffffff 12%, transparent);
+    box-shadow:
+      inset 0 1px 1px rgb(255 255 255 / 0.45),
+      inset 0 -3px 6px rgb(255 255 255 / 0.08),
+      inset 0 0 0 1px rgb(255 255 255 / 0.28),
+      0 6px 16px -4px rgb(0 0 0 / 0.6),
+      0 0 0 1px color-mix(in srgb, var(--sl, var(--color-primary)) 45%, transparent);
+  }
+  /* A soft specular highlight across the top of the glass. */
+  .ui-glass::after {
+    content: "";
+    position: absolute;
+    inset: 8% 16% 55% 16%;
+    border-radius: 9999px;
+    background: linear-gradient(to bottom, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0));
+    pointer-events: none;
+  }
+}
+
+/* Chart palette (Dashboard widgets). Override per theme. */
+:root {
+  --ui-chart-1: #0d6efd;
+  --ui-chart-2: #0d9488;
+  --ui-chart-3: #ea580c;
+  --ui-chart-4: #7c3aed;
+  --ui-chart-5: #db2777;
+  --ui-chart-6: #ca8a04;
+  --ui-chart-grid: rgb(29 33 38 / 0.08);
+}
+.dark {
+  --ui-chart-1: #4d94fd;
+  --ui-chart-2: #2dd4bf;
+  --ui-chart-3: #fb923c;
+  --ui-chart-4: #a78bfa;
+  --ui-chart-5: #f472b6;
+  --ui-chart-6: #facc15;
+  --ui-chart-grid: rgb(246 247 249 / 0.08);
+}
+@keyframes ui-chart-draw {
+  from {
+    stroke-dashoffset: 1;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes ui-chart-grow {
+  from {
+    transform: scaleY(0);
+  }
+}
+@keyframes ui-chart-fade {
+  from {
+    opacity: 0;
+  }
+}
+
+/* Dashboard: widgets rise in one after another on first load (DashboardGrid animate). */
+@keyframes ui-rise {
+  from {
+    opacity: 0;
+    transform: translateY(14px) scale(0.985);
+  }
+}
+@layer components {
+  @media (prefers-reduced-motion: no-preference) {
+    .ui-dash-enter > * {
+      animation: ui-rise 560ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
+    }
+    .ui-dash-enter > :nth-child(2) { animation-delay: 60ms; }
+    .ui-dash-enter > :nth-child(3) { animation-delay: 120ms; }
+    .ui-dash-enter > :nth-child(4) { animation-delay: 180ms; }
+    .ui-dash-enter > :nth-child(5) { animation-delay: 240ms; }
+    .ui-dash-enter > :nth-child(6) { animation-delay: 300ms; }
+    .ui-dash-enter > :nth-child(7) { animation-delay: 360ms; }
+    .ui-dash-enter > :nth-child(8) { animation-delay: 420ms; }
+    .ui-dash-enter > :nth-child(n + 9) { animation-delay: 480ms; }
+  }
+}
+/* A KPI value glows briefly when it changes (live updates). */
+@keyframes ui-kpi-flash {
+  0% {
+    background-color: color-mix(in srgb, var(--kpi-flash, var(--color-primary)) 18%, transparent);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+/* IconButton: press ripple, toggle pop and burst */
+@keyframes ui-icon-ripple {
+  from {
+    transform: scale(0.4);
+    opacity: 0.35;
+  }
+  to {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}
+@keyframes ui-icon-pop {
+  0% {
+    transform: scale(0.6);
+  }
+  45% {
+    transform: scale(1.28);
+  }
+  75% {
+    transform: scale(0.94);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes ui-icon-burst {
+  0% {
+    transform: rotate(var(--a)) translateY(0) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(0.3);
+    opacity: 0;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * Layout primitives (Stack, Grid, GridItem)
+ *
+ * The components set CSS custom properties; the rules below read them, including
+ * inside media queries. Doing it this way means a responsive prop needs no class
+ * names generated at runtime, so it survives a packaged build.
+ * ------------------------------------------------------------------------- */
+[data-ui-stack] {
+  display: flex;
+  flex-direction: var(--ui-dir, column);
+  gap: calc(var(--spacing) * var(--ui-gap, 4));
+  align-items: var(--ui-align, stretch);
+  justify-content: var(--ui-justify, flex-start);
+  flex-wrap: var(--ui-wrap, nowrap);
+}
+
+[data-ui-grid] {
+  display: grid;
+  grid-template-columns: var(--ui-cols, repeat(1, minmax(0, 1fr)));
+  gap: calc(var(--spacing) * var(--ui-gap, 4));
+  align-items: var(--ui-align, stretch);
+  justify-items: var(--ui-justify-items, stretch);
+}
+
+[data-ui-span] {
+  grid-column: span min(var(--ui-span, 1), var(--ui-cols-count, 12)) / span min(var(--ui-span, 1), var(--ui-cols-count, 12));
+  grid-row: span var(--ui-row-span, 1) / span var(--ui-row-span, 1);
+}
+
+@media (min-width: 40rem) {
+  [data-ui-stack] {
+    flex-direction: var(--ui-dir-sm, var(--ui-dir, column));
+    gap: calc(var(--spacing) * var(--ui-gap-sm, var(--ui-gap, 4)));
+    align-items: var(--ui-align-sm, var(--ui-align, stretch));
+    justify-content: var(--ui-justify-sm, var(--ui-justify, flex-start));
+  }
+  [data-ui-grid] {
+    grid-template-columns: var(--ui-cols-sm, var(--ui-cols, repeat(1, minmax(0, 1fr))));
+    gap: calc(var(--spacing) * var(--ui-gap-sm, var(--ui-gap, 4)));
+  }
+  [data-ui-span] {
+    grid-column: span min(var(--ui-span-sm, var(--ui-span, 1)), var(--ui-cols-count, 12)) / span min(var(--ui-span-sm, var(--ui-span, 1)), var(--ui-cols-count, 12));
+  }
+}
+
+@media (min-width: 48rem) {
+  [data-ui-stack] {
+    flex-direction: var(--ui-dir-md, var(--ui-dir-sm, var(--ui-dir, column)));
+    gap: calc(var(--spacing) * var(--ui-gap-md, var(--ui-gap-sm, var(--ui-gap, 4))));
+    align-items: var(--ui-align-md, var(--ui-align-sm, var(--ui-align, stretch)));
+    justify-content: var(--ui-justify-md, var(--ui-justify-sm, var(--ui-justify, flex-start)));
+  }
+  [data-ui-grid] {
+    grid-template-columns: var(--ui-cols-md, var(--ui-cols-sm, var(--ui-cols, repeat(1, minmax(0, 1fr)))));
+    gap: calc(var(--spacing) * var(--ui-gap-md, var(--ui-gap-sm, var(--ui-gap, 4))));
+  }
+  [data-ui-span] {
+    grid-column: span min(var(--ui-span-md, var(--ui-span-sm, var(--ui-span, 1))), var(--ui-cols-count, 12)) / span min(var(--ui-span-md, var(--ui-span-sm, var(--ui-span, 1))), var(--ui-cols-count, 12));
+  }
+}
+
+@media (min-width: 64rem) {
+  [data-ui-stack] {
+    flex-direction: var(--ui-dir-lg, var(--ui-dir-md, var(--ui-dir-sm, var(--ui-dir, column))));
+    gap: calc(var(--spacing) * var(--ui-gap-lg, var(--ui-gap-md, var(--ui-gap-sm, var(--ui-gap, 4)))));
+    align-items: var(--ui-align-lg, var(--ui-align-md, var(--ui-align-sm, var(--ui-align, stretch))));
+    justify-content: var(--ui-justify-lg, var(--ui-justify-md, var(--ui-justify-sm, var(--ui-justify, flex-start))));
+  }
+  [data-ui-grid] {
+    grid-template-columns: var(--ui-cols-lg, var(--ui-cols-md, var(--ui-cols-sm, var(--ui-cols, repeat(1, minmax(0, 1fr))))));
+    gap: calc(var(--spacing) * var(--ui-gap-lg, var(--ui-gap-md, var(--ui-gap-sm, var(--ui-gap, 4)))));
+  }
+  [data-ui-span] {
+    grid-column: span min(var(--ui-span-lg, var(--ui-span-md, var(--ui-span-sm, var(--ui-span, 1)))), var(--ui-cols-count, 12)) / span min(var(--ui-span-lg, var(--ui-span-md, var(--ui-span-sm, var(--ui-span, 1)))), var(--ui-cols-count, 12));
+  }
+}
+
+/* Hero: drifting aurora clouds, an endless logo strip, and a gentle float. */
+@keyframes ui-aurora {
+  0% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  33% {
+    transform: translate3d(6%, -4%, 0) scale(1.12);
+  }
+  66% {
+    transform: translate3d(-5%, 5%, 0) scale(0.95);
+  }
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+@keyframes ui-marquee {
+  to {
+    transform: translateX(-50%);
+  }
+}
+@keyframes ui-float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}