@elsapiens/styles 0.1.0

package/dist/variables.css

@@ -0,0 +1,796 @@
+/* @elsapiens/sdk CSS Variables */
+/* Theme colors using CSS custom properties */
+
+:root {
+  /* Primary - Wisteria Blue (matches design system: #eef1f6 to #0c1018) */
+  --primary-50: 218 31% 95%;
+  --primary-100: 218 31% 90%;
+  --primary-200: 218 32% 80%;
+  --primary-300: 218 34% 70%;
+  --primary-400: 218 34% 60%;
+  --primary-500: 218 33% 50%;
+  --primary-600: 218 33% 40%;
+  --primary-700: 218 33% 30%;
+  --primary-800: 218 33% 20%;
+  --primary-900: 218 33% 10%;
+  --primary-950: 220 33% 7%;
+
+  /* Semantic - Neutral text colors (no theme tint) */
+  --background: 0 0% 100%;
+  --foreground: 0 0% 9%;
+  --card: 0 0% 100%;
+  --card-foreground: 0 0% 9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 9%;
+  --primary: 218 33% 50%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 96%;
+  --secondary-foreground: 0 0% 20%;
+  --muted: 0 0% 96%;
+  --muted-foreground: 0 0% 45%;
+  --accent: 0 0% 96%;
+  --accent-foreground: 0 0% 20%;
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 0% 90%;
+  --input: 0 0% 90%;
+  --ring: 218 33% 50%;
+
+  /* Surfaces - Neutral */
+  --surface: 0 0% 100%;
+  --surface-elevated: 0 0% 100%;
+  --surface-sunken: 0 0% 96%;
+
+  /* Neutral Gray Scale (never changes with color scheme) */
+  --neutral-50: 0 0% 98%;
+  --neutral-100: 0 0% 96%;
+  --neutral-200: 0 0% 90%;
+  --neutral-300: 0 0% 83%;
+  --neutral-400: 0 0% 64%;
+  --neutral-500: 0 0% 45%;
+  --neutral-600: 0 0% 32%;
+  --neutral-700: 0 0% 25%;
+  --neutral-800: 0 0% 15%;
+  --neutral-900: 0 0% 9%;
+  --neutral-950: 0 0% 4%;
+
+  /* Status colors */
+  --success: 142 71% 45%;
+  --success-foreground: 0 0% 100%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 0 0% 100%;
+  --error: 0 84% 60%;
+  --error-foreground: 0 0% 100%;
+  --info: 217 91% 60%;
+  --info-foreground: 0 0% 100%;
+
+  /* Help system */
+  --help-icon-color: var(--primary-400);
+  --help-icon-hover-color: var(--primary-600);
+  --help-panel-width: 400px;
+  --help-panel-bg: var(--surface);
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  /* Radius */
+  --radius: 0.5rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+
+  /* Transitions */
+  --transition-fast: 150ms;
+  --transition-normal: 200ms;
+  --transition-slow: 300ms;
+
+  /* ============================================
+     Layout Variables (Normal - Default)
+     ============================================ */
+
+  /* Sidebar */
+  --sidebar-width: 220px;
+  --sidebar-collapsed-width: 56px;
+  --sidebar-padding: 0.75rem;
+  --sidebar-item-padding-x: 0.75rem;
+  --sidebar-item-padding-y: 0.5rem;
+  --sidebar-item-gap: 0.375rem;
+  --sidebar-icon-size: 1.125rem;
+  --sidebar-font-size: 0.875rem;
+
+  /* Topbar */
+  --topbar-height: 48px;
+  --topbar-padding-x: 1rem;
+  --topbar-padding-y: 0.5rem;
+  --topbar-gap: 0.75rem;
+  --topbar-icon-size: 1.125rem;
+  --topbar-font-size: 0.875rem;
+
+  /* Page header */
+  --page-header-height: 56px;
+  --page-header-padding: 1rem;
+  --page-title-size: 1.25rem;
+
+  /* Menu / Dropdown */
+  --menu-padding: 0.25rem;
+  --menu-item-padding-x: 0.75rem;
+  --menu-item-padding-y: 0.5rem;
+  --menu-item-gap: 0.5rem;
+  --menu-icon-size: 1rem;
+  --menu-font-size: 0.875rem;
+
+  /* Notification / Toast */
+  --toast-padding: 0.875rem;
+  --toast-gap: 0.75rem;
+  --toast-icon-size: 1.125rem;
+  --toast-font-size: 0.875rem;
+  --toast-title-size: 0.875rem;
+
+  /* Card */
+  --card-padding-sm: 0.75rem;
+  --card-padding-md: 1rem;
+  --card-padding-lg: 1.25rem;
+  --card-gap: 0.75rem;
+  --card-header-gap: 0.375rem;
+
+  /* Modal */
+  --modal-padding: 1.25rem;
+  --modal-gap: 1rem;
+  --modal-header-gap: 0.5rem;
+
+  /* Table */
+  --table-cell-padding-x: 0.75rem;
+  --table-cell-padding-y: 0.625rem;
+  --table-header-padding-y: 0.5rem;
+  --table-font-size: 0.875rem;
+
+  /* ============================================
+     Form Element Variables (Normal - Default)
+     Use: default, or data-spacing="normal"
+     ============================================ */
+
+  /* Typography */
+  --el-font-size-sm: 0.8125rem;  /* 13px */
+  --el-font-size-md: 0.875rem;   /* 14px */
+  --el-font-size-lg: 1rem;       /* 16px */
+  --el-line-height: 1.5;
+  --el-font-weight-normal: 400;
+  --el-font-weight-medium: 500;
+  --el-font-weight-semibold: 600;
+
+  /* Spacing (internal padding for inputs) */
+  --el-spacing-px-sm: 0.5rem;    /* 8px */
+  --el-spacing-px-md: 0.625rem;  /* 10px */
+  --el-spacing-px-lg: 0.75rem;   /* 12px */
+  --el-spacing-py-sm: 0.375rem;  /* 6px */
+  --el-spacing-py-md: 0.5rem;    /* 8px */
+  --el-spacing-py-lg: 0.625rem;  /* 10px */
+
+  /* Input heights (includes padding + font) */
+  --el-input-height-sm: 1.75rem;   /* 28px */
+  --el-input-height-md: 2rem;      /* 32px */
+  --el-input-height-lg: 2.5rem;    /* 40px */
+
+  /* Min heights for textareas */
+  --el-textarea-min-height-sm: 4rem;     /* 64px */
+  --el-textarea-min-height-md: 5.5rem;   /* 88px */
+  --el-textarea-min-height-lg: 7rem;     /* 112px */
+
+  /* Checkbox/Radio sizes */
+  --el-checkbox-size-sm: 0.875rem;  /* 14px */
+  --el-checkbox-size-md: 1rem;      /* 16px */
+  --el-checkbox-size-lg: 1.25rem;   /* 20px */
+
+  /* Gap between elements */
+  --el-gap-sm: 0.375rem;  /* 6px */
+  --el-gap-md: 0.5rem;    /* 8px */
+  --el-gap-lg: 0.75rem;   /* 12px */
+
+  /* Message area height */
+  --el-message-min-height: 1.125rem;  /* 18px */
+  --el-message-font-size: 0.75rem;    /* 12px */
+
+  /* Button padding */
+  --el-btn-px-sm: 0.625rem;  /* 10px */
+  --el-btn-px-md: 0.875rem;  /* 14px */
+  --el-btn-px-lg: 1.25rem;   /* 20px */
+  --el-btn-py-sm: 0.25rem;   /* 4px */
+  --el-btn-py-md: 0.375rem;  /* 6px */
+  --el-btn-py-lg: 0.5rem;    /* 8px */
+
+  /* Toggle sizes */
+  --el-toggle-sm-width: 32px;
+  --el-toggle-sm-height: 18px;
+  --el-toggle-sm-knob: 12px;
+  --el-toggle-md-width: 38px;
+  --el-toggle-md-height: 20px;
+  --el-toggle-md-knob: 14px;
+  --el-toggle-lg-width: 44px;
+  --el-toggle-lg-height: 24px;
+  --el-toggle-lg-knob: 18px;
+
+  /* ============================================
+     Additional UI Component Variables (Normal)
+     ============================================ */
+
+  /* Dropdown/Popover */
+  --el-dropdown-padding: 0.5rem;
+  --el-dropdown-item-px: 0.75rem;
+  --el-dropdown-item-py: 0.5rem;
+  --el-dropdown-width-sm: 12rem;  /* 192px */
+  --el-dropdown-width-md: 16rem;  /* 256px */
+  --el-dropdown-width-lg: 18rem;  /* 288px */
+  --el-dropdown-max-height: 18rem;  /* 288px */
+
+  /* Badge */
+  --el-badge-px-sm: 0.375rem;
+  --el-badge-py-sm: 0.125rem;
+  --el-badge-px-md: 0.5rem;
+  --el-badge-py-md: 0.125rem;
+  --el-badge-px-lg: 0.625rem;
+  --el-badge-py-lg: 0.25rem;
+  --el-badge-font-size-sm: 0.6875rem;
+  --el-badge-font-size-md: 0.75rem;
+  --el-badge-font-size-lg: 0.8125rem;
+  --el-badge-icon-size: 0.75rem;
+
+  /* Tabs */
+  --el-tabs-padding: 0.25rem;
+  --el-tabs-gap: 0.25rem;
+  --el-tab-px: 0.75rem;
+  --el-tab-py: 0.375rem;
+  --el-tab-content-mt: 1rem;
+
+  /* Avatar */
+  --el-avatar-size-xs: 1.5rem;
+  --el-avatar-size-sm: 2rem;
+  --el-avatar-size-md: 2.5rem;
+  --el-avatar-size-lg: 3rem;
+  --el-avatar-size-xl: 4rem;
+
+  /* Stepper */
+  --el-stepper-circle-sm: 1.5rem;
+  --el-stepper-circle-md: 2rem;
+  --el-stepper-circle-lg: 2.5rem;
+  --el-stepper-gap: 0.5rem;
+
+  /* Filter bar */
+  --el-filter-pill-px: 0.75rem;
+  --el-filter-pill-py: 0.375rem;
+  --el-filter-gap: 0.5rem;
+
+  /* Icon sizes */
+  --el-icon-size-xs: 0.75rem;
+  --el-icon-size-sm: 1rem;
+  --el-icon-size-md: 1.25rem;
+  --el-icon-size-lg: 1.5rem;
+
+  /* Tooltip */
+  --el-tooltip-px: 0.75rem;
+  --el-tooltip-py: 0.375rem;
+
+  /* Progress */
+  --el-progress-height-sm: 0.25rem;
+  --el-progress-height-md: 0.5rem;
+  --el-progress-height-lg: 0.75rem;
+
+  /* Slider */
+  --el-slider-track-height-sm: 0.25rem;
+  --el-slider-track-height-md: 0.5rem;
+  --el-slider-track-height-lg: 0.75rem;
+  --el-slider-thumb-size-sm: 0.75rem;
+  --el-slider-thumb-size-md: 1rem;
+  --el-slider-thumb-size-lg: 1.25rem;
+
+  /* Rating */
+  --el-rating-size-sm: 1rem;
+  --el-rating-size-md: 1.25rem;
+  --el-rating-size-lg: 1.5rem;
+  --el-rating-gap-sm: 0.125rem;
+  --el-rating-gap-md: 0.25rem;
+  --el-rating-gap-lg: 0.375rem;
+
+  /* File Upload */
+  --el-upload-padding: 1.5rem;
+  --el-upload-gap: 0.5rem;
+
+  /* ============================================
+     Layout Gap Variables (Normal - Default)
+     For flex/grid gaps across layouts
+     ============================================ */
+  --el-layout-gap-xs: 0.5rem;    /* 8px */
+  --el-layout-gap-sm: 1rem;      /* 16px */
+  --el-layout-gap-md: 1.5rem;    /* 24px */
+  --el-layout-gap-lg: 2rem;      /* 32px */
+  --el-layout-gap-xl: 3rem;      /* 48px */
+  --el-layout-gap-2xl: 4rem;     /* 64px */
+
+  /* Section/Content spacing */
+  --el-section-gap: 1.5rem;      /* Between major sections */
+  --el-content-gap: 1rem;        /* Between content blocks */
+  --el-inline-gap: 0.5rem;       /* Between inline elements */
+  --el-field-grid-gap: calc(var(--el-spacing-px-md) * 1.5);  /* 1.5x padding */
+
+  /* Control gaps - for button groups, form field rows, inline controls */
+  --el-control-gap-xs: 0.25rem;  /* 4px */
+  --el-control-gap-sm: 0.5rem;   /* 8px */
+  --el-control-gap-md: 0.75rem;  /* 12px */
+  --el-control-gap-lg: 1rem;     /* 16px */
+  --el-control-gap-xl: 1.5rem;   /* 24px */
+}
+
+/* ============================================
+   Compact Mode (Shopify-style)
+   Use: <html data-spacing="compact">
+   ============================================ */
+[data-spacing="compact"] {
+  /* Layout - Compact */
+  --sidebar-width: 200px;
+  --sidebar-collapsed-width: 48px;
+  --sidebar-padding: 0.5rem;
+  --sidebar-item-padding-x: 0.5rem;
+  --sidebar-item-padding-y: 0.375rem;
+  --sidebar-item-gap: 0.25rem;
+  --sidebar-icon-size: 1rem;
+  --sidebar-font-size: 0.8125rem;
+
+  --topbar-height: 40px;
+  --topbar-padding-x: 0.75rem;
+  --topbar-padding-y: 0.375rem;
+  --topbar-gap: 0.5rem;
+  --topbar-icon-size: 1rem;
+  --topbar-font-size: 0.8125rem;
+
+  --page-header-height: 44px;
+  --page-header-padding: 0.75rem;
+  --page-title-size: 1.125rem;
+
+  --menu-padding: 0.125rem;
+  --menu-item-padding-x: 0.5rem;
+  --menu-item-padding-y: 0.375rem;
+  --menu-item-gap: 0.375rem;
+  --menu-icon-size: 0.875rem;
+  --menu-font-size: 0.8125rem;
+
+  --toast-padding: 0.625rem;
+  --toast-gap: 0.5rem;
+  --toast-icon-size: 1rem;
+  --toast-font-size: 0.8125rem;
+  --toast-title-size: 0.8125rem;
+
+  --card-padding-sm: 0.5rem;
+  --card-padding-md: 0.75rem;
+  --card-padding-lg: 1rem;
+  --card-gap: 0.5rem;
+  --card-header-gap: 0.25rem;
+
+  --modal-padding: 0.875rem;
+  --modal-gap: 0.75rem;
+  --modal-header-gap: 0.375rem;
+
+  --table-cell-padding-x: 0.5rem;
+  --table-cell-padding-y: 0.375rem;
+  --table-header-padding-y: 0.375rem;
+  --table-font-size: 0.8125rem;
+
+  /* Typography - Compact */
+  --el-font-size-sm: 0.6875rem;  /* 11px */
+  --el-font-size-md: 0.75rem;    /* 12px */
+  --el-font-size-lg: 0.8125rem;  /* 13px */
+  --el-line-height: 1.4;
+
+  /* Spacing - Compact */
+  --el-spacing-px-sm: 0.375rem;  /* 6px */
+  --el-spacing-px-md: 0.5rem;    /* 8px */
+  --el-spacing-px-lg: 0.625rem;  /* 10px */
+  --el-spacing-py-sm: 0.1875rem; /* 3px */
+  --el-spacing-py-md: 0.25rem;   /* 4px */
+  --el-spacing-py-lg: 0.375rem;  /* 6px */
+
+  /* Input heights - Compact */
+  --el-input-height-sm: 1.375rem;  /* 22px */
+  --el-input-height-md: 1.625rem;  /* 26px */
+  --el-input-height-lg: 2rem;      /* 32px */
+
+  /* Textareas - Compact */
+  --el-textarea-min-height-sm: 3rem;     /* 48px */
+  --el-textarea-min-height-md: 4rem;     /* 64px */
+  --el-textarea-min-height-lg: 5rem;     /* 80px */
+
+  /* Checkbox/Radio - Compact */
+  --el-checkbox-size-sm: 0.75rem;   /* 12px */
+  --el-checkbox-size-md: 0.875rem;  /* 14px */
+  --el-checkbox-size-lg: 1rem;      /* 16px */
+
+  /* Gaps - Compact */
+  --el-gap-sm: 0.25rem;   /* 4px */
+  --el-gap-md: 0.375rem;  /* 6px */
+  --el-gap-lg: 0.5rem;    /* 8px */
+
+  /* Message - Compact */
+  --el-message-min-height: 0.875rem;  /* 14px */
+  --el-message-font-size: 0.6875rem;  /* 11px */
+
+  /* Button - Compact */
+  --el-btn-px-sm: 0.5rem;    /* 8px */
+  --el-btn-px-md: 0.625rem;  /* 10px */
+  --el-btn-px-lg: 0.875rem;  /* 14px */
+  --el-btn-py-sm: 0.125rem;  /* 2px */
+  --el-btn-py-md: 0.1875rem; /* 3px */
+  --el-btn-py-lg: 0.25rem;   /* 4px */
+
+  /* Toggle - Compact */
+  --el-toggle-sm-width: 24px;
+  --el-toggle-sm-height: 14px;
+  --el-toggle-sm-knob: 10px;
+  --el-toggle-md-width: 28px;
+  --el-toggle-md-height: 16px;
+  --el-toggle-md-knob: 12px;
+  --el-toggle-lg-width: 34px;
+  --el-toggle-lg-height: 18px;
+  --el-toggle-lg-knob: 14px;
+
+  /* Dropdown/Popover - Compact */
+  --el-dropdown-padding: 0.25rem;
+  --el-dropdown-item-px: 0.5rem;
+  --el-dropdown-item-py: 0.25rem;
+  --el-dropdown-width-sm: 10rem;
+  --el-dropdown-width-md: 14rem;
+  --el-dropdown-width-lg: 16rem;
+  --el-dropdown-max-height: 14rem;
+
+  /* Badge - Compact */
+  --el-badge-px-sm: 0.25rem;
+  --el-badge-py-sm: 0.0625rem;
+  --el-badge-px-md: 0.375rem;
+  --el-badge-py-md: 0.0625rem;
+  --el-badge-px-lg: 0.5rem;
+  --el-badge-py-lg: 0.125rem;
+  --el-badge-font-size-sm: 0.5625rem;
+  --el-badge-font-size-md: 0.625rem;
+  --el-badge-font-size-lg: 0.6875rem;
+  --el-badge-icon-size: 0.625rem;
+
+  /* Tabs - Compact */
+  --el-tabs-padding: 0.125rem;
+  --el-tabs-gap: 0.125rem;
+  --el-tab-px: 0.5rem;
+  --el-tab-py: 0.25rem;
+  --el-tab-content-mt: 0.75rem;
+
+  /* Avatar - Compact */
+  --el-avatar-size-xs: 1.25rem;
+  --el-avatar-size-sm: 1.5rem;
+  --el-avatar-size-md: 2rem;
+  --el-avatar-size-lg: 2.5rem;
+  --el-avatar-size-xl: 3rem;
+
+  /* Stepper - Compact */
+  --el-stepper-circle-sm: 1.25rem;
+  --el-stepper-circle-md: 1.5rem;
+  --el-stepper-circle-lg: 2rem;
+  --el-stepper-gap: 0.375rem;
+
+  /* Filter bar - Compact */
+  --el-filter-pill-px: 0.5rem;
+  --el-filter-pill-py: 0.25rem;
+  --el-filter-gap: 0.375rem;
+
+  /* Icon sizes - Compact */
+  --el-icon-size-xs: 0.625rem;
+  --el-icon-size-sm: 0.75rem;
+  --el-icon-size-md: 1rem;
+  --el-icon-size-lg: 1.25rem;
+
+  /* Tooltip - Compact */
+  --el-tooltip-px: 0.5rem;
+  --el-tooltip-py: 0.25rem;
+
+  /* Progress - Compact */
+  --el-progress-height-sm: 0.125rem;
+  --el-progress-height-md: 0.25rem;
+  --el-progress-height-lg: 0.5rem;
+
+  /* Slider - Compact */
+  --el-slider-track-height-sm: 0.125rem;
+  --el-slider-track-height-md: 0.25rem;
+  --el-slider-track-height-lg: 0.5rem;
+  --el-slider-thumb-size-sm: 0.625rem;
+  --el-slider-thumb-size-md: 0.75rem;
+  --el-slider-thumb-size-lg: 1rem;
+
+  /* Rating - Compact */
+  --el-rating-size-sm: 0.75rem;
+  --el-rating-size-md: 1rem;
+  --el-rating-size-lg: 1.25rem;
+  --el-rating-gap-sm: 0.0625rem;
+  --el-rating-gap-md: 0.125rem;
+  --el-rating-gap-lg: 0.25rem;
+
+  /* File Upload - Compact */
+  --el-upload-padding: 1rem;
+  --el-upload-gap: 0.375rem;
+
+  /* Layout Gaps - Compact */
+  --el-layout-gap-xs: 0.25rem;   /* 4px */
+  --el-layout-gap-sm: 0.5rem;    /* 8px */
+  --el-layout-gap-md: 1rem;      /* 16px */
+  --el-layout-gap-lg: 1.5rem;    /* 24px */
+  --el-layout-gap-xl: 2rem;      /* 32px */
+  --el-layout-gap-2xl: 3rem;     /* 48px */
+
+  /* Section/Content spacing - Compact */
+  --el-section-gap: 1rem;
+  --el-content-gap: 0.75rem;
+  --el-inline-gap: 0.375rem;
+  --el-field-grid-gap: calc(var(--el-spacing-px-md) * 1.5);  /* 1.5x padding */
+
+  /* Control gaps - Compact */
+  --el-control-gap-xs: 0.125rem; /* 2px */
+  --el-control-gap-sm: 0.25rem;  /* 4px */
+  --el-control-gap-md: 0.5rem;   /* 8px */
+  --el-control-gap-lg: 0.75rem;  /* 12px */
+  --el-control-gap-xl: 1rem;     /* 16px */
+}
+
+/* ============================================
+   Spacious Mode (More breathing room)
+   Use: <html data-spacing="spacious">
+   ============================================ */
+[data-spacing="spacious"] {
+  /* Layout - Spacious */
+  --sidebar-width: 260px;
+  --sidebar-collapsed-width: 64px;
+  --sidebar-padding: 1rem;
+  --sidebar-item-padding-x: 1rem;
+  --sidebar-item-padding-y: 0.75rem;
+  --sidebar-item-gap: 0.5rem;
+  --sidebar-icon-size: 1.25rem;
+  --sidebar-font-size: 1rem;
+
+  --topbar-height: 56px;
+  --topbar-padding-x: 1.25rem;
+  --topbar-padding-y: 0.75rem;
+  --topbar-gap: 1rem;
+  --topbar-icon-size: 1.25rem;
+  --topbar-font-size: 1rem;
+
+  --page-header-height: 72px;
+  --page-header-padding: 1.5rem;
+  --page-title-size: 1.5rem;
+
+  --menu-padding: 0.375rem;
+  --menu-item-padding-x: 1rem;
+  --menu-item-padding-y: 0.75rem;
+  --menu-item-gap: 0.75rem;
+  --menu-icon-size: 1.125rem;
+  --menu-font-size: 1rem;
+
+  --toast-padding: 1.25rem;
+  --toast-gap: 1rem;
+  --toast-icon-size: 1.25rem;
+  --toast-font-size: 1rem;
+  --toast-title-size: 1rem;
+
+  --card-padding-sm: 1rem;
+  --card-padding-md: 1.5rem;
+  --card-padding-lg: 2rem;
+  --card-gap: 1rem;
+  --card-header-gap: 0.5rem;
+
+  --modal-padding: 1.75rem;
+  --modal-gap: 1.25rem;
+  --modal-header-gap: 0.75rem;
+
+  --table-cell-padding-x: 1rem;
+  --table-cell-padding-y: 0.875rem;
+  --table-header-padding-y: 0.75rem;
+  --table-font-size: 1.125rem;  /* 18px */
+
+  /* Typography - Spacious */
+  --el-font-size-sm: 0.9375rem;  /* 15px */
+  --el-font-size-md: 1.125rem;   /* 18px */
+  --el-font-size-lg: 1.3125rem;  /* 21px */
+  --el-line-height: 1.6;
+
+  /* Spacing - Spacious */
+  --el-spacing-px-sm: 0.75rem;   /* 12px */
+  --el-spacing-px-md: 1rem;      /* 16px */
+  --el-spacing-px-lg: 1.25rem;   /* 20px */
+  --el-spacing-py-sm: 0.5rem;    /* 8px */
+  --el-spacing-py-md: 0.75rem;   /* 12px */
+  --el-spacing-py-lg: 1rem;      /* 16px */
+
+  /* Input heights - Spacious */
+  --el-input-height-sm: 2.25rem;  /* 36px */
+  --el-input-height-md: 2.75rem;  /* 44px */
+  --el-input-height-lg: 3.25rem;  /* 52px */
+
+  /* Textareas - Spacious */
+  --el-textarea-min-height-sm: 5rem;   /* 80px */
+  --el-textarea-min-height-md: 7rem;   /* 112px */
+  --el-textarea-min-height-lg: 9rem;   /* 144px */
+
+  /* Checkbox/Radio - Spacious */
+  --el-checkbox-size-sm: 1rem;     /* 16px */
+  --el-checkbox-size-md: 1.25rem;  /* 20px */
+  --el-checkbox-size-lg: 1.5rem;   /* 24px */
+
+  /* Gaps - Spacious */
+  --el-gap-sm: 0.5rem;    /* 8px */
+  --el-gap-md: 0.75rem;   /* 12px */
+  --el-gap-lg: 1rem;      /* 16px */
+
+  /* Message - Spacious */
+  --el-message-min-height: 1.25rem;  /* 20px */
+  --el-message-font-size: 0.875rem;  /* 14px */
+
+  /* Button - Spacious */
+  --el-btn-px-sm: 1rem;      /* 16px */
+  --el-btn-px-md: 1.25rem;   /* 20px */
+  --el-btn-px-lg: 1.5rem;    /* 24px */
+  --el-btn-py-sm: 0.5rem;    /* 8px */
+  --el-btn-py-md: 0.625rem;  /* 10px */
+  --el-btn-py-lg: 0.75rem;   /* 12px */
+
+  /* Toggle - Spacious */
+  --el-toggle-sm-width: 40px;
+  --el-toggle-sm-height: 22px;
+  --el-toggle-sm-knob: 16px;
+  --el-toggle-md-width: 48px;
+  --el-toggle-md-height: 26px;
+  --el-toggle-md-knob: 20px;
+  --el-toggle-lg-width: 56px;
+  --el-toggle-lg-height: 30px;
+  --el-toggle-lg-knob: 24px;
+
+  /* Dropdown/Popover - Spacious */
+  --el-dropdown-padding: 0.75rem;
+  --el-dropdown-item-px: 1rem;
+  --el-dropdown-item-py: 0.75rem;
+  --el-dropdown-width-sm: 14rem;
+  --el-dropdown-width-md: 18rem;
+  --el-dropdown-width-lg: 22rem;
+  --el-dropdown-max-height: 22rem;
+
+  /* Badge - Spacious */
+  --el-badge-px-sm: 0.5rem;
+  --el-badge-py-sm: 0.1875rem;
+  --el-badge-px-md: 0.625rem;
+  --el-badge-py-md: 0.25rem;
+  --el-badge-px-lg: 0.75rem;
+  --el-badge-py-lg: 0.375rem;
+  --el-badge-font-size-sm: 0.75rem;
+  --el-badge-font-size-md: 0.8125rem;
+  --el-badge-font-size-lg: 0.875rem;
+  --el-badge-icon-size: 0.875rem;
+
+  /* Tabs - Spacious */
+  --el-tabs-padding: 0.375rem;
+  --el-tabs-gap: 0.375rem;
+  --el-tab-px: 1rem;
+  --el-tab-py: 0.625rem;
+  --el-tab-content-mt: 1.5rem;
+
+  /* Avatar - Spacious */
+  --el-avatar-size-xs: 2rem;
+  --el-avatar-size-sm: 2.5rem;
+  --el-avatar-size-md: 3rem;
+  --el-avatar-size-lg: 4rem;
+  --el-avatar-size-xl: 5rem;
+
+  /* Stepper - Spacious */
+  --el-stepper-circle-sm: 2rem;
+  --el-stepper-circle-md: 2.5rem;
+  --el-stepper-circle-lg: 3rem;
+  --el-stepper-gap: 0.75rem;
+
+  /* Filter bar - Spacious */
+  --el-filter-pill-px: 1rem;
+  --el-filter-pill-py: 0.5rem;
+  --el-filter-gap: 0.75rem;
+
+  /* Icon sizes - Spacious */
+  --el-icon-size-xs: 1rem;
+  --el-icon-size-sm: 1.25rem;
+  --el-icon-size-md: 1.5rem;
+  --el-icon-size-lg: 2rem;
+
+  /* Tooltip - Spacious */
+  --el-tooltip-px: 1rem;
+  --el-tooltip-py: 0.5rem;
+
+  /* Progress - Spacious */
+  --el-progress-height-sm: 0.375rem;
+  --el-progress-height-md: 0.75rem;
+  --el-progress-height-lg: 1rem;
+
+  /* Slider - Spacious */
+  --el-slider-track-height-sm: 0.375rem;
+  --el-slider-track-height-md: 0.75rem;
+  --el-slider-track-height-lg: 1rem;
+  --el-slider-thumb-size-sm: 1rem;
+  --el-slider-thumb-size-md: 1.25rem;
+  --el-slider-thumb-size-lg: 1.5rem;
+
+  /* Rating - Spacious */
+  --el-rating-size-sm: 1.25rem;
+  --el-rating-size-md: 1.5rem;
+  --el-rating-size-lg: 2rem;
+  --el-rating-gap-sm: 0.25rem;
+  --el-rating-gap-md: 0.375rem;
+  --el-rating-gap-lg: 0.5rem;
+
+  /* File Upload - Spacious */
+  --el-upload-padding: 2rem;
+  --el-upload-gap: 0.75rem;
+
+  /* Layout Gaps - Spacious */
+  --el-layout-gap-xs: 0.75rem;   /* 12px */
+  --el-layout-gap-sm: 1.5rem;    /* 24px */
+  --el-layout-gap-md: 2rem;      /* 32px */
+  --el-layout-gap-lg: 3rem;      /* 48px */
+  --el-layout-gap-xl: 4rem;      /* 64px */
+  --el-layout-gap-2xl: 5rem;     /* 80px */
+
+  /* Section/Content spacing - Spacious */
+  --el-section-gap: 2rem;
+  --el-content-gap: 1.5rem;
+  --el-inline-gap: 0.75rem;
+  --el-field-grid-gap: calc(var(--el-spacing-px-md) * 1.5);  /* 1.5x padding */
+
+  /* Control gaps - Spacious */
+  --el-control-gap-xs: 0.5rem;   /* 8px */
+  --el-control-gap-sm: 0.75rem;  /* 12px */
+  --el-control-gap-md: 1rem;     /* 16px */
+  --el-control-gap-lg: 1.5rem;   /* 24px */
+  --el-control-gap-xl: 2rem;     /* 32px */
+}
+
+/* Dark mode - Neutral text colors (no theme tint) */
+.dark {
+  --background: 0 0% 7%;
+  --foreground: 0 0% 95%;
+  --card: 0 0% 12%;
+  --card-foreground: 0 0% 95%;
+  --popover: 0 0% 12%;
+  --popover-foreground: 0 0% 95%;
+  --primary: 218 34% 60%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 15%;
+  --secondary-foreground: 0 0% 85%;
+  --muted: 0 0% 15%;
+  --muted-foreground: 0 0% 60%;
+  --accent: 0 0% 15%;
+  --accent-foreground: 0 0% 85%;
+  --destructive: 0 62% 50%;
+  --destructive-foreground: 0 0% 100%;
+  --border: 0 0% 20%;
+  --input: 0 0% 20%;
+  --ring: 218 34% 60%;
+
+  --surface: 0 0% 7%;
+  --surface-elevated: 0 0% 12%;
+  --surface-sunken: 0 0% 5%;
+
+  /* Neutral Gray Scale for dark mode */
+  --neutral-50: 0 0% 15%;
+  --neutral-100: 0 0% 18%;
+  --neutral-200: 0 0% 22%;
+  --neutral-300: 0 0% 30%;
+  --neutral-400: 0 0% 45%;
+  --neutral-500: 0 0% 55%;
+  --neutral-600: 0 0% 70%;
+  --neutral-700: 0 0% 80%;
+  --neutral-800: 0 0% 90%;
+  --neutral-900: 0 0% 95%;
+  --neutral-950: 0 0% 98%;
+
+  --help-panel-bg: var(--surface-elevated);
+}