@ac-design/design-system 1.0.3 → 2.1.0

package/dist/lib/theme.css

@@ -1,29 +1,29 @@
 /*
- * AppsCode design tokens as a Tailwind v4 theme.
- * Values come from design-system/src/components/vue-components/styles/base/utilities
- * (_root-variables.scss, _colors.scss, _typography.scss, _global.scss).
+ * AppsCode design tokens as a Tailwind v4 theme, in the look of the AppsCode Cloud console (cloud-ui):
+ * neutral greys on a #f9fafb canvas, the #00a651 brand green, Roboto for the interface,
+ * Google Sans Flex for headings and JetBrains Mono for code. Controls are 10px round, surfaces 14px.
  * Tailwind's default palette, radii and shadows are cleared so only AppsCode values exist.
- *
- * v0.2 "premium" refinements on top of the source values: Geist type, surface and ring tokens,
- * a softer layered elevation scale, and 6/10px radii for controls and surfaces.
- * The brand and status colour scales are unchanged.
+ * Token names are kept from v1.0 so apps keep working; only their values follow cloud-ui.
  *
  * Consumers: @import "tailwindcss"; then @import this file. Load the fonts once:
- *   import "@fontsource-variable/geist"; import "@fontsource-variable/geist-mono";
+ *   import "@fontsource-variable/roboto";
+ *   import "@fontsource-variable/google-sans-flex/opsz.css";
+ *   import "@fontsource-variable/jetbrains-mono";
  */
 @source "./components";
 @source "./editor";
+@source "./charts";
 /* Dark mode is class-based: `.dark` (new) or `.is-dark-theme` (the old library's class) on <html> or any subtree. */
 @custom-variant dark (&:where(.dark, .dark *, .is-dark-theme, .is-dark-theme *));
 :root {
   /* Runtime brand hue — change these on <html> to re-hue every primary/secondary step.
-     26% lightness is the AA limit (4.5:1 with white text) for the default hue. */
-  /* Interface scale: 1 = the 13px base. Set it on <html> (see useFontScale) and text, line heights, spacing
+     32.5% lightness is #00a651, the cloud-ui green (3.2:1 with white text; see the Theming page). */
+  /* Interface scale: 1 = the 14px base. Set it on <html> (see useFontScale) and text, line heights, spacing
      and radii grow together, so layouts keep their proportions. */
   --ac-scale: 1;
   --primary-hue: 149;
   --primary-saturation: 100%;
-  --primary-light: 26%;
+  --primary-light: 32.5%;
   --secondary-hue: 196;
   --secondary-saturation: 50%;
   --secondary-light: 20%;
@@ -37,10 +37,16 @@
   /* Logo colours: exact brand values, the same in both themes. */
   --color-brand-navy: #193d4b;
   --color-brand-green: #00a651;
+  /* AcThemeMode's toggle, as cloud-ui's ThemeSwitcher: fixed in both themes like the brand colours */
+  --color-theme-sun: #ffbb52;
+  --color-theme-sun-soft: #ffeccf;
+  --color-theme-moon: #485367;
 
   /* ac-primary: AppsCode green */
   --color-primary: hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light));
-  --color-primary-hover: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-light) - 3%));
+  --color-primary-hover: hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light) / 0.9);
+  /* Primary text on tints and white: links, ghost and outline buttons, active tabs (cloud-ui success-strong) */
+  --color-primary-strong: hsl(var(--primary-hue) 94% 25%);
   --color-primary-5: hsl(var(--primary-hue) var(--primary-saturation) 5%);
   --color-primary-10: hsl(var(--primary-hue) var(--primary-saturation) 10%);
   --color-primary-20: hsl(var(--primary-hue) var(--primary-saturation) 20%);
@@ -76,79 +82,79 @@
   --color-secondary-dark-gray: hsl(var(--secondary-hue) 10% 10%);
 
   /* green */
-  --color-green-5: hsl(141 53% 5%);
-  --color-green-10: hsl(141 53% 10%);
-  --color-green-20: hsl(141 53% 20%);
-  --color-green-30: hsl(141 53% 30%);
-  --color-green-40: hsl(141 53% 40%);
-  --color-green-50: hsl(141 53% 50%);
-  --color-green-60: hsl(141 53% 60%);
-  --color-green-70: hsl(141 53% 70%);
-  --color-green-80: hsl(141 53% 80%);
-  --color-green-90: hsl(141 53% 90%);
-  --color-green-93: hsl(141 53% 93%);
-  --color-green-95: hsl(141 53% 95%);
-  --color-green-97: hsl(141 53% 97%);
+  --color-green-5: hsl(149 65% 5%);
+  --color-green-10: hsl(149 65% 10%);
+  --color-green-20: hsl(149 65% 20%);
+  --color-green-30: hsl(149 65% 30%);
+  --color-green-40: hsl(149 65% 40%);
+  --color-green-50: hsl(149 65% 50%);
+  --color-green-60: hsl(149 65% 60%);
+  --color-green-70: hsl(149 65% 70%);
+  --color-green-80: hsl(149 65% 80%);
+  --color-green-90: hsl(149 65% 90%);
+  --color-green-93: hsl(149 65% 93%);
+  --color-green-95: hsl(149 65% 95%);
+  --color-green-97: hsl(149 65% 97%);
 
   /* blue */
-  --color-blue-5: hsl(217 71% 5%);
-  --color-blue-10: hsl(217 71% 10%);
-  --color-blue-20: hsl(217 71% 20%);
-  --color-blue-30: hsl(217 71% 30%);
-  --color-blue-40: hsl(217 71% 40%);
-  --color-blue-50: hsl(217 71% 50%);
-  --color-blue-60: hsl(217 71% 60%);
-  --color-blue-70: hsl(217 71% 70%);
-  --color-blue-80: hsl(217 71% 80%);
-  --color-blue-90: hsl(217 71% 90%);
-  --color-blue-93: hsl(217 71% 93%);
-  --color-blue-95: hsl(217 71% 95%);
-  --color-blue-97: hsl(217 71% 97%);
+  --color-blue-5: hsl(215 85% 5%);
+  --color-blue-10: hsl(215 85% 10%);
+  --color-blue-20: hsl(215 85% 20%);
+  --color-blue-30: hsl(215 85% 30%);
+  --color-blue-40: hsl(215 85% 40%);
+  --color-blue-50: hsl(215 85% 50%);
+  --color-blue-60: hsl(215 85% 60%);
+  --color-blue-70: hsl(215 85% 70%);
+  --color-blue-80: hsl(215 85% 80%);
+  --color-blue-90: hsl(215 85% 90%);
+  --color-blue-93: hsl(215 85% 93%);
+  --color-blue-95: hsl(215 85% 95%);
+  --color-blue-97: hsl(215 85% 97%);
 
   /* purple */
-  --color-purple-5: hsl(286 66% 5%);
-  --color-purple-10: hsl(286 66% 10%);
-  --color-purple-20: hsl(286 66% 20%);
-  --color-purple-30: hsl(286 66% 30%);
-  --color-purple-40: hsl(286 66% 40%);
-  --color-purple-50: hsl(286 66% 50%);
-  --color-purple-60: hsl(286 66% 60%);
-  --color-purple-70: hsl(286 66% 70%);
-  --color-purple-80: hsl(286 66% 80%);
-  --color-purple-90: hsl(286 66% 90%);
-  --color-purple-93: hsl(286 66% 93%);
-  --color-purple-95: hsl(286 66% 95%);
-  --color-purple-97: hsl(286 66% 97%);
+  --color-purple-5: hsl(262 75% 5%);
+  --color-purple-10: hsl(262 75% 10%);
+  --color-purple-20: hsl(262 75% 20%);
+  --color-purple-30: hsl(262 75% 30%);
+  --color-purple-40: hsl(262 75% 40%);
+  --color-purple-50: hsl(262 75% 50%);
+  --color-purple-60: hsl(262 75% 60%);
+  --color-purple-70: hsl(262 75% 70%);
+  --color-purple-80: hsl(262 75% 80%);
+  --color-purple-90: hsl(262 75% 90%);
+  --color-purple-93: hsl(262 75% 93%);
+  --color-purple-95: hsl(262 75% 95%);
+  --color-purple-97: hsl(262 75% 97%);
 
   /* yellow */
-  --color-yellow-5: hsl(38 93% 5%);
-  --color-yellow-10: hsl(38 93% 10%);
-  --color-yellow-20: hsl(38 93% 20%);
-  --color-yellow-30: hsl(38 93% 30%);
-  --color-yellow-40: hsl(38 93% 40%);
-  --color-yellow-50: hsl(38 93% 50%);
-  --color-yellow-60: hsl(38 93% 60%);
-  --color-yellow-70: hsl(38 93% 70%);
-  --color-yellow-80: hsl(38 93% 80%);
-  --color-yellow-90: hsl(38 93% 90%);
-  --color-yellow-93: hsl(38 93% 93%);
-  --color-yellow-95: hsl(38 93% 95%);
-  --color-yellow-97: hsl(38 93% 97%);
+  --color-yellow-5: hsl(38 92% 5%);
+  --color-yellow-10: hsl(38 92% 10%);
+  --color-yellow-20: hsl(38 92% 20%);
+  --color-yellow-30: hsl(38 92% 30%);
+  --color-yellow-40: hsl(38 92% 40%);
+  --color-yellow-50: hsl(38 92% 50%);
+  --color-yellow-60: hsl(38 92% 60%);
+  --color-yellow-70: hsl(38 92% 70%);
+  --color-yellow-80: hsl(38 92% 80%);
+  --color-yellow-90: hsl(38 92% 90%);
+  --color-yellow-93: hsl(38 92% 93%);
+  --color-yellow-95: hsl(38 92% 95%);
+  --color-yellow-97: hsl(38 92% 97%);
 
   /* red */
-  --color-red-5: hsl(348 100% 5%);
-  --color-red-10: hsl(348 100% 10%);
-  --color-red-20: hsl(348 100% 20%);
-  --color-red-30: hsl(348 100% 30%);
-  --color-red-40: hsl(348 100% 40%);
-  --color-red-50: hsl(348 100% 50%);
-  --color-red-60: hsl(348 100% 60%);
-  --color-red-70: hsl(348 100% 70%);
-  --color-red-80: hsl(348 100% 80%);
-  --color-red-90: hsl(348 100% 90%);
-  --color-red-93: hsl(348 100% 93%);
-  --color-red-95: hsl(348 100% 95%);
-  --color-red-97: hsl(348 100% 97%);
+  --color-red-5: hsl(0 75% 5%);
+  --color-red-10: hsl(0 75% 10%);
+  --color-red-20: hsl(0 75% 20%);
+  --color-red-30: hsl(0 75% 30%);
+  --color-red-40: hsl(0 75% 40%);
+  --color-red-50: hsl(0 75% 50%);
+  --color-red-60: hsl(0 75% 60%);
+  --color-red-70: hsl(0 75% 70%);
+  --color-red-80: hsl(0 75% 80%);
+  --color-red-90: hsl(0 75% 90%);
+  --color-red-93: hsl(0 75% 93%);
+  --color-red-95: hsl(0 75% 95%);
+  --color-red-97: hsl(0 75% 97%);
 
   /* gray */
   --color-gray-5: hsl(0 0% 5%);
@@ -165,87 +171,117 @@
   --color-gray-95: hsl(0 0% 95%);
   --color-gray-97: hsl(0 0% 97%);
 
-  /* status */
-  /* 34% is the AA limit for white text (4.6:1); green-40 gave 3.5:1 */
-  --color-success: hsl(141 53% 34%);
-  --color-info: var(--color-blue-50);
-  --color-warning: var(--color-yellow-50);
-  --color-danger: var(--color-red-40);
-  /* Hover fills and text-on-warning are fixed values, not scale steps, so dark mode keeps them readable. */
-  --color-success-hover: hsl(141 53% 30%);
-  --color-info-hover: hsl(217 71% 42%);
-  --color-warning-hover: hsl(38 93% 58%);
-  --color-danger-hover: hsl(348 100% 33%);
-  --color-on-warning: hsl(38 93% 8%);
+  /* status: cloud-ui's success, info, warning, destructive and pending */
+  --color-success: #00a651;
+  --color-info: #0069ff;
+  --color-warning: #f59e0b;
+  --color-danger: #ef4444;
+  --color-pending: #8b5cf6;
+  /* Hover fills lighten to 90%, like cloud-ui's bg-x/90. */
+  --color-success-hover: rgb(0 166 81 / 0.9);
+  --color-info-hover: rgb(0 105 255 / 0.9);
+  --color-warning-hover: rgb(245 158 11 / 0.9);
+  --color-danger-hover: rgb(239 68 68 / 0.9);
+  --color-pending-hover: rgb(139 92 246 / 0.9);
+  --color-on-warning: #1c1300;
+  /* Status text on tints and plain surfaces: the AA-contrast variants (5:1 or more) */
+  --color-success-strong: #047a3c;
+  --color-info-strong: #0050c4;
+  --color-warning-strong: #a15c07;
+  --color-danger-strong: #c81e1e;
+  --color-pending-strong: #6d28d9;
 
-  /* slate: text and border ramp */
-  --color-slate-5: #020617;
-  --color-slate-10: #0f172a;
-  --color-slate-20: #1e293b;
-  --color-slate-30: #334155;
-  --color-slate-40: #475569;
-  --color-slate-50: #64748b;
-  --color-slate-60: #94a3b8;
-  --color-slate-70: #cbd5e1;
-  --color-slate-80: #e2e8f0;
-  --color-slate-90: #f1f5f9;
-  --color-slate-95: #f8fafc;
+  /* slate: the neutral text and border ramp (cloud-ui greys; the name is kept for compatibility) */
+  --color-slate-5: #0a0a0a;
+  --color-slate-10: #171717;
+  --color-slate-20: #252525;
+  --color-slate-30: #3d3d3d;
+  --color-slate-40: #4a4a4a;
+  --color-slate-50: #5c5c5c;
+  --color-slate-60: #8f8f8f;
+  --color-slate-70: #d6d6d6;
+  --color-slate-80: #ebebeb;
+  --color-slate-90: #f0f0f0;
+  --color-slate-95: #f7f7f7;
 
-  /* semantic text and borders (source: $color-heading, $color-text, …) */
-  --color-heading: var(--color-slate-5);
-  --color-body: var(--color-slate-30);
-  --color-label: var(--color-slate-40);
-  --color-muted: var(--color-slate-50);
-  --color-link: var(--color-slate-20);
-  --color-border-light: var(--color-slate-90);
-  --color-border: var(--color-slate-80);
-  --color-border-dark: var(--color-slate-70);
-  --color-sidebar: hsl(var(--primary-hue) 10% 5%);
+  /* semantic text and borders */
+  --color-heading: #252525;
+  --color-body: #252525;
+  --color-label: #252525;
+  --color-muted: #5c5c5c;
+  --color-link: #252525;
+  --color-border-light: #f0f0f0;
+  --color-border: #ebebeb;
+  --color-border-dark: #d6d6d6;
+  /* The dark sidebar and status bar variants */
+  --color-sidebar: #171717;
 
-  /* surfaces */
-  --color-surface: var(--color-white);
-  --color-surface-muted: var(--color-slate-95);
-  --color-surface-sunken: var(--color-slate-90);
-  /* focus ring: a translucent primary halo, drawn 3px around focused controls */
-  --color-ring: hsl(var(--primary-hue) var(--primary-saturation) 40% / 0.28);
+  /* surfaces: white cards on a #f9fafb page; fields sit on the page tone */
+  --color-background: #f9fafb;
+  --color-surface: #ffffff;
+  --color-surface-muted: #f8f8f8;
+  /* Light sidebar panel: the muted surface by day, cloud-ui's #171717 sidebar by night */
+  --color-sidebar-panel: #fafafa;
+  --color-surface-sunken: #f0f0f0;
+  /* Neutral interaction tints: row hover, selected list item, soft chips */
+  --color-accent: #eaf0f4;
+  --color-accent-hover: #f2f9fd;
+  --color-accent-active: #dae9f5;
+  /* Focus: a solid primary ring, 2px, offset 2px on buttons */
+  --color-ring: hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light));
   /* modal and drawer backdrop */
-  --color-overlay: rgb(2 6 23 / 0.4);
+  --color-overlay: rgb(0 0 0 / 0.6);
+  /* Tooltips: a near-black bubble in both themes */
+  --color-tooltip: #171717;
+  --color-on-tooltip: #f5f5f5;
+
+  /* Chart palette (the /charts entry), in a fixed order: brand green, blue, amber, violet, red, cyan, then two
+     neutral greys for "Other" and remaining capacity. Adjacent hues stay apart under colour-blindness simulation. */
+  --color-chart-1: hsl(var(--primary-hue) var(--primary-saturation) var(--primary-light));
+  --color-chart-2: #0069ff;
+  --color-chart-3: #d97706;
+  --color-chart-4: #8b5cf6;
+  --color-chart-5: #ef4444;
+  --color-chart-6: #0891b2;
+  --color-chart-7: #737373;
+  --color-chart-8: #b5b5b5;
 
-  /* type — Geist for UI, Geist Mono for code and resource names */
-  --font-sans: "Geist Variable", "Geist", ui-sans-serif, system-ui, sans-serif;
-  --font-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
+  /* type — Roboto for the interface, Google Sans Flex for headings, JetBrains Mono for code */
+  --font-sans: "Roboto Variable", "Roboto", ui-sans-serif, system-ui, sans-serif;
+  --font-heading: "Google Sans Flex Variable", "Google Sans Flex", "Roboto Variable", "Roboto", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
   --text-xm: calc(10px * var(--ac-scale));
   --text-xm--line-height: calc(14px * var(--ac-scale));
   --text-sm: calc(11px * var(--ac-scale));
   --text-sm--line-height: calc(16px * var(--ac-scale));
   --text-xs: calc(12px * var(--ac-scale));
   --text-xs--line-height: calc(16px * var(--ac-scale));
-  --text-base: calc(13px * var(--ac-scale));
+  --text-base: calc(14px * var(--ac-scale));
   --text-base--line-height: calc(20px * var(--ac-scale));
-  --text-lg: calc(14px * var(--ac-scale));
-  --text-lg--line-height: calc(22px * var(--ac-scale));
-  --text-xl: calc(16px * var(--ac-scale));
-  --text-xl--line-height: calc(26px * var(--ac-scale));
-  --text-2xl: calc(18px * var(--ac-scale));
+  --text-lg: calc(16px * var(--ac-scale));
+  --text-lg--line-height: calc(24px * var(--ac-scale));
+  --text-xl: calc(18px * var(--ac-scale));
+  --text-xl--line-height: calc(28px * var(--ac-scale));
+  --text-2xl: calc(20px * var(--ac-scale));
   --text-2xl--line-height: calc(28px * var(--ac-scale));
   --text-3xl: calc(24px * var(--ac-scale));
   --text-3xl--line-height: calc(32px * var(--ac-scale));
   --text-3xl--letter-spacing: -0.02em;
   --text-4xl: calc(30px * var(--ac-scale));
-  --text-4xl--line-height: calc(38px * var(--ac-scale));
-  --text-4xl--letter-spacing: -0.025em;
+  --text-4xl--line-height: calc(36px * var(--ac-scale));
+  --text-4xl--letter-spacing: -0.02em;
   --text-5xl: calc(36px * var(--ac-scale));
-  --text-5xl--line-height: calc(44px * var(--ac-scale));
-  --text-5xl--letter-spacing: -0.03em;
-  --text-6xl: calc(42px * var(--ac-scale));
-  --text-6xl--line-height: calc(48px * var(--ac-scale));
+  --text-5xl--line-height: calc(40px * var(--ac-scale));
+  --text-5xl--letter-spacing: -0.025em;
+  --text-6xl: calc(48px * var(--ac-scale));
+  --text-6xl--line-height: calc(52px * var(--ac-scale));
   --text-6xl--letter-spacing: -0.03em;
-  --text-h1: calc(32px * var(--ac-scale));
-  --text-h2: calc(26px * var(--ac-scale));
-  --text-h3: calc(22px * var(--ac-scale));
+  --text-h1: calc(30px * var(--ac-scale));
+  --text-h2: calc(24px * var(--ac-scale));
+  --text-h3: calc(20px * var(--ac-scale));
   --text-h4: calc(18px * var(--ac-scale));
-  --text-h5: calc(15px * var(--ac-scale));
-  --text-h6: calc(13px * var(--ac-scale));
+  --text-h5: calc(16px * var(--ac-scale));
+  --text-h6: calc(14px * var(--ac-scale));
 
   /* spacing: 1 unit = 4px, so p-4 = 16px like the source .p-16 */
   --spacing: calc(4px * var(--ac-scale));
@@ -265,32 +301,54 @@
   --container-5xl: 1024px;
   --container-6xl: 1152px;
   --container-7xl: 1280px;
+  /* cloud-ui's page width (custom-container) */
+  --container-page: 1200px;
 
-  /* radius: 6px on controls, 10px on surfaces; the source steps are kept for old classes */
+  /* radius: 10px on controls, 14px on cards, 16px on dialogs, 8px on menu items; older steps are kept for apps */
   --radius-2: calc(2px * var(--ac-scale));
   --radius-4: calc(4px * var(--ac-scale));
   --radius-6: calc(6px * var(--ac-scale));
   --radius-8: calc(8px * var(--ac-scale));
   --radius-10: calc(10px * var(--ac-scale));
   --radius-12: calc(12px * var(--ac-scale));
+  --radius-14: calc(14px * var(--ac-scale));
   --radius-16: calc(16px * var(--ac-scale));
   --radius-50: calc(50px * var(--ac-scale));
 
-  /* elevation: soft, slate-tinted, layered */
-  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.05);
-  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.06);
-  --shadow-md: 0 2px 4px -1px rgb(15 23 42 / 0.05), 0 4px 10px -2px rgb(15 23 42 / 0.07);
-  --shadow-lg: 0 4px 6px -2px rgb(15 23 42 / 0.04), 0 12px 24px -4px rgb(15 23 42 / 0.10);
-  --shadow-xl: 0 8px 16px -4px rgb(15 23 42 / 0.06), 0 24px 48px -12px rgb(15 23 42 / 0.18);
-  /* a 1px white top highlight for solid buttons */
-  --shadow-button: inset 0 1px 0 0 rgb(255 255 255 / 0.14), 0 1px 2px 0 rgb(15 23 42 / 0.12);
-  --inset-shadow-xs: inset 0 1px 1px rgb(15 23 42 / 0.04);
+  /* elevation: cloud-ui's neutral scale. Cards rest on a border, not a shadow. */
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  /* Raised card on hover */
+  --shadow-card: 0 2px 4px rgb(15 23 42 / 0.04), 0 12px 24px -6px rgb(15 23 42 / 0.1);
+  /* Solid buttons */
+  --shadow-button: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.04);
 
   --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
 
   --animate-shake: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
-  --animate-fade-in: fade-in 0.16s var(--ease-out-soft) both;
-  --animate-pop-in: pop-in 0.2s var(--ease-out-soft) both;
+  --animate-fade-in: fade-in 0.15s var(--ease-out-soft) both;
+  --animate-pop-in: pop-in 0.15s var(--ease-out-soft) both;
+  /* AcLoader, cloud-ui's page loader: an eased arc, a breathing glow and three dots, each dot with its own delay */
+  --animate-loader-spin: loader-spin 0.85s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+  --animate-loader-glow: loader-glow 1.7s ease-in-out infinite;
+  --animate-loader-dot-1: loader-dot 1.2s ease-in-out infinite;
+  --animate-loader-dot-2: loader-dot 1.2s ease-in-out 0.15s infinite;
+  --animate-loader-dot-3: loader-dot 1.2s ease-in-out 0.3s infinite;
+  @keyframes loader-spin {
+    to { transform: rotate(360deg); }
+  }
+  @keyframes loader-glow {
+    0%, 100% { opacity: 0.5; transform: scale(1); }
+    50% { opacity: 0.15; transform: scale(1.15); }
+  }
+  @keyframes loader-dot {
+    0%, 70%, 100% { opacity: 0.4; transform: scale(1) translateY(0); }
+    35% { opacity: 1; transform: scale(1.2) translateY(-2px); }
+  }
   @keyframes shake {
     10%, 90% { transform: translate3d(-1px, 0, 0); }
     20%, 80% { transform: translate3d(2px, 0, 0); }
@@ -302,7 +360,7 @@
     to { opacity: 1; }
   }
   @keyframes pop-in {
-    from { opacity: 0; transform: translateY(4px) scale(0.98); }
+    from { opacity: 0; transform: scale(0.95); }
     to { opacity: 1; transform: none; }
   }
 }
@@ -314,9 +372,8 @@
 .dark,
 .is-dark-theme {
   color-scheme: dark;
-  /* primary: the solid fill is lifted 4% so it keeps its look (and reads as text) on dark surfaces */
-  --color-primary: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-light) + 4%));
-  --color-primary-hover: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-light) + 1%));
+  /* primary: the same green fill as light mode, like cloud-ui; text on tints lifts to a light green */
+  --color-primary-strong: hsl(var(--primary-hue) 70% 58%);
   --color-primary-5: hsl(var(--primary-hue) var(--primary-saturation) 95%);
   --color-primary-10: hsl(var(--primary-hue) var(--primary-saturation) 90%);
   --color-primary-20: hsl(var(--primary-hue) var(--primary-saturation) 82%);
@@ -349,75 +406,75 @@
   --color-secondary-light-gray: hsl(var(--secondary-hue) 10% 12%);
   --color-secondary-dark-gray: hsl(var(--secondary-hue) 10% 90%);
   /* green */
-  --color-green-5: hsl(141 53% 95%);
-  --color-green-10: hsl(141 53% 90%);
-  --color-green-20: hsl(141 53% 82%);
-  --color-green-30: hsl(141 53% 72%);
-  --color-green-40: hsl(141 53% 62%);
-  --color-green-50: hsl(141 53% 52%);
-  --color-green-60: hsl(141 53% 42%);
-  --color-green-70: hsl(141 53% 32%);
-  --color-green-80: hsl(141 53% 55% / 0.32);
-  --color-green-90: hsl(141 53% 55% / 0.2);
-  --color-green-93: hsl(141 53% 55% / 0.15);
-  --color-green-95: hsl(141 53% 55% / 0.11);
-  --color-green-97: hsl(141 53% 55% / 0.07);
+  --color-green-5: hsl(149 65% 95%);
+  --color-green-10: hsl(149 65% 90%);
+  --color-green-20: hsl(149 65% 82%);
+  --color-green-30: hsl(149 65% 72%);
+  --color-green-40: hsl(149 65% 62%);
+  --color-green-50: hsl(149 65% 52%);
+  --color-green-60: hsl(149 65% 42%);
+  --color-green-70: hsl(149 65% 32%);
+  --color-green-80: hsl(149 65% 55% / 0.32);
+  --color-green-90: hsl(149 65% 55% / 0.2);
+  --color-green-93: hsl(149 65% 55% / 0.15);
+  --color-green-95: hsl(149 65% 55% / 0.11);
+  --color-green-97: hsl(149 65% 55% / 0.07);
   /* blue */
-  --color-blue-5: hsl(217 71% 95%);
-  --color-blue-10: hsl(217 71% 90%);
-  --color-blue-20: hsl(217 71% 82%);
-  --color-blue-30: hsl(217 71% 72%);
-  --color-blue-40: hsl(217 71% 62%);
-  --color-blue-50: hsl(217 71% 52%);
-  --color-blue-60: hsl(217 71% 42%);
-  --color-blue-70: hsl(217 71% 32%);
-  --color-blue-80: hsl(217 71% 55% / 0.32);
-  --color-blue-90: hsl(217 71% 55% / 0.2);
-  --color-blue-93: hsl(217 71% 55% / 0.15);
-  --color-blue-95: hsl(217 71% 55% / 0.11);
-  --color-blue-97: hsl(217 71% 55% / 0.07);
+  --color-blue-5: hsl(215 85% 95%);
+  --color-blue-10: hsl(215 85% 90%);
+  --color-blue-20: hsl(215 85% 82%);
+  --color-blue-30: hsl(215 85% 72%);
+  --color-blue-40: hsl(215 85% 62%);
+  --color-blue-50: hsl(215 85% 52%);
+  --color-blue-60: hsl(215 85% 42%);
+  --color-blue-70: hsl(215 85% 32%);
+  --color-blue-80: hsl(215 85% 55% / 0.32);
+  --color-blue-90: hsl(215 85% 55% / 0.2);
+  --color-blue-93: hsl(215 85% 55% / 0.15);
+  --color-blue-95: hsl(215 85% 55% / 0.11);
+  --color-blue-97: hsl(215 85% 55% / 0.07);
   /* purple */
-  --color-purple-5: hsl(286 66% 95%);
-  --color-purple-10: hsl(286 66% 90%);
-  --color-purple-20: hsl(286 66% 82%);
-  --color-purple-30: hsl(286 66% 72%);
-  --color-purple-40: hsl(286 66% 62%);
-  --color-purple-50: hsl(286 66% 52%);
-  --color-purple-60: hsl(286 66% 42%);
-  --color-purple-70: hsl(286 66% 32%);
-  --color-purple-80: hsl(286 66% 55% / 0.32);
-  --color-purple-90: hsl(286 66% 55% / 0.2);
-  --color-purple-93: hsl(286 66% 55% / 0.15);
-  --color-purple-95: hsl(286 66% 55% / 0.11);
-  --color-purple-97: hsl(286 66% 55% / 0.07);
+  --color-purple-5: hsl(262 75% 95%);
+  --color-purple-10: hsl(262 75% 90%);
+  --color-purple-20: hsl(262 75% 82%);
+  --color-purple-30: hsl(262 75% 72%);
+  --color-purple-40: hsl(262 75% 62%);
+  --color-purple-50: hsl(262 75% 52%);
+  --color-purple-60: hsl(262 75% 42%);
+  --color-purple-70: hsl(262 75% 32%);
+  --color-purple-80: hsl(262 75% 55% / 0.32);
+  --color-purple-90: hsl(262 75% 55% / 0.2);
+  --color-purple-93: hsl(262 75% 55% / 0.15);
+  --color-purple-95: hsl(262 75% 55% / 0.11);
+  --color-purple-97: hsl(262 75% 55% / 0.07);
   /* yellow */
-  --color-yellow-5: hsl(38 93% 95%);
-  --color-yellow-10: hsl(38 93% 90%);
-  --color-yellow-20: hsl(38 93% 82%);
-  --color-yellow-30: hsl(38 93% 72%);
-  --color-yellow-40: hsl(38 93% 62%);
-  --color-yellow-50: hsl(38 93% 52%);
-  --color-yellow-60: hsl(38 93% 42%);
-  --color-yellow-70: hsl(38 93% 32%);
-  --color-yellow-80: hsl(38 93% 55% / 0.32);
-  --color-yellow-90: hsl(38 93% 55% / 0.2);
-  --color-yellow-93: hsl(38 93% 55% / 0.15);
-  --color-yellow-95: hsl(38 93% 55% / 0.11);
-  --color-yellow-97: hsl(38 93% 55% / 0.07);
+  --color-yellow-5: hsl(38 92% 95%);
+  --color-yellow-10: hsl(38 92% 90%);
+  --color-yellow-20: hsl(38 92% 82%);
+  --color-yellow-30: hsl(38 92% 72%);
+  --color-yellow-40: hsl(38 92% 62%);
+  --color-yellow-50: hsl(38 92% 52%);
+  --color-yellow-60: hsl(38 92% 42%);
+  --color-yellow-70: hsl(38 92% 32%);
+  --color-yellow-80: hsl(38 92% 55% / 0.32);
+  --color-yellow-90: hsl(38 92% 55% / 0.2);
+  --color-yellow-93: hsl(38 92% 55% / 0.15);
+  --color-yellow-95: hsl(38 92% 55% / 0.11);
+  --color-yellow-97: hsl(38 92% 55% / 0.07);
   /* red */
-  --color-red-5: hsl(348 100% 95%);
-  --color-red-10: hsl(348 100% 90%);
-  --color-red-20: hsl(348 100% 82%);
-  --color-red-30: hsl(348 100% 72%);
-  --color-red-40: hsl(348 100% 62%);
-  --color-red-50: hsl(348 100% 52%);
-  --color-red-60: hsl(348 100% 42%);
-  --color-red-70: hsl(348 100% 32%);
-  --color-red-80: hsl(348 100% 55% / 0.32);
-  --color-red-90: hsl(348 100% 55% / 0.2);
-  --color-red-93: hsl(348 100% 55% / 0.15);
-  --color-red-95: hsl(348 100% 55% / 0.11);
-  --color-red-97: hsl(348 100% 55% / 0.07);
+  --color-red-5: hsl(0 75% 95%);
+  --color-red-10: hsl(0 75% 90%);
+  --color-red-20: hsl(0 75% 82%);
+  --color-red-30: hsl(0 75% 72%);
+  --color-red-40: hsl(0 75% 62%);
+  --color-red-50: hsl(0 75% 52%);
+  --color-red-60: hsl(0 75% 42%);
+  --color-red-70: hsl(0 75% 32%);
+  --color-red-80: hsl(0 75% 55% / 0.32);
+  --color-red-90: hsl(0 75% 55% / 0.2);
+  --color-red-93: hsl(0 75% 55% / 0.15);
+  --color-red-95: hsl(0 75% 55% / 0.11);
+  --color-red-97: hsl(0 75% 55% / 0.07);
   /* gray */
   --color-gray-5: hsl(0 0% 95%);
   --color-gray-10: hsl(0 0% 90%);
@@ -433,47 +490,66 @@
   --color-gray-95: hsl(0 0% 55% / 0.11);
   --color-gray-97: hsl(0 0% 55% / 0.07);
   /* slate: inverted so text stays light and borders stay subtle */
-  --color-slate-5: #f8fafc;
-  --color-slate-10: #f1f5f9;
-  --color-slate-20: #e2e8f0;
-  --color-slate-30: #cbd5e1;
-  --color-slate-40: #a3afc0;
-  --color-slate-50: #8792a6;
-  --color-slate-60: #64748b;
-  --color-slate-70: #3a475c;
-  --color-slate-80: #263245;
-  --color-slate-90: #1a2335;
-  --color-slate-95: #121a29;
-  /* status fills keep their light-mode strength so white text on them stays readable */
-  --color-success: hsl(141 53% 34%);
-  --color-info: hsl(217 71% 55%);
-  --color-warning: hsl(38 93% 50%);
-  --color-danger: hsl(348 90% 55%);
-  --color-success-hover: hsl(141 53% 31%);
-  --color-info-hover: hsl(217 71% 60%);
-  --color-warning-hover: hsl(38 93% 56%);
-  --color-danger-hover: hsl(348 90% 60%);
+  --color-slate-5: #fafafa;
+  --color-slate-10: #f0f0f0;
+  --color-slate-20: #e5e5e5;
+  --color-slate-30: #d0d0d0;
+  --color-slate-40: #b5b5b5;
+  --color-slate-50: #a3a3a3;
+  --color-slate-60: #737373;
+  --color-slate-70: #3a3a3a;
+  --color-slate-80: #2e2f2f;
+  --color-slate-90: #262626;
+  --color-slate-95: #1f1f1f;
+  /* status: cloud-ui's dark values; fills keep white text */
+  --color-success: #22c55e;
+  --color-info: #3b82f6;
+  --color-warning: #f59e0b;
+  --color-danger: #f87171;
+  --color-pending: #8b5cf6;
+  --color-success-hover: rgb(34 197 94 / 0.9);
+  --color-info-hover: rgb(59 130 246 / 0.9);
+  --color-warning-hover: rgb(245 158 11 / 0.9);
+  --color-danger-hover: rgb(248 113 113 / 0.9);
+  --color-pending-hover: rgb(139 92 246 / 0.9);
+  --color-success-strong: #4ade80;
+  --color-info-strong: #93c5fd;
+  --color-warning-strong: #fbbf24;
+  --color-danger-strong: #fca5a5;
+  --color-pending-strong: #c4b5fd;
+  /* chart palette: blue lifts for the dark surface; the greys swap so "Other" stays the quieter one */
+  --color-chart-2: #3b82f6;
+  --color-chart-7: #a3a3a3;
+  --color-chart-8: #5c5c5c;
   /* semantic aliases are repeated so a `.dark` subtree re-resolves them */
-  --color-heading: var(--color-slate-5);
-  --color-body: var(--color-slate-30);
-  --color-label: var(--color-slate-40);
-  --color-muted: var(--color-slate-50);
-  --color-link: var(--color-slate-20);
-  --color-border-light: var(--color-slate-90);
-  --color-border: var(--color-slate-80);
-  --color-border-dark: var(--color-slate-70);
-  --color-sidebar: hsl(var(--primary-hue) 10% 6%);
-  --color-surface: #0c1220;
-  --color-surface-muted: #111827;
-  --color-surface-sunken: #080d18;
-  --color-ring: hsl(var(--primary-hue) var(--primary-saturation) 55% / 0.35);
+  --color-heading: #fafafa;
+  --color-body: #fafafa;
+  --color-label: #fafafa;
+  --color-muted: #d0d0d0;
+  --color-link: #fafafa;
+  --color-border-light: #262626;
+  --color-border: #2e2f2f;
+  --color-border-dark: #3a3a3a;
+  --color-sidebar: #171717;
+  --color-background: #0a0a0a;
+  --color-surface: #171717;
+  --color-surface-muted: #1f1f1f;
+  --color-sidebar-panel: #171717;
+  --color-surface-sunken: #2c2c2c;
+  --color-accent: #2a3138;
+  --color-accent-hover: #323b44;
+  --color-accent-active: #3a4551;
+  --color-ring: hsl(var(--primary-hue) 71% 45%);
   --color-overlay: rgb(0 0 0 / 0.6);
+  --color-tooltip: #262626;
+  --color-on-tooltip: #f5f5f5;
   --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 1px 3px 0 rgb(0 0 0 / 0.25);
-  --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 0.3), 0 4px 10px -2px rgb(0 0 0 / 0.35);
-  --shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.3), 0 12px 24px -4px rgb(0 0 0 / 0.45);
-  --shadow-xl: 0 0 0 1px rgb(255 255 255 / 0.06), 0 8px 16px -4px rgb(0 0 0 / 0.4), 0 24px 48px -12px rgb(0 0 0 / 0.6);
-  --shadow-button: inset 0 1px 0 0 rgb(255 255 255 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.4);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.35), 0 1px 2px -1px rgb(0 0 0 / 0.35);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.55), 0 8px 10px -6px rgb(0 0 0 / 0.55);
+  --shadow-card: 0 2px 4px rgb(0 0 0 / 0.3), 0 12px 24px -6px rgb(0 0 0 / 0.5);
+  --shadow-button: 0 1px 3px 0 rgb(0 0 0 / 0.35), 0 1px 2px -1px rgb(0 0 0 / 0.35);
   --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.25);
 }
 
@@ -484,44 +560,67 @@
     text-rendering: optimizeLegibility;
   }
   body {
-    background-color: var(--color-surface);
+    background-color: var(--color-background);
     color: var(--color-body);
     font-family: var(--font-sans);
     font-size: var(--text-base);
+    font-weight: 450;
     line-height: var(--text-base--line-height);
+    letter-spacing: 0.005em;
+    font-optical-sizing: auto;
   }
-  h1, h2, h3, h4, h5, h6 { color: var(--color-heading); font-weight: 600; text-wrap: balance; }
-  h1 { font-size: var(--text-h1); line-height: calc(40px * var(--ac-scale)); letter-spacing: -0.03em; }
-  h2 { font-size: var(--text-h2); line-height: calc(34px * var(--ac-scale)); letter-spacing: -0.025em; }
-  h3 { font-size: var(--text-h3); line-height: calc(30px * var(--ac-scale)); letter-spacing: -0.02em; }
-  h4 { font-size: var(--text-h4); line-height: calc(26px * var(--ac-scale)); letter-spacing: -0.015em; }
-  h5 { font-size: var(--text-h5); line-height: calc(22px * var(--ac-scale)); letter-spacing: -0.01em; }
-  h6 { font-size: var(--text-h6); line-height: calc(20px * var(--ac-scale)); font-weight: 500; }
+  h1, h2, h3, h4, h5, h6 {
+    color: var(--color-heading);
+    font-family: var(--font-heading);
+    font-weight: 600;
+    line-height: 1.25;
+    text-wrap: balance;
+  }
+  h1 { font-size: var(--text-h1); font-weight: 700; letter-spacing: -0.02em; }
+  h2 { font-size: var(--text-h2); font-weight: 700; letter-spacing: -0.02em; }
+  h3 { font-size: var(--text-h3); letter-spacing: -0.012em; }
+  h4 { font-size: var(--text-h4); letter-spacing: -0.012em; }
+  h5 { font-size: var(--text-h5); letter-spacing: -0.008em; }
+  h6 { font-size: var(--text-h6); letter-spacing: -0.008em; }
+  /* cloud-ui's base rules: roomy paragraphs, medium labels, table headers and controls; components still set their own sizes */
+  p { text-wrap: pretty; line-height: 1.625; letter-spacing: 0.002em; }
+  label, th { font-weight: 500; letter-spacing: 0.002em; }
+  button, input, select, textarea { font-family: inherit; font-weight: 500; letter-spacing: inherit; }
   code, kbd, pre, samp { font-family: var(--font-mono); font-feature-settings: normal; }
   ::selection { background-color: var(--color-primary-90); color: var(--color-primary-10); }
-  :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
+  :focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
 }
 
 @utility text-code {
   font-family: var(--font-mono);
   font-size: calc(13px * var(--ac-scale));
-  letter-spacing: -0.01em;
+  letter-spacing: 0;
   color: var(--color-heading);
 }
 
-/* The standard focus treatment for form controls: solid primary border + soft halo. */
+/* The standard focus treatment for form controls: a solid primary border plus a 2px primary/20 halo. */
 @utility focus-ring {
   outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-ring);
+  /* cloud-ui's field focus: a 35% primary border inside a 2px 20% halo */
+  border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
+}
+
+/* Thin scrollbar: a 4px grey thumb, like cloud-ui's custom-scrollbar. */
+/* cloud-ui's `custom-container`: the page column, 1200px wide and centred, with 16px sides at every width. Pages add `py-8`. */
+@utility page-container {
+  width: 100%;
+  max-width: var(--container-page);
+  margin-inline: auto;
+  padding-inline: calc(var(--spacing) * 4);
 }
 
 @utility ac-scrollbar {
   overflow: auto;
   scrollbar-width: thin;
-  scrollbar-color: var(--color-slate-70) transparent;
-  &::-webkit-scrollbar { width: 6px; height: 6px; }
-  &::-webkit-scrollbar-thumb { background-color: var(--color-slate-70); border-radius: 50px; }
+  scrollbar-color: rgb(176 176 176 / 0.55) transparent;
+  &::-webkit-scrollbar { width: 4px; height: 4px; }
+  &::-webkit-scrollbar-thumb { background-color: #b0b0b0; border-radius: 9999px; }
   &::-webkit-scrollbar-track { background: transparent; }
 }
 
@@ -554,3 +653,8 @@
 @media (prefers-reduced-motion: reduce) {
   .ac-progress-indeterminate { animation: none; }
 }
+
+/* Charts (the /charts entry). ECharts draws on a canvas and gets its colours from the tokens in JS; this only keeps figures aligned. */
+[data-ac-chart] {
+  font-variant-numeric: tabular-nums;
+}