@pitchfork-ui/react 0.1.9 → 0.6.0

package/dist/styles/theme.css

@@ -0,0 +1,813 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --color-base-white: #ffffff;
+  --color-base-black: #0b0b0f;
+  --color-gray-50: #f8fafc;
+  --color-gray-100: #f1f5f9;
+  --color-gray-200: #e2e8f0;
+  --color-gray-300: #cbd5e1;
+  --color-gray-400: #94a3b8;
+  --color-gray-500: #64748b;
+  --color-gray-600: #475569;
+  --color-gray-700: #334155;
+  --color-gray-800: #1e293b;
+  --color-gray-900: #0f172a;
+  --color-brand-50: #eef2ff;
+  --color-brand-100: #e0e7ff;
+  --color-brand-200: #c7d2fe;
+  --color-brand-300: #a5b4fc;
+  --color-brand-400: #818cf8;
+  --color-brand-500: #6366f1;
+  --color-brand-600: #4f46e5;
+  --color-brand-700: #4338ca;
+  --color-brand-800: #3730a3;
+  --color-brand-900: #312e81;
+  --color-success-50: #ecfdf3;
+  --color-success-100: #d1fadf;
+  --color-success-200: #a6f4c5;
+  --color-success-300: #6ce9a6;
+  --color-success-400: #32d583;
+  --color-success-500: #12b76a;
+  --color-success-600: #039855;
+  --color-success-700: #027a48;
+  --color-success-800: #05603a;
+  --color-success-900: #054f31;
+  --color-warning-50: #fffaeb;
+  --color-warning-100: #fef0c7;
+  --color-warning-200: #fedf89;
+  --color-warning-300: #fec84b;
+  --color-warning-400: #fdb022;
+  --color-warning-500: #f79009;
+  --color-warning-600: #dc6803;
+  --color-warning-700: #b54708;
+  --color-warning-800: #93370d;
+  --color-warning-900: #7a2e0e;
+  --color-danger-50: #fef3f2;
+  --color-danger-100: #fee4e2;
+  --color-danger-200: #fecdca;
+  --color-danger-300: #fda29b;
+  --color-danger-400: #f97066;
+  --color-danger-500: #f04438;
+  --color-danger-600: #d92d20;
+  --color-danger-700: #b42318;
+  --color-danger-800: #912018;
+  --color-danger-900: #7a271a;
+  --duration-fast: 120ms;
+  --duration-moderate: 180ms;
+  --duration-slow: 280ms;
+  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.08);
+  --shadow-md: 0 8px 24px rgb(15 23 42 / 0.12);
+  --shadow-lg: 0 18px 48px rgb(15 23 42 / 0.16);
+  --shadow-focus: 0 0 0 3px rgb(59 130 246 / 0.35);
+  --space-0: 0rem;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-7: 1.75rem;
+  --space-8: 2rem;
+  --space-9: 2.25rem;
+  --space-10: 2.5rem;
+  --space-11: 2.75rem;
+  --space-12: 3rem;
+  --space-13: 3.25rem;
+  --space-14: 3.5rem;
+  --space-16: 4rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-full: 9999px;
+  --size-control-sm: 2.25rem;
+  --size-control-md: 2.5rem;
+  --size-control-lg: 3rem;
+  --size-icon-sm: 1rem;
+  --size-icon-md: 1.25rem;
+  --size-icon-lg: 1.5rem;
+  --font-family-sans: Geist, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-size-2xs: 0.6875rem;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-2xl: 1.5rem;
+  --font-size-3xl: 1.75rem;
+  --font-size-4xl: 2.25rem;
+  --font-size-5xl: 2.5rem;
+  --font-line-height-tight: 1.2;
+  --font-line-height-normal: 1.5;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --color-semantic-background-default: var(--color-base-white);
+  --color-semantic-background-subtle: var(--color-gray-50);
+  --color-semantic-background-raised: var(--color-base-white);
+  --color-semantic-background-disabled: var(--color-gray-100);
+  --color-semantic-text-default: var(--color-gray-900);
+  --color-semantic-text-muted: var(--color-gray-500);
+  --color-semantic-text-subtle: var(--color-gray-600);
+  --color-semantic-text-inverse: var(--color-base-white);
+  --color-semantic-text-disabled: var(--color-gray-400);
+  --color-semantic-border-muted: var(--color-gray-100);
+  --color-semantic-border-default: var(--color-gray-200);
+  --color-semantic-border-strong: var(--color-gray-300);
+  --color-semantic-border-focus: var(--color-brand-500);
+  --color-semantic-border-disabled: var(--color-gray-200);
+  --color-semantic-action-primary: var(--color-brand-700);
+  --color-semantic-action-primary-hover: var(--color-brand-800);
+  --color-semantic-action-primary-active: var(--color-brand-900);
+  --color-semantic-action-primary-text: var(--color-base-white);
+  --color-semantic-action-secondary: var(--color-gray-100);
+  --color-semantic-action-secondary-hover: var(--color-gray-200);
+  --color-semantic-action-secondary-text: var(--color-gray-900);
+  --color-semantic-status-success-background: var(--color-success-50);
+  --color-semantic-status-success-border: var(--color-success-200);
+  --color-semantic-status-success-foreground: var(--color-success-700);
+  --color-semantic-status-success-bright: var(--color-success-500);
+  --color-semantic-status-warning-background: var(--color-warning-50);
+  --color-semantic-status-warning-border: var(--color-warning-200);
+  --color-semantic-status-warning-foreground: var(--color-warning-700);
+  --color-semantic-status-warning-bright: var(--color-warning-500);
+  --color-semantic-status-danger-background: var(--color-danger-50);
+  --color-semantic-status-danger-border: var(--color-danger-200);
+  --color-semantic-status-danger-foreground: var(--color-danger-700);
+  --color-semantic-status-danger-bright: var(--color-danger-500);
+}
+
+/* Breakpoints — mobile-first min-width. Resolved at build time by postcss-custom-media. */
+
+:root {
+  color-scheme: light;
+
+  /* Interaction aliases */
+  --pf-focus-ring-color: var(--color-semantic-border-focus, var(--color-brand-500));
+  --pf-focus-ring-width: 3px;
+  --pf-focus-ring-offset: 2px;
+  --pf-focus-ring: 0 0 0 var(--pf-focus-ring-width)
+    color-mix(in srgb, var(--pf-focus-ring-color) 35%, transparent);
+  --pf-focus-outline: var(--pf-focus-ring-width) solid var(--pf-focus-ring-color);
+  /* Motion — durations and easings come from Style Dictionary (--duration-*, --easing-*) */
+  --pf-transition-fast: var(--duration-fast) var(--easing-standard);
+  --pf-transition-medium: var(--duration-moderate) var(--easing-standard);
+  --pf-transition-slow: var(--duration-slow) var(--easing-standard);
+  /* Directional easings for enter/exit animations */
+  --pf-transition-enter: var(--duration-moderate) var(--easing-decelerate);
+  --pf-transition-exit: var(--duration-fast) var(--easing-accelerate);
+
+  /* Control aliases */
+  --pf-control-height-sm: var(--size-control-sm, 36px);
+  --pf-control-height-md: var(--size-control-md, 40px);
+  --pf-control-height-lg: var(--size-control-lg, 48px);
+  --pf-control-padding-x-sm: var(--space-3);
+  --pf-control-padding-x-md: var(--space-3);
+  --pf-control-padding-x-lg: var(--space-5);
+  --pf-control-radius: var(--radius-md);
+  --pf-control-border: var(--color-semantic-border-default);
+  --pf-control-border-hover: var(--color-semantic-border-strong);
+  --pf-control-border-focus: var(
+    --color-semantic-border-focus,
+    var(--color-semantic-action-primary)
+  );
+  --pf-control-bg: var(--color-semantic-background-default);
+  --pf-control-bg-disabled: var(--color-semantic-background-disabled, var(--color-gray-100));
+  --pf-control-text: var(--color-semantic-text-default);
+  --pf-control-text-muted: var(--color-semantic-text-muted);
+  --pf-control-text-disabled: var(--color-semantic-text-disabled, var(--color-gray-400));
+
+  /* Overlay aliases */
+  --pf-z-index-dropdown: 1000;
+  --pf-z-index-popover: 1100;
+  --pf-z-index-modal: 1200;
+
+  /* Button aliases */
+  --pf-button-primary-bg: var(--color-semantic-action-primary);
+  --pf-button-primary-bg-hover: var(--color-semantic-action-primary-hover);
+  --pf-button-primary-text: var(--color-semantic-action-primary-text);
+  --pf-button-secondary-bg: var(--color-semantic-background-default);
+  --pf-button-secondary-bg-hover: var(--color-semantic-background-subtle);
+  --pf-button-secondary-border: var(--color-semantic-border-default);
+  --pf-button-secondary-border-hover: var(--color-semantic-border-strong);
+  --pf-button-secondary-text: var(--color-semantic-text-default);
+  --pf-button-ghost-text: var(--color-semantic-text-default);
+  --pf-button-ghost-bg-hover: var(--color-semantic-background-subtle);
+
+  /* Field/input aliases */
+  --pf-field-label: var(--color-semantic-text-default);
+  --pf-field-description: var(--color-semantic-text-muted);
+  --pf-field-error: var(--color-semantic-status-danger-foreground);
+  --pf-input-bg: var(--pf-control-bg);
+  --pf-input-border: var(--pf-control-border);
+  --pf-input-text: var(--pf-control-text);
+  --pf-input-placeholder: var(--pf-control-text-muted);
+
+  /* Surface/select aliases */
+  --pf-surface-bg: var(
+    --color-semantic-background-raised,
+    var(--color-semantic-background-default)
+  );
+  --pf-surface-subtle: var(--color-semantic-background-subtle);
+  --pf-surface-border: var(--color-semantic-border-default);
+  --pf-surface-border-strong: var(--color-semantic-border-strong);
+  --pf-select-menu-bg: var(--pf-surface-bg);
+  --pf-select-menu-border: var(--pf-surface-border-strong);
+  --pf-select-option-active-bg: var(--color-semantic-action-primary);
+  --pf-select-option-active-text: var(--color-semantic-action-primary-text);
+
+  /* Overlay and elevation color aliases */
+  --pf-overlay-backdrop: color-mix(in srgb, var(--color-gray-900) 48%, transparent);
+  --pf-elevation-overlay-shadow: 0 24px 60px
+    color-mix(in srgb, var(--color-gray-900) 18%, transparent);
+  --pf-elevation-popover-shadow: 0 14px 30px
+    color-mix(in srgb, var(--color-base-black) 12%, transparent);
+  --pf-elevation-floating-shadow: 0 16px 32px
+    color-mix(in srgb, var(--color-gray-900) 8%, transparent);
+  --pf-elevation-tab-active-shadow: 0 1px 2px
+    color-mix(in srgb, var(--color-gray-900) 12%, transparent);
+  --pf-elevation-tooltip-shadow: 0 10px 24px
+    color-mix(in srgb, var(--color-base-black) 24%, transparent);
+  --pf-control-thumb-outline-shadow: 0 0 0 1px
+    color-mix(in srgb, var(--color-base-black) 6%, transparent);
+
+  /* Slider geometry aliases */
+  --pf-slider-track-height: 0.5rem;
+  --pf-slider-thumb-size: 1.125rem;
+
+  /* Tabs geometry aliases */
+  --pf-tabs-tab-padding-y-md: 0.625rem;
+  --pf-tabs-tab-padding-x-md: 0.875rem;
+  --pf-tabs-underline-width: 2px;
+
+  /* Calendar aliases */
+  --pf-calendar-bg: var(--color-semantic-background-default);
+  --pf-calendar-border: var(--color-semantic-border-default);
+  --pf-calendar-text: var(--color-semantic-text-default);
+  --pf-calendar-text-muted: var(--color-semantic-text-muted);
+  --pf-calendar-bg-subtle: var(--color-semantic-background-subtle);
+  --pf-calendar-today-bg: var(--color-semantic-status-warning-background);
+  --pf-calendar-today-border: var(--color-semantic-status-warning-border);
+  --pf-calendar-selected-bg: var(--color-semantic-action-primary);
+  --pf-calendar-selected-text: var(--color-semantic-action-primary-text);
+  --pf-calendar-selected-bg-hover: var(--color-semantic-action-primary-hover);
+  --pf-calendar-invalid-border: var(--color-semantic-status-danger-border);
+
+  /* Breadcrumbs aliases */
+  --pf-breadcrumbs-link-color: var(--color-semantic-text-muted);
+  --pf-breadcrumbs-link-hover-color: var(--color-semantic-text-default);
+  --pf-breadcrumbs-link-current-color: var(--color-semantic-text-default);
+  --pf-breadcrumbs-separator-color: var(--color-semantic-text-muted);
+
+  /* ProgressIndicators aliases */
+  --pf-progress-track-bg: var(--pf-surface-subtle);
+  --pf-progress-accent: var(--color-semantic-action-primary);
+  --pf-progress-text: var(--color-semantic-text-default);
+  --pf-progress-text-muted: var(--color-semantic-text-muted);
+
+  /* RadioGroup aliases */
+  --pf-radiogroup-text: var(--color-semantic-text-default);
+  --pf-radiogroup-text-muted: var(--color-semantic-text-muted);
+  --pf-radiogroup-accent: var(--color-semantic-action-primary);
+
+  /* SidebarNavigation aliases */
+  --pf-sidebar-nav-bg: var(--color-semantic-background-default);
+  --pf-sidebar-nav-border: var(--color-semantic-border-default);
+  --pf-sidebar-nav-text: var(--color-semantic-text-default);
+  --pf-sidebar-nav-text-muted: var(--color-semantic-text-muted);
+  --pf-sidebar-nav-bg-subtle: var(--color-semantic-background-subtle);
+
+  /* Tabs aliases */
+  --pf-tabs-border: var(--color-semantic-border-default);
+  --pf-tabs-bg-subtle: var(--color-semantic-background-subtle);
+  --pf-tabs-bg: var(--color-semantic-background-default);
+  --pf-tabs-text: var(--color-semantic-text-default);
+  --pf-tabs-text-muted: var(--color-semantic-text-muted);
+
+  /* SlideoutMenu aliases */
+  --pf-slideout-bg: var(--color-semantic-background-default);
+  --pf-slideout-border: var(--color-semantic-border-default);
+  --pf-slideout-text: var(--color-semantic-text-default);
+  --pf-slideout-text-muted: var(--color-semantic-text-muted);
+  --pf-slideout-bg-subtle: var(--color-semantic-background-subtle);
+
+  /* Metrics aliases */
+  --pf-metric-bg: var(--color-semantic-background-default);
+  --pf-metric-border: var(--color-semantic-border-default);
+  --pf-metric-text: var(--color-semantic-text-default);
+  --pf-metric-text-muted: var(--color-semantic-text-muted);
+  --pf-metric-bg-subtle: var(--color-semantic-background-subtle);
+  --pf-metric-success-bg: var(--color-semantic-status-success-background);
+  --pf-metric-success-text: var(--color-semantic-status-success-foreground);
+  --pf-metric-danger-bg: var(--color-semantic-status-danger-background);
+  --pf-metric-danger-text: var(--color-semantic-status-danger-foreground);
+
+  /* Dropdown additions */
+  --pf-dropdown-text: var(--color-semantic-text-default);
+  --pf-dropdown-text-muted: var(--color-semantic-text-muted);
+  --pf-dropdown-text-danger: var(--color-semantic-status-danger-foreground);
+  --pf-dropdown-icon-danger: var(--color-danger-500);
+
+  /* Pagination aliases */
+  --pf-pagination-bg: var(--color-semantic-background-default);
+  --pf-pagination-border: var(--color-semantic-border-muted);
+  --pf-pagination-text: var(--color-semantic-text-default);
+  --pf-pagination-text-muted: var(--color-semantic-text-muted);
+  --pf-pagination-active-bg: var(--color-semantic-action-primary);
+  --pf-pagination-active-text: var(--color-semantic-action-primary-text);
+  --pf-pagination-active-hover-bg: var(--color-semantic-action-primary-hover);
+  --pf-pagination-active-border: var(--color-semantic-action-primary);
+
+  /* Rating aliases */
+  --pf-rating-text: var(--color-semantic-text-default);
+  --pf-rating-text-muted: var(--color-semantic-text-muted);
+  --pf-rating-star-empty: var(--color-gray-300);
+  --pf-rating-star-fill: var(--color-warning-500);
+  --pf-rating-badge-bg: var(--color-warning-50);
+  --pf-rating-badge-border: var(--color-warning-200);
+  --pf-rating-badge-text: var(--color-warning-700);
+  --pf-rating-badge-reviews: var(--color-warning-800);
+
+  /* SectionHeader aliases */
+  --pf-section-header-border: var(--color-semantic-border-default);
+  --pf-section-header-text: var(--color-semantic-text-default);
+  --pf-section-header-text-muted: var(--color-semantic-text-muted);
+
+  /* Card aliases */
+  --pf-card-background: var(--color-semantic-background-default);
+  --pf-card-border: var(--color-semantic-border-default);
+  --pf-card-footer-gap: var(--space-2);
+
+  /* ButtonGroup aliases */
+  --pf-buttongroup-bg: var(--color-semantic-background-default);
+  --pf-buttongroup-bg-subtle: var(--color-semantic-background-subtle);
+  --pf-buttongroup-border: var(--color-semantic-border-default);
+  --pf-buttongroup-text: var(--color-semantic-text-default);
+  --pf-buttongroup-action-primary: var(--color-semantic-action-primary);
+  --pf-buttongroup-action-primary-hover: var(--color-semantic-action-primary-hover);
+  --pf-buttongroup-action-primary-text: var(--color-semantic-action-primary-text);
+  --pf-buttongroup-dot-selected: var(--color-base-white);
+
+  /* RadioButton aliases */
+  --pf-radio-checked-color: var(--color-semantic-action-primary);
+  --pf-radio-label-text: var(--color-semantic-text-default);
+
+  /* UtilityButton aliases */
+  --pf-utility-btn-neutral-bg: var(--color-semantic-background-default);
+  --pf-utility-btn-neutral-border: var(--color-semantic-border-default);
+  --pf-utility-btn-neutral-text: var(--color-semantic-text-default);
+  --pf-utility-btn-neutral-bg-hover: var(--color-semantic-background-subtle);
+  --pf-utility-btn-neutral-border-hover: var(--color-semantic-border-strong);
+  --pf-utility-btn-brand-bg: var(--color-brand-100);
+  --pf-utility-btn-brand-border: var(--color-brand-300);
+  --pf-utility-btn-brand-text: var(--color-brand-700);
+  --pf-utility-btn-brand-bg-hover: var(--color-brand-200);
+  --pf-utility-btn-danger-bg: var(--color-semantic-status-danger-background);
+  --pf-utility-btn-danger-border: var(--color-semantic-status-danger-border);
+  --pf-utility-btn-danger-text: var(--color-semantic-status-danger-foreground);
+  --pf-utility-btn-danger-bg-hover: var(--color-danger-100);
+
+  /* Accordion aliases */
+  --pf-accordion-border: var(--color-semantic-border-default);
+  --pf-accordion-trigger-text: var(--color-semantic-text-default);
+  --pf-accordion-trigger-bg-hover: var(--color-semantic-background-subtle);
+  --pf-accordion-icon: var(--color-semantic-text-muted);
+  --pf-accordion-content-text: var(--color-semantic-text-muted);
+
+  /* Heatmap aliases */
+  --pf-heatmap-color: var(--color-semantic-action-primary);
+  --pf-heatmap-empty: var(--color-semantic-background-subtle);
+  --pf-heatmap-label-color: var(--color-semantic-text-muted);
+  --pf-heatmap-cell-radius: var(--radius-sm);
+
+  /* GaugeChart aliases */
+  --pf-gauge-color: var(--color-semantic-action-primary);
+  --pf-gauge-track-color: var(--color-semantic-background-subtle);
+  --pf-gauge-center-bg: var(--color-semantic-background-default);
+  --pf-gauge-label-color: var(--color-semantic-text-default);
+  --pf-gauge-label-size: var(--font-size-2xl);
+  --pf-gauge-sub-label-color: var(--color-semantic-text-muted);
+
+  /* Sparkline aliases */
+  --pf-sparkline-color: var(--color-semantic-action-primary);
+
+  /* TreeView aliases */
+  --pf-treeview-bg: var(--color-semantic-background-default);
+  --pf-treeview-border: var(--color-semantic-border-default);
+  --pf-treeview-text: var(--color-semantic-text-default);
+  --pf-treeview-text-muted: var(--color-semantic-text-muted);
+  --pf-treeview-bg-subtle: var(--color-semantic-background-subtle);
+
+  /* Input additions */
+  --pf-field-required: var(--color-semantic-status-danger-foreground);
+  --pf-input-focus-border: var(--color-semantic-action-primary);
+  --pf-input-invalid-border: var(--color-semantic-status-danger-border);
+  --pf-control-border-disabled: var(--color-gray-200);
+
+  /* RichTextEditor aliases */
+  --pf-rte-bg: var(--color-semantic-background-default);
+  --pf-rte-bg-subtle: var(--color-semantic-background-subtle);
+  --pf-rte-border: var(--color-semantic-border-default);
+  --pf-rte-text: var(--color-semantic-text-default);
+  --pf-rte-text-muted: var(--color-semantic-text-muted);
+  --pf-rte-focus-border: var(--color-semantic-action-primary);
+  --pf-rte-invalid-border: var(--color-semantic-status-danger-border);
+
+  /* Notification aliases */
+  --pf-notification-bg: var(--color-semantic-background-default);
+  --pf-notification-border: var(--color-semantic-border-default);
+  --pf-notification-text: var(--color-semantic-text-default);
+  --pf-notification-text-muted: var(--color-semantic-text-muted);
+  --pf-notification-bg-subtle: var(--color-semantic-background-subtle);
+  /* Surface the variant tints blend toward; white in light, a dark raised
+     surface in dark so cards stay dark and text keeps contrast. */
+  --pf-notification-mix-base: var(--color-base-white);
+  --pf-notification-info-bg: var(--color-brand-50);
+  --pf-notification-info-border: var(--color-brand-300);
+  --pf-notification-info-icon: var(--color-brand-700);
+  --pf-notification-info-title: var(--color-brand-800);
+  --pf-notification-info-hover-bg: var(--color-brand-100);
+  --pf-notification-info-hover-icon: var(--color-brand-800);
+  --pf-notification-success-bg: var(--color-semantic-status-success-background);
+  --pf-notification-success-border: var(--color-semantic-status-success-border);
+  --pf-notification-success-icon: var(--color-semantic-status-success-foreground);
+  --pf-notification-warning-bg: var(--color-semantic-status-warning-background);
+  --pf-notification-warning-border: var(--color-semantic-status-warning-border);
+  --pf-notification-warning-icon: var(--color-semantic-status-warning-foreground);
+  --pf-notification-danger-bg: var(--color-semantic-status-danger-background);
+  --pf-notification-danger-border: var(--color-semantic-status-danger-border);
+  --pf-notification-danger-icon: var(--color-semantic-status-danger-foreground);
+
+  /* Alert aliases */
+  --pf-alert-border: var(--color-semantic-border-default);
+  --pf-alert-info-background: var(--color-brand-50);
+  --pf-alert-info-border: var(--color-brand-300);
+  --pf-alert-info-foreground: var(--color-brand-800);
+  --pf-alert-success-background: var(--color-semantic-status-success-background);
+  --pf-alert-success-border: var(--color-semantic-status-success-border);
+  --pf-alert-success-foreground: var(--color-semantic-status-success-foreground);
+  --pf-alert-warning-background: var(--color-semantic-status-warning-background);
+  --pf-alert-warning-border: var(--color-semantic-status-warning-border);
+  --pf-alert-warning-foreground: var(--color-semantic-status-warning-foreground);
+  --pf-alert-danger-background: var(--color-semantic-status-danger-background);
+  --pf-alert-danger-border: var(--color-semantic-status-danger-border);
+  --pf-alert-danger-foreground: var(--color-semantic-status-danger-foreground);
+
+  /* VideoPlayer aliases */
+  --pf-videoplayer-bg: var(--color-base-black);
+  --pf-videoplayer-border: var(--color-semantic-border-default);
+  --pf-videoplayer-text-muted: var(--color-semantic-text-muted);
+  --pf-videoplayer-invalid-border: var(--color-semantic-status-danger-border);
+
+  /* RadarChart aliases */
+  --pf-radar-grid-stroke: var(--color-semantic-border-default);
+  --pf-radar-axis-stroke: var(--color-semantic-border-muted);
+  --pf-radar-point-stroke: var(--color-semantic-background-default);
+  --pf-radar-label: var(--color-semantic-text-muted);
+  --pf-radar-legend-text: var(--color-semantic-text-default);
+  --pf-radar-legend-value: var(--color-semantic-text-muted);
+  --pf-radar-empty-border: var(--color-semantic-border-default);
+  --pf-radar-empty-text: var(--color-semantic-text-muted);
+
+  /* DatePicker aliases */
+  --pf-datepicker-bg: var(--color-semantic-background-default);
+  --pf-datepicker-bg-subtle: var(--color-semantic-background-subtle);
+  --pf-datepicker-border: var(--color-semantic-border-default);
+  --pf-datepicker-border-strong: var(--color-semantic-border-strong);
+  --pf-datepicker-text: var(--color-semantic-text-default);
+  --pf-datepicker-text-muted: var(--color-semantic-text-muted);
+  --pf-datepicker-focus-border: var(--color-semantic-action-primary);
+  --pf-datepicker-invalid-border: var(--color-semantic-status-danger-border);
+
+  /* BadgeGroup aliases */
+  --pf-badgegroup-gray-100: var(--color-gray-100);
+  --pf-badgegroup-gray-200: var(--color-gray-200);
+  --pf-badgegroup-gray-700: var(--color-gray-700);
+  --pf-badgegroup-brand-100: var(--color-brand-100);
+  --pf-badgegroup-brand-300: var(--color-brand-300);
+  --pf-badgegroup-brand-700: var(--color-brand-700);
+  --pf-badgegroup-danger-bg: var(--color-semantic-status-danger-background);
+  --pf-badgegroup-danger-border: var(--color-semantic-status-danger-border);
+  --pf-badgegroup-danger-text: var(--color-semantic-status-danger-foreground);
+  --pf-badgegroup-warning-bg: var(--color-semantic-status-warning-background);
+  --pf-badgegroup-warning-border: var(--color-semantic-status-warning-border);
+  --pf-badgegroup-warning-text: var(--color-semantic-status-warning-foreground);
+  --pf-badgegroup-success-bg: var(--color-semantic-status-success-background);
+  --pf-badgegroup-success-border: var(--color-semantic-status-success-border);
+  --pf-badgegroup-success-text: var(--color-semantic-status-success-foreground);
+
+  /* Checkbox aliases */
+  --pf-checkbox-bg: var(--color-semantic-background-default);
+  --pf-checkbox-border: var(--color-semantic-border-default);
+  --pf-checkbox-checked-bg: var(--color-semantic-action-primary);
+  --pf-checkbox-check-color: var(--color-semantic-action-primary-text);
+  --pf-checkbox-label-text: var(--color-semantic-text-default);
+
+  /* Slider aliases */
+  --pf-slider-text: var(--color-semantic-text-default);
+  --pf-slider-text-muted: var(--color-semantic-text-muted);
+  --pf-slider-error-text: var(--color-semantic-status-danger-foreground);
+  --pf-slider-action: var(--color-semantic-action-primary);
+  --pf-slider-border: var(--color-semantic-border-default);
+  --pf-slider-bg: var(--color-semantic-background-default);
+  --pf-slider-danger-fill: var(--color-danger-500);
+
+  /* PageHeader aliases */
+  --pf-page-header-eyebrow: var(--color-semantic-action-primary);
+  --pf-page-header-text: var(--color-semantic-text-default);
+  --pf-page-header-text-muted: var(--color-semantic-text-muted);
+
+  /* Carousel aliases */
+  --pf-carousel-bg: var(--color-semantic-background-default);
+  --pf-carousel-border: var(--color-semantic-border-default);
+  --pf-carousel-viewport-bg: var(--color-semantic-background-subtle);
+  --pf-carousel-slide-text: var(--color-semantic-text-default);
+  --pf-carousel-empty-text: var(--color-semantic-text-muted);
+  --pf-carousel-nav-text: var(--color-semantic-text-muted);
+  --pf-carousel-nav-hover-bg: var(--color-semantic-background-subtle);
+  --pf-carousel-nav-hover-text: var(--color-semantic-text-default);
+  --pf-carousel-indicator-bg: var(--color-semantic-border-default);
+  --pf-carousel-indicator-active-bg: var(--color-semantic-action-primary);
+
+  /* PieChart aliases */
+  --pf-piechart-border-muted: var(--color-semantic-border-muted);
+  --pf-piechart-bg: var(--color-semantic-background-default);
+  --pf-piechart-text: var(--color-semantic-text-default);
+  --pf-piechart-text-muted: var(--color-semantic-text-muted);
+
+  /* ContentDivider aliases */
+  --pf-content-divider-text: var(--color-semantic-text-muted);
+  --pf-content-divider-line: var(--color-semantic-border-default);
+
+  /* Textarea aliases */
+  --pf-textarea-bg: var(--color-semantic-background-default);
+  --pf-textarea-border: var(--color-semantic-border-default);
+  --pf-textarea-text: var(--color-semantic-text-default);
+  --pf-textarea-text-muted: var(--color-semantic-text-muted);
+  --pf-textarea-focus-border: var(--color-semantic-action-primary);
+  --pf-textarea-invalid-border: var(--color-semantic-status-danger-border);
+
+  /* Table aliases */
+  --pf-table-bg: var(--color-semantic-background-default);
+  --pf-table-bg-subtle: var(--color-semantic-background-subtle);
+  --pf-table-border: var(--color-semantic-border-default);
+  --pf-table-text: var(--color-semantic-text-default);
+  --pf-table-text-muted: var(--color-semantic-text-muted);
+
+  /* LoadingIndicators aliases */
+  --pf-loading-border: var(--color-semantic-border-default);
+  --pf-loading-accent: var(--color-semantic-action-primary);
+  --pf-loading-bg-subtle: var(--color-semantic-background-subtle);
+
+  /* Avatar aliases */
+  --pf-avatar-text: var(--color-semantic-text-default);
+  --pf-avatar-status-border: var(--pf-surface-bg);
+  --pf-avatar-status-online: var(--color-semantic-status-success-bright);
+  --pf-avatar-status-away: var(--color-semantic-status-warning-bright);
+  --pf-avatar-status-busy: var(--color-semantic-status-danger-bright);
+  --pf-avatar-status-offline: var(--color-semantic-text-muted);
+
+  /* Switch aliases */
+  --pf-switch-track-bg: var(--color-gray-300);
+  --pf-switch-thumb-bg: var(--color-base-white);
+  --pf-switch-track-checked-bg: var(--color-semantic-action-primary);
+  --pf-switch-label-text: var(--color-semantic-text-default);
+
+  /* LineBarChart additions */
+  --pf-chart-text-muted: var(--color-semantic-text-muted);
+
+  /* InlineCTA aliases */
+  --pf-inline-cta-bg: var(--color-semantic-background-default);
+  --pf-inline-cta-border: var(--color-semantic-border-default);
+  --pf-inline-cta-text: var(--color-semantic-text-default);
+  --pf-inline-cta-text-muted: var(--color-semantic-text-muted);
+  --pf-inline-cta-info-bg: var(--color-brand-50);
+  --pf-inline-cta-info-border: var(--color-brand-300);
+  --pf-inline-cta-info-icon: var(--color-brand-700);
+  --pf-inline-cta-info-heading: var(--color-brand-800);
+  --pf-inline-cta-info-description: var(--color-brand-700);
+  --pf-inline-cta-success-bg: var(--color-semantic-status-success-background);
+  --pf-inline-cta-success-border: var(--color-semantic-status-success-border);
+  --pf-inline-cta-warning-bg: var(--color-semantic-status-warning-background);
+  --pf-inline-cta-warning-border: var(--color-semantic-status-warning-border);
+
+  /* Select additions */
+  --pf-select-focus-border: var(--color-semantic-action-primary);
+  --pf-select-invalid-border: var(--color-semantic-status-danger-border);
+
+  /* FileUploader aliases */
+  --pf-file-uploader-bg: var(--color-semantic-background-default);
+  --pf-file-uploader-bg-subtle: var(--color-semantic-background-subtle);
+  --pf-file-uploader-border: var(--color-semantic-border-default);
+  --pf-file-uploader-border-strong: var(--color-semantic-border-strong);
+  --pf-file-uploader-text: var(--color-semantic-text-default);
+  --pf-file-uploader-text-muted: var(--color-semantic-text-muted);
+  --pf-file-uploader-active-border: var(--color-semantic-action-primary);
+  --pf-file-uploader-invalid-border: var(--color-semantic-status-danger-border);
+
+  /* ProgressSteps aliases */
+  --pf-progress-steps-bg: var(--color-semantic-background-default);
+  --pf-progress-steps-border: var(--color-semantic-border-default);
+  --pf-progress-steps-text: var(--color-semantic-text-default);
+  --pf-progress-steps-text-muted: var(--color-semantic-text-muted);
+  --pf-progress-steps-complete-bg: var(--color-semantic-status-success-border);
+  --pf-progress-steps-complete-border: var(--color-semantic-status-success-border);
+  --pf-progress-steps-complete-text: var(--color-success-900);
+  --pf-progress-steps-current-bg: var(--color-semantic-status-success-foreground);
+  --pf-progress-steps-current-border: var(--color-semantic-status-success-foreground);
+  --pf-progress-steps-current-text: var(--color-base-white);
+  --pf-progress-steps-current-title: var(--color-semantic-status-success-foreground);
+
+  /* SectionFooter aliases */
+  --pf-section-footer-border: var(--color-semantic-border-default);
+  --pf-section-footer-text: var(--color-semantic-text-default);
+  --pf-section-footer-text-muted: var(--color-semantic-text-muted);
+
+  /* Modal aliases */
+  --pf-modal-bg: var(--color-semantic-background-default);
+  --pf-modal-border: var(--color-semantic-border-default);
+  --pf-modal-text: var(--color-semantic-text-default);
+  --pf-modal-text-muted: var(--color-semantic-text-muted);
+  --pf-modal-bg-subtle: var(--color-semantic-background-subtle);
+
+  /* MultiSelect aliases */
+  --pf-multiselect-bg: var(--color-semantic-background-default);
+  --pf-multiselect-bg-subtle: var(--color-semantic-background-subtle);
+  --pf-multiselect-border: var(--color-semantic-text-muted);
+  --pf-multiselect-text: var(--color-semantic-text-default);
+  --pf-multiselect-text-muted: var(--color-semantic-text-muted);
+  --pf-multiselect-focus-border: var(--color-semantic-action-primary);
+  --pf-multiselect-active-bg: var(--color-semantic-action-primary);
+  --pf-multiselect-active-text: var(--color-semantic-action-primary-text);
+  --pf-multiselect-invalid-border: var(--color-semantic-status-danger-border);
+
+  /* Tag aliases */
+  --pf-tag-neutral-bg: var(--color-gray-100);
+  --pf-tag-neutral-text: var(--color-gray-700);
+  --pf-tag-brand-bg: var(--color-brand-100);
+  --pf-tag-brand-text: var(--color-brand-700);
+  --pf-tag-success-bg: var(--color-semantic-status-success-background);
+  --pf-tag-success-text: var(--color-semantic-status-success-foreground);
+  --pf-tag-warning-bg: var(--color-semantic-status-warning-background);
+  --pf-tag-warning-text: var(--color-semantic-status-warning-foreground);
+
+  /* HeaderNavigation aliases */
+  --pf-header-nav-bg: var(--color-semantic-background-default);
+  --pf-header-nav-border: var(--color-semantic-border-default);
+  --pf-header-nav-text: var(--color-semantic-text-default);
+  --pf-header-nav-text-muted: var(--color-semantic-text-muted);
+  --pf-header-nav-bg-subtle: var(--color-semantic-background-subtle);
+
+  /* Dropdown geometry aliases */
+  --pf-dropdown-icon-size: 1rem;
+  --pf-dropdown-menu-gap: 2px;
+
+  /* Pagination geometry aliases */
+  --pf-pagination-page-size: 2rem;
+
+  /* Tooltip geometry aliases */
+  --pf-tooltip-padding-x: 0.625rem;
+
+  /* EmptyState aliases */
+  --pf-empty-state-icon: var(--color-semantic-text-muted);
+  --pf-empty-state-text: var(--color-semantic-text-default);
+  --pf-empty-state-text-muted: var(--color-semantic-text-muted);
+
+  /* Utility color aliases */
+  --pf-tooltip-bg: var(--color-gray-900);
+  --pf-tooltip-text: var(--color-base-white);
+  --pf-subtle-hover-overlay: color-mix(in srgb, var(--color-base-black) 8%, transparent);
+}
+
+[data-theme='dark'] {
+  color-scheme: dark;
+
+  --color-semantic-background-default: var(--color-gray-900);
+  --color-semantic-background-subtle: var(--color-gray-700);
+  --color-semantic-background-raised: var(--color-gray-800);
+  --color-semantic-background-disabled: var(--color-gray-800);
+  --color-semantic-text-default: var(--color-gray-50);
+  --color-semantic-text-muted: var(--color-gray-300);
+  --color-semantic-text-subtle: var(--color-gray-200);
+  --color-semantic-text-inverse: var(--color-gray-900);
+  --color-semantic-text-disabled: var(--color-gray-500);
+  --color-semantic-border-muted: var(--color-gray-800);
+  --color-semantic-border-default: var(--color-gray-700);
+  --color-semantic-border-strong: var(--color-gray-500);
+  --color-semantic-border-focus: var(--color-brand-400);
+
+  /* brand-600 (#2563eb) on white = ~5:1 — passes WCAG AA for normal text */
+  --color-semantic-action-primary: var(--color-brand-600);
+  --color-semantic-action-primary-hover: var(--color-brand-700);
+  --color-semantic-action-primary-active: var(--color-brand-800);
+  --color-semantic-action-primary-text: var(--color-base-white);
+  --color-semantic-action-secondary: var(--color-gray-800);
+  --color-semantic-action-secondary-hover: var(--color-gray-700);
+  --color-semantic-action-secondary-text: var(--color-gray-50);
+  --color-semantic-status-success-background: var(--color-success-900);
+  --color-semantic-status-success-border: var(--color-success-700);
+  --color-semantic-status-success-foreground: var(--color-success-300);
+  --color-semantic-status-success-bright: var(--color-success-400);
+  --color-semantic-status-warning-background: var(--color-warning-900);
+  --color-semantic-status-warning-border: var(--color-warning-700);
+  --color-semantic-status-warning-foreground: var(--color-warning-300);
+  --color-semantic-status-warning-bright: var(--color-warning-400);
+  --color-semantic-status-danger-background: var(--color-danger-900);
+  /* danger-600 (#d92d20) on gray-900 = 3.71:1 — danger-700 only gives 2.72:1 */
+  --color-semantic-status-danger-border: var(--color-danger-600);
+  --color-semantic-status-danger-foreground: var(--color-danger-300);
+  --color-semantic-status-danger-bright: var(--color-danger-400);
+
+  /* Info state overrides — light brand colors (brand-50/100/300) are invisible on dark surfaces */
+  --pf-notification-mix-base: var(--color-semantic-background-raised);
+  --pf-notification-info-bg: var(--color-brand-900);
+  --pf-notification-info-border: var(--color-brand-700);
+  --pf-notification-info-icon: var(--color-brand-300);
+  --pf-notification-info-title: var(--color-brand-200);
+  --pf-notification-info-hover-bg: var(--color-brand-800);
+  --pf-notification-info-hover-icon: var(--color-brand-200);
+
+  --pf-alert-info-background: var(--color-brand-900);
+  --pf-alert-info-border: var(--color-brand-700);
+  --pf-alert-info-foreground: var(--color-brand-200);
+
+  --pf-inline-cta-info-bg: var(--color-brand-900);
+  --pf-inline-cta-info-border: var(--color-brand-700);
+  --pf-inline-cta-info-icon: var(--color-brand-300);
+  --pf-inline-cta-info-heading: var(--color-brand-200);
+  --pf-inline-cta-info-description: var(--color-brand-300);
+
+  --pf-badge-brand-background: var(--color-brand-900);
+  --pf-badge-brand-foreground: var(--color-brand-300);
+
+  --pf-badgegroup-brand-100: var(--color-brand-900);
+  --pf-badgegroup-brand-300: var(--color-brand-700);
+  --pf-badgegroup-brand-700: var(--color-brand-300);
+
+  --pf-tag-brand-bg: var(--color-brand-900);
+  --pf-tag-brand-text: var(--color-brand-300);
+
+  --pf-utility-btn-brand-bg: var(--color-brand-900);
+  --pf-utility-btn-brand-border: var(--color-brand-700);
+  --pf-utility-btn-brand-text: var(--color-brand-300);
+  --pf-utility-btn-brand-bg-hover: var(--color-brand-800);
+
+  /* Calendar — same border-default contrast issue as TreeView */
+  --pf-calendar-border: var(--color-semantic-border-strong);
+
+  /* GaugeChart — track uses background-subtle (gray-700) which is 1.72:1 against gray-900 */
+  --pf-gauge-track-color: var(--color-semantic-border-strong);
+
+  /* ProgressSteps — semantic success bg shades flip in dark mode, so the marker
+     numbers need opposite text colors to keep ≥4.5:1.
+     complete: white on success-700 = 5.4:1; current: success-900 on success-300 = 6.4:1 */
+  --pf-progress-steps-complete-text: var(--color-base-white);
+  --pf-progress-steps-current-text: var(--color-success-900);
+
+  /* TreeView — border-default (gray-700) is 1.73:1 against gray-900, fails WCAG non-text contrast.
+     border-strong (gray-500) gives 3.75:1. */
+  --pf-treeview-border: var(--color-semantic-border-strong);
+
+  --pf-focus-ring: 0 0 0 var(--pf-focus-ring-width)
+    color-mix(in srgb, var(--pf-focus-ring-color) 45%, transparent);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  color: var(--color-semantic-text-default);
+  background: var(--color-semantic-background-default);
+}
+
+.pf-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.pf-focus-ring:focus-visible {
+  box-shadow: var(--pf-focus-ring);
+  outline: none;
+}
+
+.pf-focus-outline:focus-visible {
+  outline: var(--pf-focus-outline);
+  outline-offset: var(--pf-focus-ring-offset);
+}