@plexui/styles 0.0.0-stage → 0.1.1

package/dist/es/styles/touch.css

@@ -0,0 +1,71 @@
+/*
+ * Optional touch sizes for phones, from Apple's iOS and iPadOS 26 design
+ * resources. Below 768px every control takes one height, 44px, with text at
+ * 17px; menus and the mobile sidebar follow the iOS measures. Nothing changes
+ * unless this file is imported, after the main stylesheet:
+ *
+ *   @import "@plexui/styles/styles/touch.css";
+ *
+ * Tokens only, so a size prop still picks the same token as on desktop. `3xl`
+ * stays large at 50px for the main action of a sign-in or checkout screen.
+ */
+@media (max-width: 767px) {
+  html:root {
+    --control-size-sm: 44px;
+    --control-size-md: 44px;
+    --control-size-lg: 44px;
+    --control-size-xl: 44px;
+    --control-size-3xl: 50px;
+    --control-gutter-sm: 14px;
+    --control-gutter-md: 14px;
+    --control-gutter-lg: 14px;
+    --control-gutter-xl: 20px;
+    --control-gutter-pill-scaling: 1;
+    --control-font-size-md: 17px;
+    --control-font-size-lg: 17px;
+    --button-gap-lg: 4px;
+
+    --segmented-control-gutter: 4px;
+
+    --menu-gutter: 10px;
+    --menu-radius: 32px;
+    --menu-radius-pill: 32px;
+    --menu-font-size: 17px;
+    --menu-line-height: 20px;
+    --menu-item-padding: 10px 14px 10px 12px;
+    --menu-item-gap: 6px;
+    --menu-separator-gutter: 10px 14px;
+    --menu-checkbox-indicator-size: 24px;
+    --menu-label-padding: 4px 14px 10px;
+    --menu-label-padding-bottom: 10px;
+    --menu-label-font-size: 13px;
+    --menu-label-font-weight: var(--font-weight-medium);
+    --menu-label-line-height: 15px;
+
+    --sidebar-menu-item-height: 44px;
+    --sidebar-menu-item-font-size: 17px;
+    --sidebar-menu-item-line-height: 22px;
+    --sidebar-menu-item-margin: 0;
+    --sidebar-menu-sub-item-padding-y: 11px;
+    --sidebar-menu-sub-item-font-size: 17px;
+    --sidebar-menu-sub-item-line-height: 22px;
+    --sidebar-icon-size: 20px;
+  }
+
+  html [role="radiogroup"] {
+    --segmented-control-font-size: 15px;
+  }
+
+  html [data-slot="input"] {
+    --input-font-size: 17px;
+    --input-gutter: 14px;
+  }
+
+  html [data-slot="input"][data-has-start-adornment] {
+    --input-gutter: 11px;
+  }
+
+  html [role="menu"] {
+    --menu-min-width: 238px !important;
+  }
+}

package/dist/es/styles/variables-components.css

@@ -0,0 +1,626 @@
+@layer theme {
+  :root,
+  :where([data-theme]) {
+    /* =============================================
+      Alert
+    ============================================= */
+    --alert-border-radius: var(--radius-xl);
+    --alert-gap: calc(var(--spacing) * 3);
+    --alert-gutter: calc(var(--spacing) * 4);
+    --alert-font-size: var(--font-text-sm-size);
+    --alert-line-height: var(--font-text-sm-line-height);
+    --alert-title-font-weight: var(--font-weight-semibold);
+
+    /* =============================================
+      Avatar
+    ============================================= */
+    --avatar-radius: var(--radius-full);
+    --avatar-size: 28px;
+    --avatar-font-size-scaling: 0.5;
+    --avatar-overflow-font-size-scaling-one: 0.45;
+    --avatar-overflow-font-size-scaling-two: 0.37;
+    --avatar-overflow-font-size-scaling-three: 0.3;
+
+    /* =============================================
+      AvatarGroup
+    ============================================= */
+    --avatar-group-cutout-width: 3px;
+    --avatar-group-cutout-color: var(--color-surface);
+    --avatar-group-spacing: -8px;
+
+    /* =============================================
+      Badge
+    ============================================= */
+    --badge-gutter-2xs: 0.1875rem;
+    /* 3px */
+    --badge-gutter-xs: 0.25rem;
+    /* 4px */
+    --badge-gutter-sm: calc(var(--control-gutter-2xs) - 1px);
+    --badge-gutter-md: var(--control-gutter-2xs);
+    --badge-gutter-lg: var(--control-gutter-xs);
+    --badge-size-2xs: 1rem;
+    /* 16px */
+    --badge-size-xs: 1.125rem;
+    /* 18px */
+    --badge-size-sm: calc(var(--control-size-3xs) - 2px);
+    --badge-size-md: var(--control-size-3xs);
+    --badge-size-lg: var(--control-size-2xs);
+    --badge-radius-2xs: var(--radius-2xs);
+    --badge-radius-xs: var(--radius-2xs);
+    --badge-radius-sm: var(--radius-xs);
+    --badge-radius-md: var(--radius-xs);
+    --badge-radius-lg: var(--radius-sm);
+    --badge-font-size-2xs: var(--font-text-xs-size);
+    --badge-font-size-xs: var(--font-text-xs-size);
+    --badge-font-size-sm: var(--font-text-xs-size);
+    --badge-font-size-md: var(--font-text-sm-size);
+    --badge-font-size-lg: var(--font-text-sm-size);
+    --badge-tracking-2xs: var(--tracking-wide);
+    --badge-tracking-xs: var(--tracking-wide);
+    --badge-tracking-sm: var(--tracking-wide);
+    --badge-tracking-md: var(--tracking-normal);
+    --badge-tracking-lg: var(--tracking-normal);
+    --badge-font-weight-2xs: var(--font-weight-semibold);
+    --badge-font-weight-xs: var(--font-weight-semibold);
+    --badge-font-weight-sm: var(--font-weight-semibold);
+    --badge-font-weight-md: var(--font-weight-semibold);
+    --badge-font-weight-lg: var(--font-weight-semibold);
+    --badge-icon-font-size-2xs: var(--font-text-xs-size);
+    --badge-icon-font-size-xs: var(--font-text-xs-size);
+    --badge-icon-font-size-sm: var(--font-text-xs-size);
+    --badge-icon-font-size-md: var(--font-text-md-size);
+    --badge-icon-font-size-lg: var(--font-text-md-size);
+    --badge-indicator-size-2xs: 0.625rem;
+    /* 10px */
+    --badge-indicator-size-xs: 0.625rem;
+    /* 10px */
+    --badge-indicator-size-sm: var(--font-text-xs-size);
+    --badge-indicator-size-md: var(--font-text-xs-size);
+    --badge-indicator-size-lg: var(--font-text-sm-size);
+
+    /* =============================================
+      Button
+    ============================================= */
+    --button-gap-sm: 3px;
+    --button-gap-md: 4px;
+    --button-gap-lg: 6px;
+    --button-font-weight: var(--font-weight-medium);
+
+    /* =============================================
+      Card
+    ============================================= */
+    --card-radius: var(--radius-xl);
+    --card-background: var(--color-surface);
+    --card-background-hover: var(--color-surface-secondary);
+    --card-border-color: var(--color-border);
+    --card-border-color-hover: var(--color-border-primary-outline-hover);
+    --card-text-color: var(--color-text);
+    --card-font-size: var(--font-text-sm-size);
+    --card-title-color: var(--color-text);
+    --card-title-font-size: var(--font-heading-xs-size);
+    --card-title-font-weight: var(--font-weight-semibold);
+    --card-description-color: var(--color-text-tertiary);
+    --card-description-font-size: var(--font-text-sm-size);
+
+    /* =============================================
+      Label
+    ============================================= */
+    --label-color: var(--color-text);
+    --label-font-size: var(--font-text-sm-size);
+    --label-font-weight: var(--font-weight-medium);
+    --label-line-height: 1;
+
+    /* =============================================
+      Progress
+    ============================================= */
+    --progress-height: 4px;
+    --progress-radius: var(--radius-full);
+    --progress-track-color: var(--color-background-secondary-soft);
+    --progress-indicator-color: var(--color-text);
+    --progress-transition-duration: var(--transition-duration-basic);
+    --progress-transition-ease: var(--transition-ease-basic);
+    --progress-indeterminate-duration: 1.5s;
+
+    /* =============================================
+      Separator
+    ============================================= */
+    --separator-color: var(--color-border);
+    --separator-thickness: 1px;
+
+    /* =============================================
+      ButtonGroup
+    ============================================= */
+    --button-group-nested-gap: calc(var(--spacing) * 2);
+    --button-group-separator-color: var(--color-border-strong, var(--color-border));
+    --button-group-text-background: var(--color-background-secondary-soft);
+    --button-group-text-color: var(--color-text-primary);
+    --button-group-text-border-color: var(--color-border-secondary-outline, var(--color-border));
+    --button-group-text-font-size: var(--font-text-sm-size);
+    --button-group-text-font-weight: var(--font-weight-medium);
+
+    /* =============================================
+      Accordion
+    ============================================= */
+    --accordion-item-divider-color: var(--color-border);
+    --accordion-item-divider-width: 1px;
+    --accordion-item-disabled-opacity: 0.5;
+    --accordion-trigger-color: var(--color-text);
+    --accordion-trigger-font-size: var(--font-text-sm-size);
+    --accordion-trigger-font-weight: var(--font-weight-semibold);
+    --accordion-trigger-line-height: var(--font-text-sm-line-height);
+    --accordion-trigger-padding-block: calc(var(--spacing) * 2.5);
+    --accordion-trigger-gap: calc(var(--spacing) * 3);
+    --accordion-trigger-focus-ring-color: var(--color-ring);
+    --accordion-trigger-focus-radius: var(--radius-sm);
+    --accordion-icon-color: var(--color-text-secondary);
+    --accordion-icon-size: 16px;
+    --accordion-content-color: var(--color-text);
+    --accordion-content-font-size: var(--font-text-sm-size);
+    --accordion-content-line-height: var(--font-text-sm-line-height);
+    --accordion-content-padding-bottom: calc(var(--spacing) * 2.5);
+    --accordion-transition-duration: var(--transition-duration-basic);
+    --accordion-transition-ease: var(--transition-ease-basic);
+
+    /* =============================================
+      Checkbox
+    ============================================= */
+    --checkbox-indicator-size: var(--radio-group-indicator-size);
+    --checkbox-label-gap: var(--radio-group-item-gap);
+    --checkbox-label-line-height: var(--radio-group-item-line-height);
+
+    /* =============================================
+      Input
+    ============================================= */
+    --input-gap-xs: 4px;
+    --input-gap-sm: 6px;
+    --input-gap-md: 8px;
+    --input-gap-lg: 10px;
+    --input-text-color: var(--color-text);
+    --input-placeholder-text-color: var(--color-text-tertiary);
+    --input-outline-border-color: var(--color-border-primary-outline);
+    --input-outline-border-color-focus: var(--alpha-50);
+    --input-soft-background-color: var(--color-background-primary-soft-alpha);
+    --input-soft-border-color-focus: var(--alpha-20);
+    --input-border-color-invalid: var(--color-border-danger-outline);
+
+    /* =============================================
+      FieldError
+    ============================================= */
+    --field-error-color: var(--color-text-danger-outline);
+    --field-error-font-size: 0.75rem;
+    --field-error-line-height: var(--font-text-xs-line-height);
+    --field-error-icon-size: 1rem;
+    --field-error-gap: calc(var(--spacing) * 2);
+    --field-error-margin-top: 0.5rem;
+    --field-error-margin-bottom: calc(var(--spacing) * 3);
+    --field-error-padding-inline: 0;
+
+    /* =============================================
+      Field
+    ============================================= */
+    --field-label-font-weight: var(--font-weight-medium);
+    --field-horizontal-label-width: 120px;
+    --field-horizontal-control-width: 240px;
+
+    /* =============================================
+      FloatingLabelInput
+    ============================================= */
+    --floating-input-height: 3.25rem;
+    --floating-input-gutter: 1.25rem;
+    --floating-input-border-radius: var(--radius-full);
+    --floating-input-background: var(--color-surface);
+    --floating-input-border-color-focus: var(--alpha-50);
+    --floating-input-border-color-invalid: var(--color-border-danger-outline);
+    --floating-input-label-color: var(--color-text-tertiary);
+    --floating-input-label-color-focus: var(--color-text);
+    --floating-input-label-color-invalid: var(--color-text-danger-outline);
+    --floating-input-transition-duration: 80ms;
+    --floating-input-label-scale: 0.88;
+
+    /* =============================================
+      FileUpload
+    ============================================= */
+    --file-upload-height: var(--floating-input-height);
+    --file-upload-gutter: var(--floating-input-gutter);
+    --file-upload-border-radius: var(--floating-input-border-radius);
+    --file-upload-border-color: var(--floating-input-border-color);
+    --file-upload-border-color-hover: var(--floating-input-border-color-hover);
+    --file-upload-border-color-invalid: var(--floating-input-border-color-invalid);
+    --file-upload-background: var(--floating-input-background);
+    --file-upload-transition-duration: var(--floating-input-transition-duration);
+    --file-upload-list-border-radius: var(--radius-lg);
+    --file-upload-list-gap: 0.5rem;
+    --file-upload-area-border-radius: var(--radius-xl);
+    --file-upload-area-min-height: 10rem;
+
+    /* =============================================
+      Link
+    ============================================= */
+    --link-font-weight: inherit;
+    --link-gap: calc(var(--spacing) * 0.5);
+    --link-radius: var(--radius-sm);
+    --link-underline-decoration-offset: 0.1em;
+
+    /* =============================================
+      Chat
+    ============================================= */
+    --chat-max-width: 800px;
+    --chat-gutter: calc(var(--spacing) * 5);
+    --chat-background-color: var(--color-surface);
+    --thread-gutter: calc(var(--spacing) * 4);
+    /* 12px (composer gutter) + 4px (input inset) */
+    --composer-gutter: calc(var(--spacing) * 3);
+    --composer-compact-gutter: calc(var(--spacing) * 2);
+    --composer-radius: var(--radius-4xl);
+    --composer-background-color: var(--color-surface-elevated);
+    --smoothing-background-color: var(--color-surface);
+    --user-message-text-color: var(--color-text);
+    --source-list-gutter: var(--thread-gutter);
+
+    /* =============================================
+      CodeBlock
+    ============================================= */
+    --codeblock-syntax-4: var(--pink-500);
+
+    /* =============================================
+      Dialog
+    ============================================= */
+    --dialog-min-width: 250px;
+    --dialog-max-width: 450px;
+    --dialog-container-inner-padding: calc(var(--spacing) * 5);
+    --dialog-backdrop-fade-background: color-mix(in oklab, var(--color-surface-elevated) 60%, transparent);
+
+    /* =============================================
+      Menu
+    ============================================= */
+    --menu-gutter: calc(var(--spacing) * 1.5);
+    --menu-radius: var(--radius-xl);
+    --menu-font-size: var(--font-text-sm-size);
+    /* Important that this line-height is ~an even number for centering with icons */
+    --menu-line-height: var(--font-text-sm-line-height);
+    --menu-item-padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
+    --menu-item-gap: calc(var(--spacing) * 1.5);
+    --menu-separator-gutter: var(--menu-gutter) calc(-1 * var(--menu-gutter));
+    --menu-separator-background-color: var(--color-border);
+    --menu-radio-indicator-size: var(--font-text-lg-size);
+    --menu-radio-indicator-hole-size: var(--font-text-3xs-size);
+    --menu-checkbox-indicator-size: var(--font-text-lg-size);
+
+    /* =============================================
+      Modal
+    ============================================= */
+    --modal-container-inner-padding: calc(var(--spacing) * 5);
+
+    /* =============================================
+      Popover
+    ============================================= */
+    --popover-radius: var(--radius-xl);
+
+    /* =============================================
+      RadioGroup
+    ============================================= */
+    --radio-group-col-gap: calc(var(--spacing) * 2.5);
+    --radio-group-row-gap: calc(var(--spacing) * 5);
+    --radio-group-item-gap: calc(var(--spacing) * 1.5);
+    --radio-group-item-font-size: var(--font-text-sm-size);
+    --radio-group-item-line-height: var(--font-text-sm-line-height);
+    --radio-group-indicator-size: var(--font-text-lg-size);
+    --radio-group-indicator-border-color: var(--color-border-primary-outline);
+    --radio-group-indicator-border-color-hover: var(--alpha-25);
+    --radio-group-indicator-background-color: var(--color-background-primary-solid);
+    --radio-group-indicator-hole-size: 0.375rem;
+    --radio-group-indicator-hole-background-color: var(--color-text-primary-solid);
+
+    /* =============================================
+      Segmented Control
+    ============================================= */
+    --segmented-control-gap: 2px;
+    --segmented-control-gutter: 2px;
+    --segmented-control-font-weight: var(--font-weight-semibold);
+    --segmented-control-thumb-shadow: 0 1px 4px -1px rgb(0 0 0 / 20%);
+    --segmented-control-option-highlight-gutter: 1px;
+
+    /* =============================================
+      Tabs — Underline variant
+    ============================================= */
+    --tabs-underline-indicator-height: 2px;
+    --tabs-underline-indicator-color: var(--color-background-primary-solid);
+    --tabs-underline-border-color: var(--color-border);
+
+    /* =============================================
+      SelectControl
+    ============================================= */
+    --select-control-font-weight: var(--font-weight-normal);
+
+    /* =============================================
+      Slider
+    ============================================= */
+
+    /* =============================================
+      Switch
+    ============================================= */
+    --switch-track-width: 32px;
+    --switch-track-height: 19px;
+    --switch-thumb-offset: 3px;
+    --switch-thumb-size: calc(var(--switch-track-height) - 2 * var(--switch-thumb-offset));
+    --switch-thumb-shadow: 0 1px 2px rgb(0 0 0 / 20%);
+    --switch-label-gap: calc(var(--spacing) * 2);
+
+    /* =============================================
+      ProgressSteps
+    ============================================= */
+    --progress-steps-indicator-size-sm: 24px;
+    --progress-steps-indicator-size-md: 32px;
+    --progress-steps-indicator-size-lg: 40px;
+    --progress-steps-row-gap-sm: calc(var(--spacing) * 4);
+    --progress-steps-row-gap-md: calc(var(--spacing) * 6);
+    --progress-steps-row-gap-lg: calc(var(--spacing) * 8);
+    --progress-steps-content-gap-sm: calc(var(--spacing) * 2.5);
+    --progress-steps-content-gap-md: calc(var(--spacing) * 3);
+    --progress-steps-content-gap-lg: calc(var(--spacing) * 4);
+    --progress-steps-font-size-sm: var(--font-text-xs-size);
+    --progress-steps-font-size-md: var(--font-text-sm-size);
+    --progress-steps-font-size-lg: var(--font-text-md-size);
+    --progress-steps-icon-size-sm: var(--control-icon-size-xs);
+    --progress-steps-icon-size-md: var(--control-icon-size-sm);
+    --progress-steps-icon-size-lg: var(--control-icon-size-md);
+    --progress-steps-step-padding-sm: calc(var(--spacing) * 1.5);
+    --progress-steps-step-padding-md: calc(var(--spacing) * 2);
+    --progress-steps-step-padding-lg: calc(var(--spacing) * 3);
+    --progress-steps-connector-width: 2px;
+    --progress-steps-connector-dash-length: 4px;
+    --progress-steps-connector-dash-gap: 4px;
+    --progress-steps-connector-color: var(--gray-100);
+    --progress-steps-connector-color-completed: var(--gray-900);
+    --progress-steps-indicator-background: var(--gray-100);
+    --progress-steps-indicator-background-active: var(--gray-900);
+    --progress-steps-indicator-background-completed: var(--gray-900);
+    --progress-steps-indicator-text: var(--color-text-secondary);
+    --progress-steps-indicator-text-active: var(--gray-0);
+    --progress-steps-indicator-text-completed: var(--gray-0);
+    --progress-steps-title-font-weight: var(--font-weight-medium);
+    --progress-steps-title-color: var(--color-text);
+    --progress-steps-title-color-inactive: var(--color-text-tertiary);
+    --progress-steps-description-color: var(--color-text-secondary);
+    --progress-steps-description-color-inactive: var(--color-text-tertiary);
+
+    /* =============================================
+      ProgressSteps Minimal Variant
+    ============================================= */
+    --progress-steps-minimal-gap-sm: calc(var(--spacing) * 1);
+    --progress-steps-minimal-gap-md: calc(var(--spacing) * 1);
+    --progress-steps-minimal-gap-lg: calc(var(--spacing) * 1.5);
+    --progress-steps-minimal-height-sm: 3px;
+    --progress-steps-minimal-height-md: 3px;
+    --progress-steps-minimal-height-lg: 4px;
+    --progress-steps-minimal-width-sm: 24px;
+    --progress-steps-minimal-width-md: 24px;
+    --progress-steps-minimal-width-lg: 32px;
+    --progress-steps-minimal-radius: var(--radius-full);
+    --progress-steps-minimal-color-completed: var(--gray-900);
+    --progress-steps-minimal-color-upcoming: var(--gray-100);
+
+    /* =============================================
+      Sidebar
+    ============================================= */
+
+    /* Dimensions */
+    --sidebar-width: 210px;
+    --sidebar-width-mobile: 288px;
+    --sidebar-width-icon: 64px;
+    --sidebar-header-height: var(--control-size-3xl);
+    --sidebar-gutter: 12px;
+    --sidebar-gutter-sm: var(--control-gutter-2xs);
+
+    /* Colors */
+    --sidebar-background: none;
+    --sidebar-background-secondary: var(--color-surface-secondary);
+    --sidebar-foreground: var(--color-text);
+    --sidebar-border: var(--color-border);
+    --sidebar-menu-text-active: var(--gray-900);
+
+    /* Group label */
+    --sidebar-group-label-color: var(--color-text-tertiary);
+    --sidebar-group-label-font-size: 14px;
+    --sidebar-group-label-font-weight: var(--font-weight-semibold);
+    --sidebar-group-label-margin: 24px 0 2px;
+    --sidebar-group-label-margin-first: 8px 0 2px;
+    --sidebar-group-label-padding: 0 12px 8px;
+    --sidebar-group-label-line-height: 14px;
+
+    /* Menu item */
+    --sidebar-menu-item-height: 38px;
+    --sidebar-menu-item-height-desktop: 32px;
+    --sidebar-menu-item-padding: 0;
+    --sidebar-menu-item-margin: 0 0 2px;
+    --sidebar-menu-item-margin-desktop: 0 0 2px;
+    --sidebar-menu-item-radius: 8px;
+    --sidebar-menu-item-font-size: 14px;
+    --sidebar-menu-item-line-height: 20px;
+
+    /* Icon */
+    --sidebar-icon-size: 20px;
+    --sidebar-icon-wrapper-size: 32px;
+    --sidebar-icon-margin: 0 2px 0 4px;
+    --sidebar-icon-color: inherit;
+
+    /* Transitions */
+    --sidebar-transition-duration: 0.3s;
+    --sidebar-collapse-duration: 0.3s;
+
+    /* Mobile menu button (hamburger icon) */
+    --sidebar-mobile-button-size: 32px;
+    --sidebar-mobile-button-radius: 8px;
+    --sidebar-mobile-icon-size: 18px;
+    --sidebar-mobile-line-height: 2px;
+    --sidebar-mobile-line-color: var(--gray-900);
+    --sidebar-mobile-line-transition-duration: 0.2s;
+
+    /* Mobile drawer */
+    --sidebar-mobile-gutter: 12px;
+    --sidebar-mobile-header-height: 48px;
+    --sidebar-mobile-z-index: 301;
+    --sidebar-mobile-enter-opacity-duration: 0.8s;
+    --sidebar-mobile-enter-transform-duration: 0.7s;
+    --sidebar-mobile-enter-delay: 0.33s;
+    --sidebar-mobile-exit-duration: 0.3s;
+
+    /* Footer */
+    --sidebar-footer-padding: var(--sidebar-gutter-sm) var(--sidebar-gutter);
+
+    /* Main content area (Inset) – no shadow, matching reference (.mO2WL) */
+    --sidebar-inset-shadow: none;
+
+    /* Card */
+    --sidebar-card-padding: calc(var(--spacing) * 4);
+    --sidebar-card-radius: var(--radius-2xl);
+    --sidebar-card-height: 96px;
+    --sidebar-card-background: var(--color-surface);
+    --sidebar-card-background-hover: var(--color-surface-secondary);
+    --sidebar-card-shadow: var(--shadow-300), var(--shadow-hairline);
+    --sidebar-card-shadow-hover: var(--shadow-400), var(--shadow-hairline);
+    --sidebar-card-active-scale: 0.98;
+
+    /* =============================================
+      StatCard
+    ============================================= */
+    --stat-card-padding: calc(var(--spacing) * 5);
+    --stat-card-radius: var(--radius-xl);
+    /* spacing is per-section: mt-3 (12px) label→value, mt-2 (8px) value→footer */
+    --stat-card-background: var(--color-surface);
+    --stat-card-border-color: var(--color-border);
+    --stat-card-label-font-size: var(--font-text-sm-size);
+    --stat-card-label-color: var(--color-text-secondary);
+    --stat-card-value-font-size: var(--font-heading-xl-size);
+    --stat-card-value-font-weight: var(--font-weight-semibold);
+    --stat-card-value-color: var(--color-text);
+    --stat-card-description-font-size: var(--font-text-sm-size);
+    --stat-card-description-color: var(--color-text-tertiary);
+    --stat-card-trend-font-size: var(--font-text-sm-size);
+    --stat-card-trend-font-weight: var(--font-weight-semibold);
+    --stat-card-trend-positive-color: var(--color-text-success-soft);
+    --stat-card-trend-negative-color: var(--color-text-danger-soft);
+    --stat-card-trend-neutral-color: var(--color-text-tertiary);
+    --stat-card-progress-height: 4px;
+    --stat-card-progress-radius: var(--radius-full);
+    --stat-card-progress-fill: var(--color-background-primary-solid);
+    --stat-card-icon-size: 24px;
+    --stat-card-icon-color: var(--color-text-primary);
+    /* label line-height (20) + gap spacing(0.5) (2) + value line-height (38) = 60 */
+    --stat-card-icon-wrapper-size: 60px;
+    --stat-card-icon-wrapper-radius: var(--radius-md);
+    --stat-card-icon-wrapper-background: var(--color-background-primary-soft-alpha);
+    --stat-card-accent-width: 3px;
+    --stat-card-info-icon-size: 16px;
+
+    /* sm size overrides */
+    --stat-card-sm-padding-block: calc(var(--spacing) * 3);
+    --stat-card-sm-padding-inline: calc(var(--spacing) * 4);
+    --stat-card-sm-label-font-size: var(--font-text-xs-size);
+    --stat-card-sm-value-font-size: var(--font-heading-md-size);
+    --stat-card-sm-trend-font-size: var(--font-text-xs-size);
+    --stat-card-sm-description-font-size: var(--font-text-xs-size);
+    --stat-card-sm-icon-size: 20px;
+    /* label line-height (18) + gap spacing(0.5) (2) + value line-height (26) = 46 */
+    --stat-card-sm-icon-wrapper-size: 46px;
+    --stat-card-sm-icon-wrapper-radius: var(--radius-sm);
+    --stat-card-sm-info-icon-size: 14px;
+
+    /* =============================================
+      Table
+    ============================================= */
+    --table-border-color: var(--color-border);
+    --table-header-background: transparent;
+    --table-header-font-weight: var(--font-weight-medium);
+    --table-header-color: var(--color-text-secondary);
+    --table-cell-padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
+    --table-cell-font-size: var(--font-text-sm-size);
+    --table-cell-line-height: var(--font-text-sm-line-height);
+    --table-cell-color: var(--color-text);
+    --table-footer-background: transparent;
+    --table-footer-font-weight: var(--font-weight-medium);
+    --table-caption-font-size: var(--font-text-sm-size);
+    --table-caption-color: var(--color-text-tertiary);
+
+    /* =============================================
+      Skeleton
+    ============================================= */
+    --skeleton-radius: var(--radius-md);
+  }
+  :where(:root), :where([data-theme="light"]) {
+    --avatar-image-border-color: var(--alpha-04);
+    --input-outline-border-color-hover: var(--alpha-25);
+    --floating-input-border-color: rgb(0 0 0 / 15%);
+    --floating-input-border-color-hover: rgb(0 0 0 / 20%);
+    --file-upload-separator-color: rgb(0 0 0 / 8%);
+    --link-primary-text-color: var(--blue-500);
+    --link-primary-text-color-hover: var(--blue-600);
+    --user-message-background-color: var(--alpha-05);
+    --codeblock-background-color: #f9f9f9;
+    --codeblock-syntax-1: #c0660d;
+    --codeblock-syntax-2: var(--blue-500);
+    --codeblock-syntax-3: var(--green-600);
+    --codeblock-syntax-5: var(--purple-500);
+    --dialog-backdrop-dim-background: rgb(0 0 0 / 30%);
+    --menu-item-background-color: var(--alpha-08);
+    --modal-backdrop-background: rgb(0 0 0 / 30%);
+    --segmented-control-background: var(--gray-100);
+    --segmented-control-thumb-background: var(--gray-0);
+    --segmented-control-option-highlight-background-color: var(--gray-200);
+    --slider-track-color: var(--gray-150);
+    --slider-range-color: var(--gray-450);
+    --switch-track-color: var(--gray-150);
+    --switch-track-color-hover: var(--gray-200);
+    --switch-track-color-checked: var(--gray-900);
+    --switch-track-color-checked-disabled: var(--gray-300);
+    --switch-track-color-disabled: var(--gray-100);
+    --switch-thumb-color: var(--gray-0);
+    --switch-thumb-color-disabled: var(--gray-0);
+    --sidebar-accent: var(--alpha-08);
+    --sidebar-accent-hover: var(--alpha-12);
+    --sidebar-menu-text: var(--gray-750);
+    --sidebar-mobile-backdrop-color: rgb(0 0 0 / 15%);
+    --sidebar-footer-shadow: 0 -2px 10px rgb(0 0 0 / 6%);
+    --stat-card-progress-background: var(--alpha-08);
+    --table-row-hover-background: var(--alpha-02);
+    --skeleton-background: var(--alpha-08);
+  }
+  :where([data-theme="dark"]) {
+    --avatar-image-border-color: var(--alpha-15);
+    --input-outline-border-color-hover: var(--alpha-30);
+    --floating-input-border-color: rgb(255 255 255 / 16%);
+    --floating-input-border-color-hover: rgb(255 255 255 / 24%);
+    --file-upload-separator-color: rgb(255 255 255 / 8%);
+    --link-primary-text-color: var(--blue-300);
+    --link-primary-text-color-hover: var(--blue-400);
+    --user-message-background-color: var(--alpha-08);
+    --codeblock-background-color: #161616;
+    --codeblock-syntax-1: var(--yellow-100);
+    --codeblock-syntax-2: var(--blue-200);
+    --codeblock-syntax-3: var(--green-300);
+    --codeblock-syntax-5: var(--purple-300);
+    --dialog-backdrop-dim-background: rgb(0 0 0 / 50%);
+    --menu-item-background-color: var(--alpha-10);
+    --modal-backdrop-background: rgb(0 0 0 / 50%);
+    --segmented-control-background: var(--gray-0);
+    --segmented-control-thumb-background: var(--gray-300);
+    --segmented-control-option-highlight-background-color: var(--gray-300);
+    --slider-track-color: var(--gray-400);
+    --slider-range-color: var(--gray-600);
+    --switch-track-color: var(--gray-400);
+    --switch-track-color-hover: var(--gray-450);
+    --switch-track-color-checked: var(--blue-400);
+    --switch-track-color-checked-disabled: var(--blue-700);
+    --switch-track-color-disabled: var(--gray-300);
+    --switch-thumb-color: var(--gray-1000);
+    --switch-thumb-color-disabled: var(--gray-800);
+    --sidebar-accent: var(--alpha-12);
+    --sidebar-accent-hover: var(--alpha-16);
+    --sidebar-menu-text: var(--gray-850);
+    --sidebar-mobile-backdrop-color: rgb(0 0 0 / 35%);
+    --sidebar-footer-shadow: 0 -2px 10px rgb(0 0 0 / 35%);
+    --stat-card-progress-background: var(--alpha-12);
+    --table-row-hover-background: var(--alpha-04);
+    --skeleton-background: var(--alpha-12);
+  }
+}