hb-vue-theme/dist/theme.css

Custom PrimeVue 4 theme with 'hb' prefix using design tokens and PrimeFlex

/* =============================================================================
   HB VUE THEME - CSS VARIABLES
   =============================================================================
   Generated from design tokens
   ============================================================================= */

:root {
  --hb-primary-50: #eff6ff;
  --hb-primary-100: #dbeafe;
  --hb-primary-200: #bfdbfe;
  --hb-primary-300: #93c5fd;
  --hb-primary-400: #60a5fa;
  --hb-primary-500: #3b82f6;
  --hb-primary-600: #2563eb;
  --hb-primary-700: #1d4ed8;
  --hb-primary-800: #1e40af;
  --hb-primary-900: #1e3a8a;
  --hb-secondary-50: #f8fafc;
  --hb-secondary-100: #f1f5f9;
  --hb-secondary-200: #e2e8f0;
  --hb-secondary-300: #cbd5e1;
  --hb-secondary-400: #94a3b8;
  --hb-secondary-500: #64748b;
  --hb-secondary-600: #475569;
  --hb-secondary-700: #334155;
  --hb-secondary-800: #1e293b;
  --hb-secondary-900: #0f172a;
  --hb-success-50: #f0fdf4;
  --hb-success-100: #dcfce7;
  --hb-success-200: #bbf7d0;
  --hb-success-300: #86efac;
  --hb-success-400: #4ade80;
  --hb-success-500: #22c55e;
  --hb-success-600: #16a34a;
  --hb-success-700: #15803d;
  --hb-success-800: #166534;
  --hb-success-900: #14532d;
  --hb-warning-50: #fffbeb;
  --hb-warning-100: #fef3c7;
  --hb-warning-200: #fde68a;
  --hb-warning-300: #fcd34d;
  --hb-warning-400: #fbbf24;
  --hb-warning-500: #f59e0b;
  --hb-warning-600: #d97706;
  --hb-warning-700: #b45309;
  --hb-warning-800: #92400e;
  --hb-warning-900: #78350f;
  --hb-danger-50: #fef2f2;
  --hb-danger-100: #fee2e2;
  --hb-danger-200: #fecaca;
  --hb-danger-300: #fca5a5;
  --hb-danger-400: #f87171;
  --hb-danger-500: #ef4444;
  --hb-danger-600: #dc2626;
  --hb-danger-700: #b91c1c;
  --hb-danger-800: #991b1b;
  --hb-danger-900: #7f1d1d;
  --hb-info-50: #f0f9ff;
  --hb-info-100: #e0f2fe;
  --hb-info-200: #bae6fd;
  --hb-info-300: #7dd3fc;
  --hb-info-400: #38bdf8;
  --hb-info-500: #0ea5e9;
  --hb-info-600: #0284c7;
  --hb-info-700: #0369a1;
  --hb-info-800: #075985;
  --hb-info-900: #0c4a6e;
  --hb-neutral-50: #fafafa;
  --hb-neutral-100: #f5f5f5;
  --hb-neutral-200: #e5e5e5;
  --hb-neutral-300: #d4d4d4;
  --hb-neutral-400: #a3a3a3;
  --hb-neutral-500: #737373;
  --hb-neutral-600: #525252;
  --hb-neutral-700: #404040;
  --hb-neutral-800: #262626;
  --hb-neutral-900: #171717;
  --hb-primary: var(--hb-primary-500);
  --hb-primary-light: var(--hb-primary-400);
  --hb-primary-dark: var(--hb-primary-600);
  --hb-primary-hover: var(--hb-primary-600);
  --hb-primary-active: var(--hb-primary-700);
  --hb-secondary: var(--hb-secondary-500);
  --hb-secondary-light: var(--hb-secondary-400);
  --hb-secondary-dark: var(--hb-secondary-600);
  --hb-success: var(--hb-success-500);
  --hb-warning: var(--hb-warning-500);
  --hb-danger: var(--hb-danger-500);
  --hb-info: var(--hb-info-500);
  --hb-text-primary: var(--hb-neutral-900);
  --hb-text-secondary: var(--hb-neutral-600);
  --hb-text-muted: var(--hb-neutral-500);
  --hb-text-disabled: var(--hb-neutral-400);
  --hb-text-inverse: var(--hb-neutral-50);
  --hb-bg-primary: #ffffff;
  --hb-bg-secondary: var(--hb-neutral-50);
  --hb-bg-tertiary: var(--hb-neutral-100);
  --hb-bg-overlay: rgba(0, 0, 0, 0.5);
  --hb-border-light: var(--hb-neutral-200);
  --hb-border-medium: var(--hb-neutral-300);
  --hb-border-dark: var(--hb-neutral-400);
  --hb-border-focus: var(--hb-primary-500);
  --hb-font-family-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --hb-font-family-mono: 'Courier New', Courier, monospace;
  --hb-font-size-xs: 0.75rem;
  --hb-font-size-sm: 0.875rem;
  --hb-font-size-base: 1rem;
  --hb-font-size-lg: 1.125rem;
  --hb-font-size-xl: 1.25rem;
  --hb-font-size-2xl: 1.5rem;
  --hb-font-size-3xl: 1.875rem;
  --hb-font-size-4xl: 2.25rem;
  --hb-font-weight-light: 300;
  --hb-font-weight-normal: 400;
  --hb-font-weight-medium: 500;
  --hb-font-weight-semibold: 600;
  --hb-font-weight-bold: 700;
  --hb-line-height-tight: 1.25;
  --hb-line-height-normal: 1.5;
  --hb-line-height-relaxed: 1.75;
  --hb-spacing-0: 0;
  --hb-spacing-1: 0.25rem;
  --hb-spacing-2: 0.5rem;
  --hb-spacing-3: 0.75rem;
  --hb-spacing-4: 1rem;
  --hb-spacing-5: 1.25rem;
  --hb-spacing-6: 1.5rem;
  --hb-spacing-8: 2rem;
  --hb-spacing-10: 2.5rem;
  --hb-spacing-12: 3rem;
  --hb-spacing-16: 4rem;
  --hb-spacing-20: 5rem;
  --hb-spacing-24: 6rem;
  --hb-border-radius-none: 0;
  --hb-border-radius-sm: 0.125rem;
  --hb-border-radius-base: 0.25rem;
  --hb-border-radius-md: 0.375rem;
  --hb-border-radius-lg: 0.5rem;
  --hb-border-radius-xl: 0.75rem;
  --hb-border-radius-2xl: 1rem;
  --hb-border-radius-full: 9999px;
  --hb-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --hb-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --hb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --hb-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --hb-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --hb-transition-fast: 150ms ease-in-out;
  --hb-transition-base: 250ms ease-in-out;
  --hb-transition-slow: 350ms ease-in-out;
  --hb-z-index-dropdown: 1000;
  --hb-z-index-sticky: 1020;
  --hb-z-index-fixed: 1030;
  --hb-z-index-modal-backdrop: 1040;
  --hb-z-index-modal: 1050;
  --hb-z-index-popover: 1060;
  --hb-z-index-tooltip: 1070;
  --hb-breakpoint-sm: 640px;
  --hb-breakpoint-md: 768px;
  --hb-breakpoint-lg: 1024px;
  --hb-breakpoint-xl: 1280px;
  --hb-breakpoint-2xl: 1536px;
  --primary-color: var(--hb-primary);
  --primary-color-text: var(--hb-text-inverse);
  --surface-ground: var(--hb-bg-secondary);
  --surface-section: var(--hb-bg-primary);
  --surface-card: var(--hb-bg-primary);
  --surface-overlay: var(--hb-bg-primary);
  --surface-border: var(--hb-border-light);
  --surface-hover: var(--hb-bg-secondary);
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.1);
  --maskbg: var(--hb-bg-overlay);
  --text-color: var(--hb-text-primary);
  --text-color-secondary: var(--hb-text-secondary);
  --text-muted-color: var(--hb-text-muted);
  --border-radius: var(--hb-border-radius-md);
  --border-radius-sm: var(--hb-border-radius-sm);
  --border-radius-lg: var(--hb-border-radius-lg);
  --content-padding: var(--hb-spacing-4);
  --inline-spacing: var(--hb-spacing-2);
  --transition-duration: var(--hb-transition-base);
  --font-family: var(--hb-font-family-primary);
  --font-size: var(--hb-font-size-base);
  --font-weight: var(--hb-font-weight-normal);
  --font-weight-bold: var(--hb-font-weight-bold);
  --shadow-1: var(--hb-shadow-sm);
  --shadow-2: var(--hb-shadow-base);
  --shadow-3: var(--hb-shadow-md);
  --shadow-4: var(--hb-shadow-lg);
  --shadow-5: var(--hb-shadow-xl);
  --button-padding: var(--hb-spacing-3) var(--hb-spacing-4);
  --button-border-radius: var(--hb-border-radius-md);
  --button-font-weight: var(--hb-font-weight-medium);
  --button-transition: var(--hb-transition-base);
  --button-primary-bg: var(--hb-primary);
  --button-primary-color: var(--hb-text-inverse);
  --button-primary-hover-bg: var(--hb-primary-hover);
  --button-secondary-bg: var(--hb-bg-primary);
  --button-secondary-color: var(--hb-text-primary);
  --button-secondary-border: var(--hb-border-medium);
  --button-success-bg: var(--hb-success);
  --button-warning-bg: var(--hb-warning);
  --button-danger-bg: var(--hb-danger);
  --button-info-bg: var(--hb-info);
  --input-padding: var(--hb-spacing-3) var(--hb-spacing-4);
  --input-border-radius: var(--hb-border-radius-md);
  --input-border-color: var(--hb-border-medium);
  --input-focus-border-color: var(--hb-border-focus);
  --input-focus-box-shadow: var(--hb-shadow-sm);
  --input-bg: var(--hb-bg-primary);
  --input-color: var(--hb-text-primary);
  --input-placeholder-color: var(--hb-text-muted);
  --input-disabled-bg: var(--hb-bg-tertiary);
  --input-disabled-color: var(--hb-text-disabled);
  --select-padding: var(--hb-spacing-3) var(--hb-spacing-4);
  --select-border-radius: var(--hb-border-radius-md);
  --select-bg: var(--hb-bg-primary);
  --select-border-color: var(--hb-border-medium);
  --select-focus-border-color: var(--hb-border-focus);
  --select-hover-bg: var(--hb-bg-secondary);
  --select-item-padding: var(--hb-spacing-2) var(--hb-spacing-4);
  --select-item-hover-bg: var(--hb-bg-secondary);
  --select-item-selected-bg: var(--hb-primary-50);
  --select-item-selected-color: var(--hb-primary);
  --select-trigger-bg: var(--hb-bg-primary);
  --select-trigger-border: 1px solid var(--hb-border-medium);
  --select-trigger-border-radius: var(--hb-border-radius-md);
  --select-trigger-padding: var(--hb-spacing-3) var(--hb-spacing-4);
  --select-trigger-hover-bg: var(--hb-bg-secondary);
  --select-trigger-focus-border-color: var(--hb-border-focus);
  --select-trigger-focus-box-shadow: var(--hb-shadow-sm);
  --multiselect-padding: var(--hb-spacing-2) var(--hb-spacing-4);
  --multiselect-border-radius: var(--hb-border-radius-md);
  --multiselect-token-bg: var(--hb-primary-50);
  --multiselect-token-color: var(--hb-primary);
  --multiselect-token-border-radius: var(--hb-border-radius-sm);
  --multiselect-token-padding: var(--hb-spacing-1) var(--hb-spacing-2);
  --calendar-bg: var(--hb-bg-primary);
  --calendar-border-radius: var(--hb-border-radius-lg);
  --calendar-header-bg: var(--hb-bg-secondary);
  --calendar-day-hover-bg: var(--hb-bg-secondary);
  --calendar-day-selected-bg: var(--hb-primary);
  --calendar-day-selected-color: var(--hb-text-inverse);
  --calendar-day-today-bg: var(--hb-primary-50);
  --calendar-day-today-color: var(--hb-primary);
  --checkbox-size: 1.25rem;
  --checkbox-border-radius: var(--hb-border-radius-sm);
  --checkbox-border-color: var(--hb-border-medium);
  --checkbox-checked-bg: var(--hb-primary);
  --checkbox-checked-border-color: var(--hb-primary);
  --checkbox-hover-border-color: var(--hb-border-dark);
  --checkbox-focus-border-color: var(--hb-border-focus);
  --radiobutton-size: 1.25rem;
  --radiobutton-border-color: var(--hb-border-medium);
  --radiobutton-checked-bg: var(--hb-primary);
  --radiobutton-checked-border-color: var(--hb-primary);
  --radiobutton-hover-border-color: var(--hb-border-dark);
  --radiobutton-focus-border-color: var(--hb-border-focus);
  --switch-width: 3rem;
  --switch-height: 1.5rem;
  --switch-border-radius: var(--hb-border-radius-full);
  --switch-bg: var(--hb-border-medium);
  --switch-checked-bg: var(--hb-primary);
  --switch-thumb-size: 1.125rem;
  --switch-thumb-bg: var(--hb-bg-primary);
  --switch-transition: var(--hb-transition-base);
  --slider-track-bg: var(--hb-border-light);
  --slider-track-height: 0.25rem;
  --slider-track-border-radius: var(--hb-border-radius-full);
  --slider-range-bg: var(--hb-primary);
  --slider-handle-size: 1.25rem;
  --slider-handle-bg: var(--hb-bg-primary);
  --slider-handle-border: 2px solid var(--hb-primary);
  --slider-handle-border-radius: var(--hb-border-radius-full);
  --datatable-bg: var(--hb-bg-primary);
  --datatable-border-radius: var(--hb-border-radius-lg);
  --datatable-header-bg: var(--hb-bg-secondary);
  --datatable-header-color: var(--hb-text-primary);
  --datatable-header-font-weight: var(--hb-font-weight-semibold);
  --datatable-row-hover-bg: var(--hb-bg-secondary);
  --datatable-row-selected-bg: var(--hb-primary-50);
  --datatable-border-color: var(--hb-border-light);
  --datatable-pagination-bg: var(--hb-bg-secondary);
  --datatable-pagination-border-color: var(--hb-border-light);
  --tree-bg: var(--hb-bg-primary);
  --tree-border-radius: var(--hb-border-radius-md);
  --tree-node-padding: var(--hb-spacing-2) var(--hb-spacing-4);
  --tree-node-hover-bg: var(--hb-bg-secondary);
  --tree-node-selected-bg: var(--hb-primary-50);
  --tree-node-selected-color: var(--hb-primary);
  --tree-toggle-icon-color: var(--hb-text-secondary);
  --treetable-bg: var(--hb-bg-primary);
  --treetable-border-radius: var(--hb-border-radius-lg);
  --treetable-header-bg: var(--hb-bg-secondary);
  --treetable-row-hover-bg: var(--hb-bg-secondary);
  --treetable-row-selected-bg: var(--hb-primary-50);
  --treetable-border-color: var(--hb-border-light);
  --panel-bg: var(--hb-bg-primary);
  --panel-border-radius: var(--hb-border-radius-lg);
  --panel-header-bg: var(--hb-bg-secondary);
  --panel-header-color: var(--hb-text-primary);
  --panel-header-font-weight: var(--hb-font-weight-semibold);
  --panel-header-padding: var(--hb-spacing-4);
  --panel-content-padding: var(--hb-spacing-4);
  --panel-border-color: var(--hb-border-light);
  --panel-shadow: var(--hb-shadow-base);
  --accordion-bg: var(--hb-bg-primary);
  --accordion-border-radius: var(--hb-border-radius-lg);
  --accordion-header-bg: var(--hb-bg-secondary);
  --accordion-header-color: var(--hb-text-primary);
  --accordion-header-hover-bg: var(--hb-bg-tertiary);
  --accordion-header-padding: var(--hb-spacing-4);
  --accordion-content-padding: var(--hb-spacing-4);
  --accordion-border-color: var(--hb-border-light);
  --tabview-bg: var(--hb-bg-primary);
  --tabview-border-radius: var(--hb-border-radius-lg);
  --tabview-nav-bg: var(--hb-bg-secondary);
  --tabview-nav-border-color: var(--hb-border-light);
  --tabview-nav-item-padding: var(--hb-spacing-3) var(--hb-spacing-4);
  --tabview-nav-item-color: var(--hb-text-secondary);
  --tabview-nav-item-hover-bg: var(--hb-bg-tertiary);
  --tabview-nav-item-active-bg: var(--hb-bg-primary);
  --tabview-nav-item-active-color: var(--hb-primary);
  --tabview-content-padding: var(--hb-spacing-4);
  --card-bg: var(--hb-bg-primary);
  --card-border-radius: var(--hb-border-radius-lg);
  --card-header-bg: var(--hb-bg-secondary);
  --card-header-color: var(--hb-text-primary);
  --card-header-padding: var(--hb-spacing-4);
  --card-content-padding: var(--hb-spacing-4);
  --card-footer-padding: var(--hb-spacing-4);
  --card-border-color: var(--hb-border-light);
  --card-shadow: var(--hb-shadow-base);
  --dialog-bg: var(--hb-bg-primary);
  --dialog-border-radius: var(--hb-border-radius-lg);
  --dialog-header-bg: var(--hb-bg-secondary);
  --dialog-header-color: var(--hb-text-primary);
  --dialog-header-padding: var(--hb-spacing-4);
  --dialog-content-padding: var(--hb-spacing-4);
  --dialog-footer-padding: var(--hb-spacing-4);
  --dialog-shadow: var(--hb-shadow-xl);
  --dialog-mask-bg: var(--hb-bg-overlay);
  --sidebar-bg: var(--hb-bg-primary);
  --sidebar-width: 20rem;
  --sidebar-header-bg: var(--hb-bg-secondary);
  --sidebar-header-color: var(--hb-text-primary);
  --sidebar-header-padding: var(--hb-spacing-4);
  --sidebar-content-padding: var(--hb-spacing-4);
  --sidebar-shadow: var(--hb-shadow-xl);
  --sidebar-mask-bg: var(--hb-bg-overlay);
  --overlaypanel-bg: var(--hb-bg-primary);
  --overlaypanel-border-radius: var(--hb-border-radius-lg);
  --overlaypanel-padding: var(--hb-spacing-4);
  --overlaypanel-shadow: var(--hb-shadow-lg);
  --overlaypanel-arrow-size: 0.5rem;
  --tooltip-bg: var(--hb-neutral-800);
  --tooltip-color: var(--hb-text-inverse);
  --tooltip-border-radius: var(--hb-border-radius-md);
  --tooltip-padding: var(--hb-spacing-2) var(--hb-spacing-3);
  --tooltip-font-size: var(--hb-font-size-sm);
  --tooltip-shadow: var(--hb-shadow-md);
  --fileupload-bg: var(--hb-bg-primary);
  --fileupload-border-radius: var(--hb-border-radius-lg);
  --fileupload-border-color: var(--hb-border-medium);
  --fileupload-border-style: dashed;
  --fileupload-border-width: 2px;
  --fileupload-padding: var(--hb-spacing-8);
  --fileupload-hover-border-color: var(--hb-primary);
  --fileupload-hover-bg: var(--hb-primary-50);
  --menu-bg: var(--hb-bg-primary);
  --menu-border-radius: var(--hb-border-radius-md);
  --menu-padding: var(--hb-spacing-2);
  --menu-item-padding: var(--hb-spacing-3) var(--hb-spacing-4);
  --menu-item-color: var(--hb-text-primary);
  --menu-item-hover-bg: var(--hb-bg-secondary);
  --menu-item-active-bg: var(--hb-primary-50);
  --menu-item-active-color: var(--hb-primary);
  --menu-shadow: var(--hb-shadow-lg);
  --menubar-bg: var(--hb-bg-primary);
  --menubar-border-radius: var(--hb-border-radius-md);
  --menubar-padding: var(--hb-spacing-2) var(--hb-spacing-4);
  --menubar-item-padding: var(--hb-spacing-3) var(--hb-spacing-4);
  --menubar-item-color: var(--hb-text-primary);
  --menubar-item-hover-bg: var(--hb-bg-secondary);
  --menubar-item-active-bg: var(--hb-primary-50);
  --menubar-item-active-color: var(--hb-primary);
  --menubar-shadow: var(--hb-shadow-base);
  --message-padding: var(--hb-spacing-3) var(--hb-spacing-4);
  --message-border-radius: var(--hb-border-radius-md);
  --message-info-bg: var(--hb-info-50);
  --message-info-color: var(--hb-info-700);
  --message-info-border-color: var(--hb-info-200);
  --message-success-bg: var(--hb-success-50);
  --message-success-color: var(--hb-success-700);
  --message-success-border-color: var(--hb-success-200);
  --message-warning-bg: var(--hb-warning-50);
  --message-warning-color: var(--hb-warning-700);
  --message-warning-border-color: var(--hb-warning-200);
  --message-error-bg: var(--hb-danger-50);
  --message-error-color: var(--hb-danger-700);
  --message-error-border-color: var(--hb-danger-200);
  --toast-bg: var(--hb-bg-primary);
  --toast-border-radius: var(--hb-border-radius-lg);
  --toast-padding: var(--hb-spacing-4);
  --toast-shadow: var(--hb-shadow-xl);
  --toast-info-bg: var(--hb-info-50);
  --toast-info-color: var(--hb-info-700);
  --toast-success-bg: var(--hb-success-50);
  --toast-success-color: var(--hb-success-700);
  --toast-warning-bg: var(--hb-warning-50);
  --toast-warning-color: var(--hb-warning-700);
  --toast-error-bg: var(--hb-danger-50);
  --toast-error-color: var(--hb-danger-700);
  --progressbar-bg: var(--hb-border-light);
  --progressbar-border-radius: var(--hb-border-radius-full);
  --progressbar-height: 0.5rem;
  --progressbar-value-bg: var(--hb-primary);
  --progressbar-value-border-radius: var(--hb-border-radius-full);
  --rating-item-size: 1.5rem;
  --rating-item-color: var(--hb-border-medium);
  --rating-item-active-color: var(--hb-warning);
  --rating-item-hover-color: var(--hb-warning-400);
  --chip-bg: var(--hb-bg-secondary);
  --chip-color: var(--hb-text-primary);
  --chip-border-radius: var(--hb-border-radius-full);
  --chip-padding: var(--hb-spacing-1) var(--hb-spacing-3);
  --chip-font-size: var(--hb-font-size-sm);
  --chip-remove-icon-color: var(--hb-text-muted);
  --chip-remove-icon-hover-color: var(--hb-text-primary);
  --avatar-size-sm: 2rem;
  --avatar-size-md: 3rem;
  --avatar-size-lg: 4rem;
  --avatar-size-xl: 5rem;
  --avatar-bg: var(--hb-bg-secondary);
  --avatar-color: var(--hb-text-primary);
  --avatar-border-radius: var(--hb-border-radius-full);
  --avatar-font-weight: var(--hb-font-weight-semibold);
  --divider-color: var(--hb-border-light);
  --divider-width: 1px;
  --divider-margin: var(--hb-spacing-4) 0;
  --divider-text-color: var(--hb-text-muted);
  --divider-text-padding: 0 var(--hb-spacing-4);
  --divider-text-font-size: var(--hb-font-size-sm);
  --scrolltop-bg: var(--hb-primary);
  --scrolltop-color: var(--hb-text-inverse);
  --scrolltop-border-radius: var(--hb-border-radius-full);
  --scrolltop-size: 3rem;
  --scrolltop-shadow: var(--hb-shadow-lg);
  --scrolltop-hover-bg: var(--hb-primary-hover);
  --skeleton-bg: var(--hb-bg-secondary);
  --skeleton-border-radius: var(--hb-border-radius-md);
  --skeleton-animation-duration: 1.5s;
  --skeleton-animation-timing: ease-in-out;
  --tag-bg: var(--hb-primary-50);
  --tag-color: var(--hb-primary);
  --tag-border-radius: var(--hb-border-radius-full);
  --tag-padding: var(--hb-spacing-1) var(--hb-spacing-3);
  --tag-font-size: var(--hb-font-size-sm);
  --tag-font-weight: var(--hb-font-weight-medium);
  --terminal-bg: var(--hb-neutral-900);
  --terminal-color: var(--hb-neutral-100);
  --terminal-font-family: var(--hb-font-family-mono);
  --terminal-padding: var(--hb-spacing-4);
  --terminal-border-radius: var(--hb-border-radius-lg);
  --terminal-header-bg: var(--hb-neutral-800);
  --terminal-header-color: var(--hb-neutral-200);
  --terminal-header-padding: var(--hb-spacing-3) var(--hb-spacing-4);
}

/* =============================================================================
   PRIMEFLEX UTILITIES
   ============================================================================= */

.hb-p-1 { padding: var(--hb-spacing-1) }
.hb-p-2 { padding: var(--hb-spacing-2) }
.hb-p-3 { padding: var(--hb-spacing-3) }
.hb-p-4 { padding: var(--hb-spacing-4) }
.hb-p-5 { padding: var(--hb-spacing-5) }
.hb-p-6 { padding: var(--hb-spacing-6) }
.hb-m-1 { margin: var(--hb-spacing-1) }
.hb-m-2 { margin: var(--hb-spacing-2) }
.hb-m-3 { margin: var(--hb-spacing-3) }
.hb-m-4 { margin: var(--hb-spacing-4) }
.hb-m-5 { margin: var(--hb-spacing-5) }
.hb-m-6 { margin: var(--hb-spacing-6) }
.hb-text-primary { color: var(--hb-text-primary) }
.hb-text-secondary { color: var(--hb-text-secondary) }
.hb-text-muted { color: var(--hb-text-muted) }
.hb-bg-primary { background-color: var(--hb-bg-primary) }
.hb-bg-secondary { background-color: var(--hb-bg-secondary) }
.hb-bg-tertiary { background-color: var(--hb-bg-tertiary) }
.hb-rounded-sm { border-radius: var(--hb-border-radius-sm) }
.hb-rounded { border-radius: var(--hb-border-radius-base) }
.hb-rounded-md { border-radius: var(--hb-border-radius-md) }
.hb-rounded-lg { border-radius: var(--hb-border-radius-lg) }
.hb-rounded-xl { border-radius: var(--hb-border-radius-xl) }
.hb-rounded-full { border-radius: var(--hb-border-radius-full) }
.hb-shadow-sm { box-shadow: var(--hb-shadow-sm) }
.hb-shadow { box-shadow: var(--hb-shadow-base) }
.hb-shadow-md { box-shadow: var(--hb-shadow-md) }
.hb-shadow-lg { box-shadow: var(--hb-shadow-lg) }
.hb-shadow-xl { box-shadow: var(--hb-shadow-xl) }

/* =============================================================================
   COMPONENT STYLES
   ============================================================================= */

/* =============================================================================
   HB VUE THEME - CSS OVERRIDES FOR PRIMEVUE 4 UNSTYLED MODE
   =============================================================================
   This file provides CSS overrides to replace PrimeVue's 'p-' prefixed classes
   with our custom 'hb-' prefixed classes for unstyled mode
   ============================================================================= */

/* =============================================================================
   DATATABLE COMPONENT OVERRIDES
   ============================================================================= */

/* Main DataTable container */
.hb-datatable {
  border: none;
  outline: none;
  font-family: var(--hb-font-family-primary);
  font-size: var(--hb-font-size-base);
  line-height: var(--hb-line-height-normal);
  color: var(--hb-text-primary);
  width: 100%;
  background-color: var(--hb-bg-primary);
  border-radius: var(--hb-border-radius-lg);
  box-shadow: var(--hb-shadow-base);
  overflow: hidden;
}

/* DataTable table element */
.hb-datatable-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

/* DataTable table header (thead) */
.hb-datatable-thead {
  background-color: var(--hb-bg-secondary);
  border-bottom: 2px solid var(--hb-border-medium);
}

.hb-datatable-thead th {
  padding: var(--hb-spacing-4) var(--hb-spacing-6);
  text-align: left;
  font-weight: var(--hb-font-weight-semibold);
  color: var(--hb-text-primary);
  border-bottom: 1px solid var(--hb-border-light);
  position: relative;
  cursor: pointer;
  transition: all var(--hb-transition-base);
}

.hb-datatable-thead th:hover {
  background-color: var(--hb-bg-tertiary);
}

.hb-datatable-thead th.hb-sortable {
  padding-right: 2rem;
}

.hb-datatable-thead th.hb-sortable::after {
  content: '';
  position: absolute;
  right: var(--hb-spacing-4);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid var(--hb-text-muted);
  transition: all var(--hb-transition-base);
}

.hb-datatable-thead th.hb-sortable.hb-sortable-asc::after {
  border-bottom-color: var(--hb-primary);
  transform: translateY(-50%) rotate(180deg);
}

.hb-datatable-thead th.hb-sortable.hb-sortable-desc::after {
  border-bottom-color: var(--hb-primary);
}

/* DataTable table body (tbody) */
.hb-datatable-tbody {
  background-color: var(--hb-bg-primary);
}

.hb-datatable-tbody tr {
  border-bottom: 1px solid var(--hb-border-light);
  transition: all var(--hb-transition-base);
}

.hb-datatable-tbody tr:hover {
  background-color: var(--hb-bg-secondary);
}

.hb-datatable-tbody tr.hb-row-selected {
  background-color: var(--hb-primary-50);
  border-left: 3px solid var(--hb-primary);
}

/* DataTable table footer (tfoot) */
.hb-datatable-tfoot {
  background-color: var(--hb-bg-secondary);
  border-top: 2px solid var(--hb-border-medium);
}

.hb-datatable-tfoot td {
  padding: var(--hb-spacing-4) var(--hb-spacing-6);
  text-align: left;
  font-weight: var(--hb-font-weight-semibold);
  color: var(--hb-text-primary);
  border-top: 1px solid var(--hb-border-light);
}

/* DataTable header section */
.hb-datatable-header {
  background-color: var(--hb-bg-secondary);
  border-bottom: 1px solid var(--hb-border-light);
  padding: var(--hb-spacing-4);
}

.hb-datatable-header-row {
  background-color: var(--hb-bg-secondary);
}

.hb-datatable-header-cell {
  background-color: var(--hb-bg-secondary);
  color: var(--hb-text-primary);
  font-weight: var(--hb-font-weight-semibold);
  padding: var(--hb-spacing-3) var(--hb-spacing-4);
  border-bottom: 1px solid var(--hb-border-light);
  text-align: left;
  vertical-align: middle;
}

.hb-datatable-header-cell.hb-sortable {
  cursor: pointer;
  user-select: none;
}

.hb-datatable-header-cell.hb-sortable:hover {
  background-color: var(--hb-bg-tertiary);
}

/* DataTable body section */
.hb-datatable-body {
  background-color: var(--hb-bg-primary);
}

.hb-datatable-row {
  transition: background-color var(--hb-transition-base);
}

.hb-datatable-row:hover {
  background-color: var(--hb-bg-secondary);
}

.hb-datatable-row.hb-selected {
  background-color: var(--hb-primary-50);
}

.hb-datatable-body-cell {
  padding: var(--hb-spacing-3) var(--hb-spacing-4);
  border-bottom: 1px solid var(--hb-border-light);
  text-align: left;
  vertical-align: middle;
  color: var(--hb-text-primary);
}

/* DataTable footer section */
.hb-datatable-footer {
  background-color: var(--hb-bg-secondary);
  border-top: 1px solid var(--hb-border-light);
  padding: var(--hb-spacing-4);
}

.hb-datatable-footer-row {
  background-color: var(--hb-bg-secondary);
}

.hb-datatable-footer-cell {
  background-color: var(--hb-bg-secondary);
  color: var(--hb-text-primary);
  font-weight: var(--hb-font-weight-semibold);
  padding: var(--hb-spacing-3) var(--hb-spacing-4);
  border-top: 1px solid var(--hb-border-light);
  text-align: left;
  vertical-align: middle;
}

/* DataTable loading states */
.hb-datatable-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: var(--hb-z-index-fixed);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hb-datatable-loading-icon {
  width: 32px;
  height: 32px;
  border: 3px solid var(--hb-border-light);
  border-top: 3px solid var(--hb-primary);
  border-radius: 50%;
  animation: hb-spin 1s linear infinite;
}

.hb-datatable-empty-message {
  padding: var(--hb-spacing-8);
  text-align: center;
  color: var(--hb-text-muted);
  font-style: italic;
}

/* =============================================================================
   COLUMN COMPONENT OVERRIDES
   ============================================================================= */

.hb-column {
  /* Column root styles */
}

.hb-column-header {
  background-color: var(--hb-bg-secondary);
  color: var(--hb-text-primary);
  font-weight: var(--hb-font-weight-semibold);
  padding: var(--hb-spacing-3) var(--hb-spacing-4);
  border-bottom: 1px solid var(--hb-border-light);
  text-align: left;
  vertical-align: middle;
}

.hb-column-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hb-column-header-title {
  font-weight: var(--hb-font-weight-semibold);
  color: var(--hb-text-primary);
}

.hb-column-sort-icon {
  margin-left: var(--hb-spacing-2);
  color: var(--hb-text-secondary);
  transition: color var(--hb-transition-base);
}

.hb-column-sort-icon:hover {
  color: var(--hb-text-primary);
}

.hb-column-filter-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--hb-z-index-dropdown);
  background-color: var(--hb-bg-primary);
  border: 1px solid var(--hb-border-light);
  border-radius: var(--hb-border-radius-md);
  box-shadow: var(--hb-shadow-lg);
  padding: var(--hb-spacing-4);
  min-width: 200px;
}

.hb-column-filter-input {
  width: 100%;
  padding: var(--hb-spacing-2) var(--hb-spacing-3);
  border: 1px solid var(--hb-border-medium);
  border-radius: var(--hb-border-radius-sm);
  font-size: var(--hb-font-size-sm);
}

.hb-column-filter-button {
  margin-top: var(--hb-spacing-2);
  padding: var(--hb-spacing-1) var(--hb-spacing-3);
  background-color: var(--hb-primary);
  color: var(--hb-text-inverse);
  border: none;
  border-radius: var(--hb-border-radius-sm);
  cursor: pointer;
  font-size: var(--hb-font-size-sm);
}

.hb-column-filter-clear-button {
  margin-top: var(--hb-spacing-2);
  margin-left: var(--hb-spacing-2);
  padding: var(--hb-spacing-1) var(--hb-spacing-3);
  background-color: var(--hb-bg-secondary);
  color: var(--hb-text-primary);
  border: 1px solid var(--hb-border-medium);
  border-radius: var(--hb-border-radius-sm);
  cursor: pointer;
  font-size: var(--hb-font-size-sm);
}

.hb-column-body {
  /* Column body styles */
}

.hb-column-body-cell {
  padding: var(--hb-spacing-3) var(--hb-spacing-4);
  border-bottom: 1px solid var(--hb-border-light);
  text-align: left;
  vertical-align: middle;
  color: var(--hb-text-primary);
}

/* =============================================================================
   BUTTON COMPONENT OVERRIDES
   ============================================================================= */

.hb-button {
  border: none;
  outline: none;
  cursor: pointer;
  font-family: var(--hb-font-family-primary);
  font-size: var(--hb-font-size-base);
  font-weight: var(--hb-font-weight-medium);
  line-height: 1;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hb-spacing-2);
  padding: var(--hb-spacing-3) var(--hb-spacing-4);
  min-height: 2.5rem;
  border-radius: var(--hb-border-radius-md);
  box-shadow: var(--hb-shadow-sm);
  transition: all var(--hb-transition-base);
  background-color: var(--hb-bg-primary);
  color: var(--hb-text-primary);
  border: 1px solid var(--hb-border-medium);
}

.hb-button:hover:not(:disabled) {
  background-color: var(--hb-bg-secondary);
  border-color: var(--hb-border-dark);
  box-shadow: var(--hb-shadow-base);
  transform: translateY(-1px);
}

.hb-button:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--hb-shadow-sm);
}

.hb-button:focus-visible {
  outline: 2px solid var(--hb-border-focus);
  outline-offset: 2px;
}

.hb-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.hb-button-label {
  font-weight: var(--hb-font-weight-medium);
}

.hb-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hb-button-loading-icon {
  animation: hb-spin 1s linear infinite;
}

/* Button variants */
.hb-button.hb-primary {
  background-color: var(--hb-primary);
  color: var(--hb-text-inverse);
  border-color: var(--hb-primary);
}

.hb-button.hb-primary:hover:not(:disabled) {
  background-color: var(--hb-primary-hover);
  border-color: var(--hb-primary-hover);
}

.hb-button.hb-secondary {
  background-color: var(--hb-bg-primary);
  color: var(--hb-text-primary);
  border-color: var(--hb-border-medium);
}

.hb-button.hb-success {
  background-color: var(--hb-success);
  color: var(--hb-text-inverse);
  border-color: var(--hb-success);
}

.hb-button.hb-warning {
  background-color: var(--hb-warning);
  color: var(--hb-text-inverse);
  border-color: var(--hb-warning);
}

.hb-button.hb-danger {
  background-color: var(--hb-danger);
  color: var(--hb-text-inverse);
  border-color: var(--hb-danger);
}

.hb-button.hb-info {
  background-color: var(--hb-info);
  color: var(--hb-text-inverse);
  border-color: var(--hb-info);
}

.hb-button.hb-text {
  background-color: transparent;
  color: var(--hb-text-primary);
  border-color: transparent;
  box-shadow: none;
}

.hb-button.hb-text:hover:not(:disabled) {
  background-color: var(--hb-bg-secondary);
  transform: none;
}

/* =============================================================================
   INPUT COMPONENT OVERRIDES
   ============================================================================= */

.hb-inputtext {
  border: none;
  outline: none;
  background: none;
  font-family: var(--hb-font-family-primary);
  font-size: var(--hb-font-size-base);
  font-weight: var(--hb-font-weight-normal);
  line-height: var(--hb-line-height-normal);
  color: var(--hb-text-primary);
  display: block;
  width: 100%;
  padding: var(--hb-spacing-3) var(--hb-spacing-4);
  min-height: 2.5rem;
  background-color: var(--hb-bg-primary);
  border: 1px solid var(--hb-border-medium);
  border-radius: var(--hb-border-radius-md);
  box-shadow: var(--hb-shadow-sm);
  transition: all var(--hb-transition-base);
}

.hb-inputtext::placeholder {
  color: var(--hb-text-muted);
  opacity: 1;
}

.hb-inputtext:hover:not(:disabled) {
  border-color: var(--hb-border-dark);
  box-shadow: var(--hb-shadow-base);
}

.hb-inputtext:focus {
  border-color: var(--hb-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  outline: none;
}

.hb-inputtext:disabled {
  background-color: var(--hb-bg-tertiary);
  color: var(--hb-text-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

.hb-inputtext:read-only {
  background-color: var(--hb-bg-secondary);
  color: var(--hb-text-secondary);
}

/* =============================================================================
   SELECT COMPONENT OVERRIDES
   ============================================================================= */

.hb-select {
  position: relative;
  display: block;
  width: 100%;
}

.hb-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--hb-spacing-3) var(--hb-spacing-4);
  min-height: 2.5rem;
  background-color: var(--hb-bg-primary);
  border: 1px solid var(--hb-border-medium);
  border-radius: var(--hb-border-radius-md);
  font-family: var(--hb-font-family-primary);
  font-size: var(--hb-font-size-base);
  font-weight: var(--hb-font-weight-normal);
  line-height: var(--hb-line-height-normal);
  color: var(--hb-text-primary);
  cursor: pointer;
  transition: all var(--hb-transition-base);
  box-shadow: var(--hb-shadow-sm);
}

.hb-select-trigger::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 0.25rem solid transparent;
  border-right: 0.25rem solid transparent;
  border-top: 0.25rem solid var(--hb-text-secondary);
  margin-left: var(--hb-spacing-2);
  transition: transform var(--hb-transition-base);
}

.hb-select-trigger:hover:not(:disabled) {
  background-color: var(--hb-bg-secondary);
  border-color: var(--hb-border-dark);
  box-shadow: var(--hb-shadow-base);
}

.hb-select-trigger:focus {
  border-color: var(--hb-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  outline: none;
}

.hb-select-trigger:disabled {
  background-color: var(--hb-bg-tertiary);
  color: var(--hb-text-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

.hb-select-trigger.hb-open {
  border-color: var(--hb-border-focus);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.hb-select-trigger.hb-open::after {
  transform: rotate(180deg);
}

.hb-select-label {
  color: var(--hb-text-primary);
}

.hb-select-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--hb-z-index-dropdown);
  background-color: var(--hb-bg-primary);
  border: 1px solid var(--hb-border-light);
  border-radius: var(--hb-border-radius-md);
  box-shadow: var(--hb-shadow-lg);
  max-height: 200px;
  overflow-y: auto;
  margin-top: var(--hb-spacing-1);
}

.hb-select-items-wrapper {
  padding: var(--hb-spacing-2) 0;
}

.hb-select-item {
  padding: var(--hb-spacing-2) var(--hb-spacing-4);
  cursor: pointer;
  transition: background-color var(--hb-transition-base);
  color: var(--hb-text-primary);
  font-family: var(--hb-font-family-primary);
  font-size: var(--hb-font-size-base);
}

.hb-select-item:hover {
  background-color: var(--hb-bg-secondary);
}

.hb-select-item.hb-selected {
  background-color: var(--hb-primary-50);
  color: var(--hb-primary);
  font-weight: var(--hb-font-weight-medium);
}

.hb-select-item.hb-disabled {
  color: var(--hb-text-disabled);
  cursor: not-allowed;
  background: none;
}

.hb-select-item.hb-disabled:hover {
  background: none;
}

.hb-select-item-label {
  color: inherit;
}

.hb-select-item-icon {
  margin-right: var(--hb-spacing-2);
}

.hb-select-item-group {
  /* Group styles */
}

.hb-select-item-group-label {
  padding: var(--hb-spacing-2) var(--hb-spacing-4);
  font-weight: var(--hb-font-weight-semibold);
  color: var(--hb-text-secondary);
  background-color: var(--hb-bg-secondary);
  border-bottom: 1px solid var(--hb-border-light);
}

.hb-select-header {
  padding: var(--hb-spacing-3) var(--hb-spacing-4);
  border-bottom: 1px solid var(--hb-border-light);
  background-color: var(--hb-bg-secondary);
}

.hb-select-filter-container {
  margin-bottom: var(--hb-spacing-2);
}

.hb-select-filter-input {
  width: 100%;
  padding: var(--hb-spacing-2) var(--hb-spacing-3);
  border: 1px solid var(--hb-border-medium);
  border-radius: var(--hb-border-radius-sm);
  font-size: var(--hb-font-size-sm);
}

.hb-select-filter-icon {
  position: absolute;
  right: var(--hb-spacing-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--hb-text-muted);
}

.hb-select-close-button {
  position: absolute;
  top: var(--hb-spacing-2);
  right: var(--hb-spacing-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--hb-spacing-1);
  border-radius: var(--hb-border-radius-sm);
}

.hb-select-close-button:hover {
  background-color: var(--hb-bg-secondary);
}

.hb-select-close-icon {
  color: var(--hb-text-secondary);
  font-size: var(--hb-font-size-sm);
}

/* =============================================================================
   PAGINATOR COMPONENT OVERRIDES
   ============================================================================= */

.hb-paginator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--hb-spacing-4) var(--hb-spacing-6);
  background-color: var(--hb-bg-secondary);
  border-top: 1px solid var(--hb-border-light);
  font-family: var(--hb-font-family-primary);
  font-size: var(--hb-font-size-sm);
  color: var(--hb-text-secondary);
}

.hb-paginator-first,
.hb-paginator-prev,
.hb-paginator-next,
.hb-paginator-last,
.hb-paginator-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0 var(--hb-spacing-1);
  border: 1px solid var(--hb-border-medium);
  border-radius: var(--hb-border-radius-md);
  background-color: var(--hb-bg-primary);
  color: var(--hb-text-primary);
  cursor: pointer;
  transition: all var(--hb-transition-base);
  font-size: var(--hb-font-size-sm);
}

.hb-paginator-first:hover:not(.hb-disabled),
.hb-paginator-prev:hover:not(.hb-disabled),
.hb-paginator-next:hover:not(.hb-disabled),
.hb-paginator-last:hover:not(.hb-disabled),
.hb-paginator-page:hover:not(.hb-disabled) {
  background-color: var(--hb-bg-secondary);
  border-color: var(--hb-border-dark);
}

.hb-paginator-first.hb-active,
.hb-paginator-prev.hb-active,
.hb-paginator-next.hb-active,
.hb-paginator-last.hb-active,
.hb-paginator-page.hb-active {
  background-color: var(--hb-primary);
  color: var(--hb-text-inverse);
  border-color: var(--hb-primary);
}

.hb-paginator-first.hb-disabled,
.hb-paginator-prev.hb-disabled,
.hb-paginator-next.hb-disabled,
.hb-paginator-last.hb-disabled,
.hb-paginator-page.hb-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.hb-paginator-pages {
  display: flex;
  align-items: center;
  gap: var(--hb-spacing-1);
}

.hb-paginator-page-links {
  display: flex;
  align-items: center;
  gap: var(--hb-spacing-1);
}

.hb-paginator-rows-per-page-dropdown {
  margin-left: var(--hb-spacing-4);
}

.hb-paginator-current {
  margin-left: var(--hb-spacing-4);
  color: var(--hb-text-primary);
  font-weight: var(--hb-font-weight-medium);
}

.hb-paginator-rpp-options {
  /* Rows per page options styles */
}

.hb-paginator-rpp-option {
  /* Rows per page option styles */
}

.hb-paginator-start,
.hb-paginator-end,
.hb-paginator-total-records {
  color: var(--hb-text-secondary);
  font-size: var(--hb-font-size-sm);
}

.hb-paginator-jump-to-page-dropdown {
  margin-left: var(--hb-spacing-4);
}

.hb-paginator-jump-to-page-input {
  width: 3rem;
  padding: var(--hb-spacing-1) var(--hb-spacing-2);
  border: 1px solid var(--hb-border-medium);
  border-radius: var(--hb-border-radius-sm);
  text-align: center;
  font-size: var(--hb-font-size-sm);
}

/* =============================================================================
   MESSAGE COMPONENT OVERRIDES
   ============================================================================= */

.hb-message {
  padding: var(--hb-spacing-3) var(--hb-spacing-4);
  border-radius: var(--hb-border-radius-md);
  border: 1px solid;
  margin-bottom: var(--hb-spacing-4);
}

.hb-message-wrapper {
  display: flex;
  align-items: center;
  gap: var(--hb-spacing-3);
}

.hb-message-text {
  flex: 1;
  font-family: var(--hb-font-family-primary);
  font-size: var(--hb-font-size-base);
  line-height: var(--hb-line-height-normal);
}

.hb-message-icon {
  flex-shrink: 0;
  font-size: var(--hb-font-size-lg);
}

.hb-message-close-button {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--hb-spacing-1);
  border-radius: var(--hb-border-radius-sm);
  margin-left: var(--hb-spacing-2);
}

.hb-message-close-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.hb-message-close-icon {
  font-size: var(--hb-font-size-sm);
  color: inherit;
}

.hb-message.hb-info {
  background-color: var(--hb-info-50);
  color: var(--hb-info-700);
  border-color: var(--hb-info-200);
}

.hb-message.hb-success {
  background-color: var(--hb-success-50);
  color: var(--hb-success-700);
  border-color: var(--hb-success-200);
}

.hb-message.hb-warning {
  background-color: var(--hb-warning-50);
  color: var(--hb-warning-700);
  border-color: var(--hb-warning-200);
}

.hb-message.hb-error {
  background-color: var(--hb-danger-50);
  color: var(--hb-danger-700);
  border-color: var(--hb-danger-200);
}

/* =============================================================================
   LOADING STATES
   ============================================================================= */

.hb-loading {
  position: relative;
}

.hb-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: var(--hb-z-index-fixed);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hb-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border: 3px solid var(--hb-border-light);
  border-top: 3px solid var(--hb-primary);
  border-radius: 50%;
  animation: hb-spin 1s linear infinite;
  z-index: calc(var(--hb-z-index-fixed) + 1);
}

/* Loading animation */
@keyframes hb-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

/* Disabled state */
.hb-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Hidden state */
.hb-hidden {
  display: none !important;
}

/* Invisible state */
.hb-invisible {
  visibility: hidden !important;
}

/* Focus visible */
.hb-focus-visible {
  outline: 2px solid var(--hb-border-focus);
  outline-offset: 2px;
}