@ac-design/design-system 0.0.0-stage → 1.0.0

package/dist/lib/index.js

@@ -0,0 +1,78 @@
+import e from "./components/AcAccordion.js";
+import t from "./components/AcAccordionItem.js";
+import n from "./components/AcSpinner.js";
+import r from "./components/AcButton.js";
+import i from "./components/AcAlert.js";
+import a from "./components/AcLogo.js";
+import o from "./components/AcNavbarItem.js";
+import s from "./components/AcAppSwitcher.js";
+import c from "./components/AcAvatar.js";
+import l from "./components/AcBadge.js";
+import u from "./components/AcBanner.js";
+import d from "./components/AcBreadcrumb.js";
+import f from "./components/AcButtons.js";
+import p from "./components/AcCard.js";
+import m from "./components/AcPage.js";
+import h from "./components/AcModal.js";
+import g from "./components/AcSkeleton.js";
+import _ from "./components/AcTag.js";
+import v from "./components/AcTooltip.js";
+import y from "./components/AcCellValue.js";
+import b from "./components/AcCheckBox.js";
+import x from "./components/AcCheckRadio.js";
+import S from "./components/AcClusterSwitcher.js";
+import C from "./components/AcContentHeader.js";
+import w from "./components/AcContentLayout.js";
+import T from "./components/AcSearchBar.js";
+import E from "./components/AcContentTable.js";
+import D from "./components/AcDatePicker.js";
+import O from "./components/AcInput.js";
+import k from "./components/AcDeleteModal.js";
+import A from "./components/AcDivider.js";
+import j from "./components/AcDropdown.js";
+import M from "./components/AcDropdownDivider.js";
+import N from "./components/AcDropdownItem.js";
+import P from "./components/AcEmptyState.js";
+import F from "./components/AcFeatureCard.js";
+import I from "./components/AcFileUpload.js";
+import L from "./components/AcForm.js";
+import R from "./components/AcFormArray.js";
+import z from "./components/AcFormFooter.js";
+import B from "./components/AcFormSection.js";
+import V from "./components/AcHeader.js";
+import H from "./components/AcHeaderItem.js";
+import U from "./components/AcHeaderItems.js";
+import W from "./components/AcInfoTable.js";
+import G from "./components/AcKbd.js";
+import ee from "./components/AcNavbar.js";
+import K from "./components/AcNotificationMenu.js";
+import q from "./components/AcSelect.js";
+import J from "./components/AcPagination.js";
+import Y from "./components/AcPreloader.js";
+import X from "./components/AcProgress.js";
+import Z from "./components/AcResourceCard.js";
+import Q from "./components/AcSectionContent.js";
+import $ from "./components/AcSegmentedControl.js";
+import te from "./components/AcSidebar.js";
+import ne from "./components/AcSidebarItem.js";
+import re from "./components/AcSidebarSection.js";
+import ie from "./components/AcSidePanel.js";
+import ae from "./components/AcSideTabs.js";
+import oe from "./components/AcSlider.js";
+import se from "./components/AcStatCard.js";
+import ce from "./components/AcStatusBar.js";
+import le from "./components/AcSteps.js";
+import ue from "./components/AcSwitch.js";
+import de from "./components/AcTable.js";
+import fe from "./components/AcTabs.js";
+import pe from "./components/AcTextarea.js";
+import { useColorMode as me } from "./composables/useColorMode.js";
+import he from "./components/AcThemeMode.js";
+import { FONT_SCALES as ge, useFontScale as _e } from "./composables/useFontScale.js";
+import ve from "./components/AcFontScale.js";
+import { useToast as ye } from "./composables/useToast.js";
+import be from "./components/AcToaster.js";
+import xe from "./components/AcUsageCard.js";
+import Se from "./components/AcUserMenu.js";
+import { HSLToHex as Ce, HexToHSL as we, MIN_CONTRAST as Te, contrastOnWhite as Ee, getThemeHSL as De, hexToHsl as Oe, hslToHex as ke, readableLightness as Ae, setThemeHSL as je, useBrandColor as Me } from "./composables/useBrandColor.js";
+export { e as AcAccordion, t as AcAccordionItem, i as AcAlert, s as AcAppSwitcher, c as AcAvatar, l as AcBadge, u as AcBanner, d as AcBreadcrumb, r as AcButton, f as AcButtons, p as AcCard, y as AcCellValue, b as AcCheckBox, x as AcCheckRadio, S as AcClusterSwitcher, C as AcContentHeader, w as AcContentLayout, E as AcContentTable, D as AcDatePicker, k as AcDeleteConfirmationModal, k as AcDeleteModal, A as AcDivider, j as AcDropdown, M as AcDropdownDivider, N as AcDropdownItem, P as AcEmptyState, F as AcFeatureCard, I as AcFileUpload, ve as AcFontScale, L as AcForm, R as AcFormArray, z as AcFormFooter, B as AcFormSection, V as AcHeader, H as AcHeaderItem, U as AcHeaderItems, W as AcInfoTable, O as AcInput, G as AcKbd, a as AcLogo, h as AcModal, ee as AcNavbar, o as AcNavbarItem, K as AcNotificationMenu, m as AcPage, J as AcPagination, Y as AcPreloader, X as AcProgress, Z as AcResourceCard, T as AcSearchBar, Q as AcSectionContent, $ as AcSegmentedControl, q as AcSelect, ie as AcSidePanel, ae as AcSideTabs, te as AcSidebar, ne as AcSidebarItem, re as AcSidebarSection, g as AcSkeleton, oe as AcSlider, n as AcSpinner, se as AcStatCard, ce as AcStatusBar, le as AcSteps, ue as AcSwitch, de as AcTable, fe as AcTabs, _ as AcTag, pe as AcTextarea, he as AcThemeMode, be as AcToaster, v as AcTooltip, xe as AcUsageCard, Se as AcUserMenu, ge as FONT_SCALES, Ce as HSLToHex, we as HexToHSL, Te as MIN_CONTRAST, Ee as contrastOnWhite, De as getThemeHSL, Oe as hexToHsl, ke as hslToHex, Ae as readableLightness, je as setThemeHSL, Me as useBrandColor, me as useColorMode, _e as useFontScale, ye as useToast };

package/dist/lib/theme.css

@@ -0,0 +1,556 @@
+/*
+ * 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).
+ * 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.
+ *
+ * Consumers: @import "tailwindcss"; then @import this file. Load the fonts once:
+ *   import "@fontsource-variable/geist"; import "@fontsource-variable/geist-mono";
+ */
+@source "./components";
+@source "./editor";
+/* 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
+     and radii grow together, so layouts keep their proportions. */
+  --ac-scale: 1;
+  --primary-hue: 149;
+  --primary-saturation: 100%;
+  --primary-light: 26%;
+  --secondary-hue: 196;
+  --secondary-saturation: 50%;
+  --secondary-light: 20%;
+}
+@theme {
+  --color-*: initial;
+  --radius-*: initial;
+  --shadow-*: initial;
+  --color-white: hsl(0 0% 100%);
+  --color-black: hsl(0 0% 0%);
+  /* Logo colours: exact brand values, the same in both themes. */
+  --color-brand-navy: #193d4b;
+  --color-brand-green: #00a651;
+
+  /* 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-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%);
+  --color-primary-30: hsl(var(--primary-hue) var(--primary-saturation) 30%);
+  --color-primary-40: hsl(var(--primary-hue) var(--primary-saturation) 40%);
+  --color-primary-50: hsl(var(--primary-hue) var(--primary-saturation) 50%);
+  --color-primary-60: hsl(var(--primary-hue) var(--primary-saturation) 60%);
+  --color-primary-70: hsl(var(--primary-hue) var(--primary-saturation) 70%);
+  --color-primary-80: hsl(var(--primary-hue) var(--primary-saturation) 80%);
+  --color-primary-90: hsl(var(--primary-hue) var(--primary-saturation) 90%);
+  --color-primary-93: hsl(var(--primary-hue) var(--primary-saturation) 93%);
+  --color-primary-95: hsl(var(--primary-hue) var(--primary-saturation) 95%);
+  --color-primary-97: hsl(var(--primary-hue) var(--primary-saturation) 97%);
+  --color-primary-light-gray: hsl(var(--primary-hue) 10% 96%);
+  --color-primary-dark-gray: hsl(var(--primary-hue) 10% 10%);
+
+  /* ac-secondary: AppsCode dark teal */
+  --color-secondary: hsl(var(--secondary-hue) var(--secondary-saturation) var(--secondary-light));
+  --color-secondary-5: hsl(var(--secondary-hue) var(--secondary-saturation) 5%);
+  --color-secondary-10: hsl(var(--secondary-hue) var(--secondary-saturation) 10%);
+  --color-secondary-20: hsl(var(--secondary-hue) var(--secondary-saturation) 20%);
+  --color-secondary-30: hsl(var(--secondary-hue) var(--secondary-saturation) 30%);
+  --color-secondary-40: hsl(var(--secondary-hue) var(--secondary-saturation) 40%);
+  --color-secondary-50: hsl(var(--secondary-hue) var(--secondary-saturation) 50%);
+  --color-secondary-60: hsl(var(--secondary-hue) var(--secondary-saturation) 60%);
+  --color-secondary-70: hsl(var(--secondary-hue) var(--secondary-saturation) 70%);
+  --color-secondary-80: hsl(var(--secondary-hue) var(--secondary-saturation) 80%);
+  --color-secondary-90: hsl(var(--secondary-hue) var(--secondary-saturation) 90%);
+  --color-secondary-93: hsl(var(--secondary-hue) var(--secondary-saturation) 93%);
+  --color-secondary-95: hsl(var(--secondary-hue) var(--secondary-saturation) 95%);
+  --color-secondary-97: hsl(var(--secondary-hue) var(--secondary-saturation) 97%);
+  --color-secondary-light-gray: hsl(var(--secondary-hue) 10% 96%);
+  --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%);
+
+  /* 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%);
+
+  /* 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%);
+
+  /* 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%);
+
+  /* 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%);
+
+  /* gray */
+  --color-gray-5: hsl(0 0% 5%);
+  --color-gray-10: hsl(0 0% 10%);
+  --color-gray-20: hsl(0 0% 20%);
+  --color-gray-30: hsl(0 0% 30%);
+  --color-gray-40: hsl(0 0% 40%);
+  --color-gray-50: hsl(0 0% 50%);
+  --color-gray-60: hsl(0 0% 60%);
+  --color-gray-70: hsl(0 0% 70%);
+  --color-gray-80: hsl(0 0% 80%);
+  --color-gray-90: hsl(0 0% 90%);
+  --color-gray-93: hsl(0 0% 93%);
+  --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%);
+
+  /* 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;
+
+  /* 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%);
+
+  /* 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);
+  /* modal and drawer backdrop */
+  --color-overlay: rgb(2 6 23 / 0.4);
+
+  /* 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;
+  --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--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-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-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-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-h4: calc(18px * var(--ac-scale));
+  --text-h5: calc(15px * var(--ac-scale));
+  --text-h6: calc(13px * var(--ac-scale));
+
+  /* spacing: 1 unit = 4px, so p-4 = 16px like the source .p-16 */
+  --spacing: calc(4px * var(--ac-scale));
+
+  /* Container sizes in px, not Tailwind's rem: the old apps set html { font-size: 13px },
+     which would shrink every max-w-md and @container breakpoint by a fifth. */
+  --container-3xs: 256px;
+  --container-2xs: 288px;
+  --container-xs: 320px;
+  --container-sm: 384px;
+  --container-md: 448px;
+  --container-lg: 512px;
+  --container-xl: 576px;
+  --container-2xl: 672px;
+  --container-3xl: 768px;
+  --container-4xl: 896px;
+  --container-5xl: 1024px;
+  --container-6xl: 1152px;
+  --container-7xl: 1280px;
+
+  /* radius: 6px on controls, 10px on surfaces; the source steps are kept for old classes */
+  --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-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);
+
+  --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;
+  @keyframes shake {
+    10%, 90% { transform: translate3d(-1px, 0, 0); }
+    20%, 80% { transform: translate3d(2px, 0, 0); }
+    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
+    40%, 60% { transform: translate3d(4px, 0, 0); }
+  }
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes pop-in {
+    from { opacity: 0; transform: translateY(4px) scale(0.98); }
+    to { opacity: 1; transform: none; }
+  }
+}
+
+/*
+ * Dark theme. Scale steps 5–70 are mirrored (5 ↔ 95% lightness) so "-10 text on a -97 tint" still reads,
+ * and the pale 80–97 tints become translucent washes of the hue over the dark surface.
+ */
+.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%));
+  --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%);
+  --color-primary-30: hsl(var(--primary-hue) var(--primary-saturation) 72%);
+  --color-primary-40: hsl(var(--primary-hue) var(--primary-saturation) 62%);
+  --color-primary-50: hsl(var(--primary-hue) var(--primary-saturation) 52%);
+  --color-primary-60: hsl(var(--primary-hue) var(--primary-saturation) 42%);
+  --color-primary-70: hsl(var(--primary-hue) var(--primary-saturation) 32%);
+  --color-primary-80: hsl(var(--primary-hue) var(--primary-saturation) 55% / 0.32);
+  --color-primary-90: hsl(var(--primary-hue) var(--primary-saturation) 55% / 0.2);
+  --color-primary-93: hsl(var(--primary-hue) var(--primary-saturation) 55% / 0.15);
+  --color-primary-95: hsl(var(--primary-hue) var(--primary-saturation) 55% / 0.11);
+  --color-primary-97: hsl(var(--primary-hue) var(--primary-saturation) 55% / 0.07);
+  --color-primary-light-gray: hsl(var(--primary-hue) 10% 12%);
+  --color-primary-dark-gray: hsl(var(--primary-hue) 10% 90%);
+  /* secondary */
+  --color-secondary-5: hsl(var(--secondary-hue) var(--secondary-saturation) 95%);
+  --color-secondary-10: hsl(var(--secondary-hue) var(--secondary-saturation) 90%);
+  --color-secondary-20: hsl(var(--secondary-hue) var(--secondary-saturation) 82%);
+  --color-secondary-30: hsl(var(--secondary-hue) var(--secondary-saturation) 72%);
+  --color-secondary-40: hsl(var(--secondary-hue) var(--secondary-saturation) 62%);
+  --color-secondary-50: hsl(var(--secondary-hue) var(--secondary-saturation) 52%);
+  --color-secondary-60: hsl(var(--secondary-hue) var(--secondary-saturation) 42%);
+  --color-secondary-70: hsl(var(--secondary-hue) var(--secondary-saturation) 32%);
+  --color-secondary-80: hsl(var(--secondary-hue) var(--secondary-saturation) 55% / 0.32);
+  --color-secondary-90: hsl(var(--secondary-hue) var(--secondary-saturation) 55% / 0.2);
+  --color-secondary-93: hsl(var(--secondary-hue) var(--secondary-saturation) 55% / 0.15);
+  --color-secondary-95: hsl(var(--secondary-hue) var(--secondary-saturation) 55% / 0.11);
+  --color-secondary-97: hsl(var(--secondary-hue) var(--secondary-saturation) 55% / 0.07);
+  --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);
+  /* 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);
+  /* 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);
+  /* 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);
+  /* 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);
+  /* gray */
+  --color-gray-5: hsl(0 0% 95%);
+  --color-gray-10: hsl(0 0% 90%);
+  --color-gray-20: hsl(0 0% 82%);
+  --color-gray-30: hsl(0 0% 72%);
+  --color-gray-40: hsl(0 0% 62%);
+  --color-gray-50: hsl(0 0% 52%);
+  --color-gray-60: hsl(0 0% 42%);
+  --color-gray-70: hsl(0 0% 32%);
+  --color-gray-80: hsl(0 0% 55% / 0.32);
+  --color-gray-90: hsl(0 0% 55% / 0.2);
+  --color-gray-93: hsl(0 0% 55% / 0.15);
+  --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%);
+  /* 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-overlay: rgb(0 0 0 / 0.6);
+  --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);
+  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.25);
+}
+
+@layer base {
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+  body {
+    background-color: var(--color-surface);
+    color: var(--color-body);
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    line-height: var(--text-base--line-height);
+  }
+  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; }
+  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; }
+}
+
+@utility text-code {
+  font-family: var(--font-mono);
+  font-size: calc(13px * var(--ac-scale));
+  letter-spacing: -0.01em;
+  color: var(--color-heading);
+}
+
+/* The standard focus treatment for form controls: solid primary border + soft halo. */
+@utility focus-ring {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-ring);
+}
+
+@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; }
+  &::-webkit-scrollbar-track { background: transparent; }
+}
+
+/* Keyframes for AcSkeleton's shimmer and AcProgress's indeterminate bar; kept here so the library ships no extra CSS file. */
+@keyframes ac-skeleton-shimmer {
+  from { background-position: 150% 0; }
+  to { background-position: -50% 0; }
+}
+.ac-skeleton-bone {
+  background-color: color-mix(in srgb, var(--color-slate-80) 55%, var(--color-slate-90));
+  background-image: linear-gradient(90deg, transparent 0%, var(--color-slate-95) 50%, transparent 100%);
+  background-size: 200% 100%;
+  background-repeat: no-repeat;
+  animation: ac-skeleton-shimmer 1.8s ease-in-out infinite;
+}
+:where(.dark, .is-dark-theme) .ac-skeleton-bone {
+  background-color: color-mix(in srgb, var(--color-slate-80) 55%, var(--color-slate-90));
+  background-image: linear-gradient(90deg, transparent 0%, var(--color-slate-80) 50%, transparent 100%);
+}
+@media (prefers-reduced-motion: reduce) {
+  .ac-skeleton-bone { animation: none; background-image: none; }
+}
+@keyframes ac-progress-slide {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(250%); }
+}
+.ac-progress-indeterminate {
+  animation: ac-progress-slide 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ac-progress-indeterminate { animation: none; }
+}