@ngstarter-ui/components 1.0.28 → 1.0.30

package/styles/_tokens.scss

@@ -0,0 +1,1041 @@
+:root,
+[data-ngs-theme='default'] {
+  color-scheme: light;
+
+  --ngs-font-family-base: "Inter", "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --ngs-font-size-xs: 0.75rem;
+  --ngs-font-size-sm: 0.875rem;
+  --ngs-font-size-md: 0.9375rem;
+  --ngs-font-size-lg: 1.125rem;
+  --ngs-font-size-xl: 1.25rem;
+  --ngs-line-height-tight: 1.25;
+  --ngs-line-height-base: 1.5;
+
+  --ngs-radius-none: 0;
+  --ngs-radius-xs: 0.25rem;
+  --ngs-radius-sm: 0.375rem;
+  --ngs-radius-md: 0.5rem;
+  --ngs-radius-lg: 0.75rem;
+  --ngs-radius-xl: 1rem;
+  --ngs-radius-full: 9999px;
+
+  --ngs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
+  --ngs-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
+  --ngs-shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.18);
+
+  --ngs-color-primary: #036fe3;
+  --ngs-color-on-primary: #ffffff;
+  --ngs-color-primary-container: #d6eaff;
+  --ngs-color-on-primary-container: #001a36;
+  --ngs-color-secondary: #475569;
+  --ngs-color-on-secondary: #ffffff;
+  --ngs-color-secondary-container: #f1f5f9;
+  --ngs-color-on-secondary-container: #0f172a;
+  --ngs-color-tertiary: #0ea5e9;
+  --ngs-color-on-tertiary: #ffffff;
+  --ngs-color-tertiary-container: #e0f2fe;
+  --ngs-color-on-tertiary-container: #0c4a6e;
+  --ngs-color-danger: #ef4444;
+  --ngs-color-on-danger: #ffffff;
+  --ngs-color-danger-container: #fee2e2;
+  --ngs-color-on-danger-container: #7f1d1d;
+  --ngs-color-info: #3b82f6;
+  --ngs-color-on-info: #ffffff;
+  --ngs-color-info-container: #dbeafe;
+  --ngs-color-on-info-container: #1e3a8a;
+  --ngs-color-success: #22c55e;
+  --ngs-color-on-success: #ffffff;
+  --ngs-color-success-container: #dcfce7;
+  --ngs-color-on-success-container: #14532d;
+  --ngs-color-warning: #f59e0b;
+  --ngs-color-on-warning: #ffffff;
+  --ngs-color-warning-container: #fef3c7;
+  --ngs-color-on-warning-container: #78350f;
+
+  --ngs-color-background: #ffffff;
+  --ngs-color-on-background: #0f172a;
+  --ngs-color-surface: #ffffff;
+  --ngs-color-surface-bright: #ffffff;
+  --ngs-color-on-surface: #0f172a;
+  --ngs-color-on-surface-variant: #64748b;
+  --ngs-color-neutral-50: #f8fafc;
+  --ngs-color-neutral-100: #f1f5f9;
+  --ngs-color-neutral-200: #e2e8f0;
+  --ngs-color-neutral-300: #cbd5e1;
+  --ngs-color-neutral-400: #94a3b8;
+  --ngs-color-neutral-500: #64748b;
+  --ngs-color-neutral-600: #475569;
+  --ngs-color-neutral-650: #405064;
+  --ngs-color-neutral-700: #334155;
+  --ngs-color-neutral-800: #1e293b;
+  --ngs-color-neutral-900: #0f172a;
+  --ngs-color-neutral-950: #020617;
+  --ngs-color-neutral: var(--ngs-color-neutral-500);
+  --ngs-color-black: #000000;
+  --ngs-color-white: #ffffff;
+  --ngs-color-surface-container-lowest: #ffffff;
+  --ngs-color-surface-container-low: #f8fafc;
+  --ngs-color-surface-container: #f1f5f9;
+  --ngs-color-surface-container-high: #e2e8f0;
+  --ngs-color-surface-container-highest: #cbd5e1;
+  --ngs-color-outline: color-mix(in srgb, var(--ngs-color-primary), #000000 70%);
+  --ngs-color-outline-variant: color-mix(in srgb, var(--ngs-color-primary), #000000 84%);
+  --ngs-color-border: var(--ngs-color-surface-container-high);
+  --ngs-color-faint: var(--ngs-color-surface-container);
+  --ngs-color-subtle: var(--ngs-color-surface-container-high);
+  --ngs-color-muted: var(--ngs-color-surface-container-highest);
+  --ngs-color-emphasis: #94a3b8;
+  --ngs-color-strong: #64748b;
+  --ngs-state-hover-bg: color-mix(in srgb, var(--ngs-color-on-surface), transparent 94%);
+  --ngs-state-active-bg: color-mix(in srgb, var(--ngs-color-on-surface), transparent 90%);
+  --ngs-state-selected-bg: color-mix(in srgb, var(--ngs-color-primary), transparent 88%);
+  --ngs-state-selected-color: var(--ngs-color-primary);
+  --ngs-state-focus-ring: color-mix(in srgb, var(--ngs-color-primary), transparent 64%);
+  --ngs-state-disabled-bg: color-mix(in srgb, var(--ngs-color-on-surface), transparent 95%);
+  --ngs-state-disabled-color: color-mix(in srgb, var(--ngs-color-on-surface), transparent 62%);
+  --ngs-state-disabled-border: color-mix(in srgb, var(--ngs-color-on-surface), transparent 90%);
+  --ngs-color-primary-100: color-mix(in srgb, var(--ngs-color-primary), transparent 90%);
+  --ngs-color-primary-200: color-mix(in srgb, var(--ngs-color-primary), transparent 80%);
+  --ngs-color-primary-300: color-mix(in srgb, var(--ngs-color-primary), transparent 70%);
+  --ngs-color-primary-400: color-mix(in srgb, var(--ngs-color-primary), transparent 60%);
+  --ngs-color-primary-500: color-mix(in srgb, var(--ngs-color-primary), transparent 50%);
+  --ngs-color-primary-600: color-mix(in srgb, var(--ngs-color-primary), transparent 40%);
+  --ngs-color-secondary-100: color-mix(in srgb, var(--ngs-color-secondary), transparent 90%);
+  --ngs-color-secondary-200: color-mix(in srgb, var(--ngs-color-secondary), transparent 80%);
+  --ngs-color-secondary-300: color-mix(in srgb, var(--ngs-color-secondary), transparent 70%);
+  --ngs-color-secondary-400: color-mix(in srgb, var(--ngs-color-secondary), transparent 60%);
+  --ngs-color-secondary-fixed: var(--ngs-color-secondary-container);
+  --ngs-color-on-secondary-fixed: var(--ngs-color-on-secondary-container);
+  --ngs-color-tertiary-100: color-mix(in srgb, var(--ngs-color-tertiary), transparent 90%);
+  --ngs-color-tertiary-200: color-mix(in srgb, var(--ngs-color-tertiary), transparent 80%);
+  --ngs-color-tertiary-300: color-mix(in srgb, var(--ngs-color-tertiary), transparent 70%);
+  --ngs-color-tertiary-700: color-mix(in srgb, var(--ngs-color-tertiary), #000000 35%);
+  --ngs-color-tertiary-800: color-mix(in srgb, var(--ngs-color-tertiary), #000000 50%);
+  --ngs-color-danger-container-lowest: color-mix(in srgb, var(--ngs-color-danger), #ffffff 98%);
+  --ngs-color-danger-container-low: color-mix(in srgb, var(--ngs-color-danger), #ffffff 96%);
+  --ngs-color-danger-container-high: color-mix(in srgb, var(--ngs-color-danger), #ffffff 86%);
+  --ngs-color-danger-container-highest: color-mix(in srgb, var(--ngs-color-danger), #ffffff 78%);
+  --ngs-color-orange-container: var(--ngs-color-warning-container);
+  --ngs-color-on-orange-container: var(--ngs-color-on-warning-container);
+  --ngs-color-green-500: #22c55e;
+
+  --ngs-density-scale: 0;
+  --ngs-control-height-sm: calc(2rem + var(--ngs-density-scale) * 1px);
+  --ngs-control-height-md: calc(2.75rem + var(--ngs-density-scale) * 1px);
+  --ngs-control-height-lg: calc(3.25rem + var(--ngs-density-scale) * 1px);
+  --ngs-control-padding-x: --spacing(4);
+  --ngs-control-gap: --spacing(2);
+  --ngs-control-radius: var(--ngs-radius-lg);
+  --ngs-icon-size: --spacing(6);
+  --ngs-icon-color: inherit;
+
+  --ngs-button-height: var(--ngs-control-height-md);
+  --ngs-button-padding-x: var(--ngs-control-padding-x);
+  --ngs-button-radius: var(--ngs-control-radius);
+  --ngs-button-font-size: var(--ngs-font-size-sm);
+  --ngs-button-font-weight: 500;
+  --ngs-button-filled-bg: var(--ngs-color-primary);
+  --ngs-button-filled-color: var(--ngs-color-on-primary);
+  --ngs-button-tonal-bg: var(--ngs-color-secondary-container);
+  --ngs-button-tonal-color: var(--ngs-color-on-secondary-container);
+  --ngs-button-outlined-border: var(--ngs-color-outline);
+  --ngs-button-outlined-color: var(--ngs-color-primary);
+  --ngs-button-text-color: var(--ngs-color-primary);
+
+  --ngs-field-color: var(--ngs-color-primary);
+  --ngs-field-bg: var(--ngs-color-surface);
+  --ngs-field-disabled-bg: var(--ngs-color-surface-container-low);
+  --ngs-field-text: var(--ngs-color-on-surface);
+  --ngs-field-caret-color: var(--ngs-color-primary);
+  --ngs-field-label-color: var(--ngs-color-on-surface-variant);
+  --ngs-field-label-focus-color: var(--ngs-color-primary);
+  --ngs-field-error-color: var(--ngs-color-danger);
+  --ngs-field-border-color: var(--ngs-color-emphasis);
+  --ngs-field-border-focus-color: var(--ngs-color-primary);
+  --ngs-field-border-width: 1px;
+  --ngs-field-radius: var(--ngs-control-radius);
+  --ngs-field-font-size: var(--ngs-font-size-md);
+  --ngs-field-line-height: var(--ngs-line-height-base);
+  --ngs-field-label-float-font-size: 0.75rem;
+  --ngs-field-container-height: calc(3.125rem + var(--ngs-density-scale) * 1px);
+  --ngs-field-infix-height: calc(3.125rem + var(--ngs-density-scale) * 1px);
+  --ngs-field-padding-x: --spacing(3);
+  --ngs-field-filled-bg: var(--ngs-color-surface-container-highest);
+  --ngs-field-filled-indicator: var(--ngs-color-on-surface-variant);
+  --ngs-field-filled-indicator-focus: var(--ngs-color-primary);
+  --ngs-field-outlined-border: var(--ngs-color-outline);
+  --ngs-field-outlined-border-focus: var(--ngs-color-primary);
+
+  --ngs-dropdown-bg: var(--ngs-color-surface-container-lowest);
+  --ngs-dropdown-shadow: var(--ngs-shadow-md);
+  --ngs-dropdown-radius: var(--ngs-radius-lg);
+  --ngs-dropdown-border: 1px solid var(--ngs-color-faint);
+  --ngs-dropdown-max-height: 16rem;
+  --ngs-option-height: var(--ngs-control-height-md);
+
+  --ngs-dialog-bg: var(--ngs-color-surface-container-lowest);
+  --ngs-dialog-color: var(--ngs-color-on-surface);
+  --ngs-dialog-radius: var(--ngs-radius-xl);
+  --ngs-dialog-shadow: var(--ngs-shadow-lg);
+  --ngs-dialog-title-font-size: var(--ngs-font-size-xl);
+  --ngs-dialog-title-font-weight: 600;
+  --ngs-dialog-header-padding: --spacing(2) --spacing(6) --spacing(3);
+  --ngs-overlay-backdrop-bg: rgba(0, 0, 0, 0.25);
+  --ngs-overlay-backdrop-blur: 3px;
+
+  --ngs-table-bg: var(--ngs-color-surface);
+  --ngs-table-border-color: var(--ngs-color-border);
+  --ngs-table-header-color: var(--ngs-color-on-surface-variant);
+  --ngs-table-header-bg: var(--ngs-color-surface);
+  --ngs-table-row-bg: var(--ngs-color-background);
+  --ngs-table-row-height: calc(3.25rem + var(--ngs-density-scale) * 1px);
+  --ngs-table-header-row-height: calc(3.5rem + var(--ngs-density-scale) * 1px);
+  --ngs-table-cell-padding: --spacing(1) --spacing(4);
+  --ngs-table-cell-font-size: var(--ngs-font-size-sm);
+  --ngs-table-header-cell-font-size: var(--ngs-font-size-xs);
+  --ngs-table-header-cell-font-weight: 500;
+  --ngs-table-background: var(--ngs-table-bg);
+  --ngs-table-header-cell-color: var(--ngs-table-header-color);
+  --ngs-table-header-cell-background: var(--ngs-table-header-bg);
+  --ngs-table-row-border-color: var(--ngs-table-border-color);
+
+  --ngs-nav-item-height: calc(2.5rem + var(--ngs-density-scale) * 1px);
+  --ngs-nav-items-gap: --spacing(1);
+  --ngs-nav-item-width: 100%;
+  --ngs-nav-item-padding: 0 --spacing(3);
+  --ngs-nav-item-gap: --spacing(2);
+  --ngs-nav-item-radius: var(--ngs-radius-lg);
+  --ngs-nav-item-font-size: var(--ngs-font-size-sm);
+  --ngs-nav-item-font-weight: 500;
+  --ngs-nav-item-border-width: 0;
+  --ngs-nav-item-border-color: transparent;
+  --ngs-nav-item-color: var(--ngs-color-on-surface-variant);
+  --ngs-nav-item-hover-color: var(--ngs-color-on-surface);
+  --ngs-nav-item-active-color: var(--ngs-color-primary);
+  --ngs-nav-item-hover-bg: linear-gradient(to bottom, var(--ngs-color-surface-container-high), var(--ngs-color-surface-container));
+  --ngs-nav-item-active-bg: linear-gradient(to bottom, var(--ngs-color-surface-container-high), var(--ngs-color-surface-container));
+  --ngs-nav-item-icon-width: --spacing(6);
+  --ngs-nav-item-icon-size: --spacing(6);
+  --ngs-nav-item-icon-font-size: 1.5rem;
+  --ngs-nav-item-icon-color: var(--ngs-color-on-surface-variant);
+  --ngs-nav-item-hover-icon-color: var(--ngs-color-on-surface);
+  --ngs-nav-item-active-icon-color: var(--ngs-color-primary);
+  --ngs-nav-badge-size: --spacing(5);
+  --ngs-nav-badge-padding: 0 --spacing(2);
+  --ngs-nav-arrow-size: --spacing(7);
+  --ngs-nav-group-toggle-padding-end: --spacing(2);
+  --ngs-nav-group-toggle-icon-size: --spacing(4);
+  --ngs-nav-group-toggle-icon-position-end: --spacing(3);
+  --ngs-nav-nested-item-height: var(--ngs-nav-item-height);
+  --ngs-nav-nested-item-padding: 0 --spacing(3);
+  --ngs-nav-nested-item-margin: 0 0 0 52px;
+  --ngs-nav-nested-item-border-radius: 0;
+  --ngs-nav-nested-item-indicator-width: --spacing(3.5);
+  --ngs-nav-nested-item-indicator-height: --spacing(0.5);
+  --ngs-nav-nested-item-indicator-position-start: calc(--spacing(2.5) * -1);
+  --ngs-nav-heading-font-size: var(--ngs-font-size-xs);
+  --ngs-nav-heading-font-weight: 600;
+  --ngs-nav-heading-padding: 0 --spacing(3);
+  --ngs-nav-heading-margin-top: --spacing(6);
+  --ngs-nav-heading-margin-bottom: --spacing(2);
+  --ngs-nav-heading-after-margin: --spacing(8);
+  --ngs-nav-heading-text-transform: uppercase;
+  --ngs-nav-heading-text-align: start;
+  --ngs-nav-heading-height: --spacing(6);
+  --ngs-nav-divider-height: 1px;
+  --ngs-nav-divider-margin: --spacing(6) 0;
+  --ngs-sidebar-width: var(--ngs-sidenav-width, 17.5rem);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-ngs-color-scheme='light']) {
+    color-scheme: dark;
+    --ngs-color-primary: #46a1ff;
+    --ngs-color-on-primary: #ffffff;
+    --ngs-color-primary-container: #004791;
+    --ngs-color-on-primary-container: #d6eaff;
+    --ngs-color-secondary: #94a3b8;
+    --ngs-color-on-secondary: #0f172a;
+    --ngs-color-secondary-container: #1e293b;
+    --ngs-color-on-secondary-container: #f1f5f9;
+    --ngs-color-tertiary: #38bdf8;
+    --ngs-color-on-tertiary: #0c4a6e;
+    --ngs-color-tertiary-container: #075985;
+    --ngs-color-on-tertiary-container: #e0f2fe;
+    --ngs-color-danger: #f87171;
+    --ngs-color-on-danger: #450a0a;
+    --ngs-color-danger-container: #7f1d1d;
+    --ngs-color-on-danger-container: #fef2f2;
+    --ngs-color-danger-container-lowest: color-mix(in srgb, var(--ngs-color-danger), #000000 92%);
+    --ngs-color-danger-container-low: color-mix(in srgb, var(--ngs-color-danger), #000000 88%);
+    --ngs-color-danger-container-high: color-mix(in srgb, var(--ngs-color-danger), #000000 80%);
+    --ngs-color-danger-container-highest: color-mix(in srgb, var(--ngs-color-danger), #000000 76%);
+    --ngs-color-info: #60a5fa;
+    --ngs-color-on-info: #1e3a8a;
+    --ngs-color-info-container: #1e3a8a;
+    --ngs-color-on-info-container: #dbeafe;
+    --ngs-color-success: #4ade80;
+    --ngs-color-on-success: #064e3b;
+    --ngs-color-success-container: #064e3b;
+    --ngs-color-on-success-container: #dcfce7;
+    --ngs-color-warning: #fbbf24;
+    --ngs-color-on-warning: #78350f;
+    --ngs-color-warning-container: #78350f;
+    --ngs-color-on-warning-container: #fef3c7;
+    --ngs-color-background: #0f172a;
+    --ngs-color-on-background: #f8fafc;
+    --ngs-color-surface: #0f172a;
+    --ngs-color-surface-bright: #1e293b;
+    --ngs-color-on-surface: #f8fafc;
+    --ngs-color-on-surface-variant: #94a3b8;
+    --ngs-color-neutral-50: #020617;
+    --ngs-color-neutral-100: #0f172a;
+    --ngs-color-neutral-200: #1e293b;
+    --ngs-color-neutral-300: #334155;
+    --ngs-color-neutral-400: #475569;
+    --ngs-color-neutral-500: #64748b;
+    --ngs-color-neutral-600: #94a3b8;
+    --ngs-color-neutral-650: #a2afc0;
+    --ngs-color-neutral-700: #cbd5e1;
+    --ngs-color-neutral-800: #e2e8f0;
+    --ngs-color-neutral-900: #f1f5f9;
+    --ngs-color-neutral-950: #f8fafc;
+    --ngs-color-surface-container-lowest: #020617;
+    --ngs-color-surface-container-low: #0f172a;
+    --ngs-color-surface-container: #1e293b;
+    --ngs-color-surface-container-high: #334155;
+    --ngs-color-surface-container-highest: #475569;
+    --ngs-color-outline: color-mix(in srgb, var(--ngs-color-primary), #ffffff 70%);
+    --ngs-color-outline-variant: color-mix(in srgb, var(--ngs-color-primary), #ffffff 84%);
+    --ngs-color-faint: var(--ngs-color-surface-container-low);
+    --ngs-color-subtle: var(--ngs-color-surface-container);
+    --ngs-color-muted: var(--ngs-color-surface-container-high);
+    --ngs-color-emphasis: color-mix(in srgb, var(--ngs-color-primary), #ffffff 40%);
+    --ngs-color-strong: color-mix(in srgb, var(--ngs-color-primary), #ffffff 20%);
+  }
+}
+
+.dark,
+[data-ngs-color-scheme='dark'] {
+  color-scheme: dark;
+  --ngs-color-primary: #46a1ff;
+  --ngs-color-on-primary: #ffffff;
+  --ngs-color-primary-container: #004791;
+  --ngs-color-on-primary-container: #d6eaff;
+  --ngs-color-secondary: #94a3b8;
+  --ngs-color-on-secondary: #0f172a;
+  --ngs-color-secondary-container: #1e293b;
+  --ngs-color-on-secondary-container: #f1f5f9;
+  --ngs-color-tertiary: #38bdf8;
+  --ngs-color-on-tertiary: #0c4a6e;
+  --ngs-color-tertiary-container: #075985;
+  --ngs-color-on-tertiary-container: #e0f2fe;
+  --ngs-color-danger: #f87171;
+  --ngs-color-on-danger: #450a0a;
+  --ngs-color-danger-container: #7f1d1d;
+  --ngs-color-on-danger-container: #fef2f2;
+  --ngs-color-danger-container-lowest: color-mix(in srgb, var(--ngs-color-danger), #000000 92%);
+  --ngs-color-danger-container-low: color-mix(in srgb, var(--ngs-color-danger), #000000 88%);
+  --ngs-color-danger-container-high: color-mix(in srgb, var(--ngs-color-danger), #000000 80%);
+  --ngs-color-danger-container-highest: color-mix(in srgb, var(--ngs-color-danger), #000000 76%);
+  --ngs-color-info: #60a5fa;
+  --ngs-color-on-info: #1e3a8a;
+  --ngs-color-info-container: #1e3a8a;
+  --ngs-color-on-info-container: #dbeafe;
+  --ngs-color-success: #4ade80;
+  --ngs-color-on-success: #064e3b;
+  --ngs-color-success-container: #064e3b;
+  --ngs-color-on-success-container: #dcfce7;
+  --ngs-color-warning: #fbbf24;
+  --ngs-color-on-warning: #78350f;
+  --ngs-color-warning-container: #78350f;
+  --ngs-color-on-warning-container: #fef3c7;
+  --ngs-color-background: #0f172a;
+  --ngs-color-on-background: #f8fafc;
+  --ngs-color-surface: #0f172a;
+  --ngs-color-surface-bright: #1e293b;
+  --ngs-color-on-surface: #f8fafc;
+  --ngs-color-on-surface-variant: #94a3b8;
+  --ngs-color-neutral-50: #020617;
+  --ngs-color-neutral-100: #0f172a;
+  --ngs-color-neutral-200: #1e293b;
+  --ngs-color-neutral-300: #334155;
+  --ngs-color-neutral-400: #475569;
+  --ngs-color-neutral-500: #64748b;
+  --ngs-color-neutral-600: #94a3b8;
+  --ngs-color-neutral-650: #a2afc0;
+  --ngs-color-neutral-700: #cbd5e1;
+  --ngs-color-neutral-800: #e2e8f0;
+  --ngs-color-neutral-900: #f1f5f9;
+  --ngs-color-neutral-950: #f8fafc;
+  --ngs-color-surface-container-lowest: #020617;
+  --ngs-color-surface-container-low: #0f172a;
+  --ngs-color-surface-container: #1e293b;
+  --ngs-color-surface-container-high: #334155;
+  --ngs-color-surface-container-highest: #475569;
+  --ngs-color-outline: color-mix(in srgb, var(--ngs-color-primary), #ffffff 70%);
+  --ngs-color-outline-variant: color-mix(in srgb, var(--ngs-color-primary), #ffffff 84%);
+  --ngs-color-faint: var(--ngs-color-surface-container-low);
+  --ngs-color-subtle: var(--ngs-color-surface-container);
+  --ngs-color-muted: var(--ngs-color-surface-container-high);
+  --ngs-color-emphasis: color-mix(in srgb, var(--ngs-color-primary), #ffffff 40%);
+  --ngs-color-strong: color-mix(in srgb, var(--ngs-color-primary), #ffffff 20%);
+}
+
+[data-ngs-theme='enterprise']:not([data-ngs-color-scheme='dark']):not(.dark) {
+  --ngs-font-family-base: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --ngs-radius-xs: 0.125rem;
+  --ngs-radius-sm: 0.25rem;
+  --ngs-radius-md: 0.375rem;
+  --ngs-radius-lg: 0.5rem;
+  --ngs-radius-xl: 0.625rem;
+  --ngs-shadow-sm: 0 1px 1px rgba(16, 24, 40, 0.06);
+  --ngs-shadow-md: 0 2px 8px rgba(16, 24, 40, 0.08);
+  --ngs-shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.14);
+
+  --ngs-color-primary: #173b66;
+  --ngs-color-on-primary: #ffffff;
+  --ngs-color-primary-container: #e3ebf5;
+  --ngs-color-on-primary-container: #0e2744;
+  --ngs-color-secondary: #536170;
+  --ngs-color-on-secondary: #ffffff;
+  --ngs-color-secondary-container: #eef2f6;
+  --ngs-color-on-secondary-container: #202b37;
+  --ngs-color-tertiary: #0f6b6e;
+  --ngs-color-on-tertiary: #ffffff;
+  --ngs-color-tertiary-container: #d9eeee;
+  --ngs-color-on-tertiary-container: #083c3e;
+  --ngs-color-danger: #b42318;
+  --ngs-color-on-danger: #ffffff;
+  --ngs-color-danger-container: #fecdca;
+  --ngs-color-on-danger-container: #7a271a;
+  --ngs-color-info: #175cd3;
+  --ngs-color-on-info: #ffffff;
+  --ngs-color-info-container: #d1e9ff;
+  --ngs-color-on-info-container: #1849a9;
+  --ngs-color-success: #067647;
+  --ngs-color-on-success: #ffffff;
+  --ngs-color-success-container: #d1fadf;
+  --ngs-color-on-success-container: #054f31;
+  --ngs-color-warning: #b54708;
+  --ngs-color-on-warning: #ffffff;
+  --ngs-color-warning-container: #fedf89;
+  --ngs-color-on-warning-container: #7a2e0e;
+  --ngs-color-background: #f3f5f7;
+  --ngs-color-on-background: #17202a;
+  --ngs-color-surface: #ffffff;
+  --ngs-color-surface-bright: #ffffff;
+  --ngs-color-on-surface: #17202a;
+  --ngs-color-on-surface-variant: #5e6b7a;
+  --ngs-color-neutral-50: #f8fafc;
+  --ngs-color-neutral-100: #f1f4f7;
+  --ngs-color-neutral-200: #e4e9ef;
+  --ngs-color-neutral-300: #d5dce5;
+  --ngs-color-neutral-400: #a7b1be;
+  --ngs-color-neutral-500: #758295;
+  --ngs-color-neutral-600: #536170;
+  --ngs-color-neutral-650: #465260;
+  --ngs-color-neutral-700: #344051;
+  --ngs-color-neutral-800: #202b37;
+  --ngs-color-neutral-900: #111827;
+  --ngs-color-neutral-950: #0b1118;
+  --ngs-color-surface-container-lowest: #ffffff;
+  --ngs-color-surface-container-low: #fafbfc;
+  --ngs-color-surface-container: #f4f6f8;
+  --ngs-color-surface-container-high: #e9eef3;
+  --ngs-color-surface-container-highest: #d9e1ea;
+  --ngs-color-outline: #8b97a7;
+  --ngs-color-outline-variant: #c6ced8;
+  --ngs-color-border: #d5dce5;
+  --ngs-color-faint: #edf1f5;
+  --ngs-color-subtle: #dfe5ec;
+  --ngs-color-muted: #c6ced8;
+  --ngs-color-emphasis: #758295;
+  --ngs-color-strong: #344051;
+
+  --ngs-state-hover-bg: #eef2f6;
+  --ngs-state-active-bg: #e4e9ef;
+  --ngs-state-selected-bg: #e3ebf5;
+  --ngs-state-selected-color: #173b66;
+  --ngs-state-focus-ring: rgba(23, 59, 102, 0.18);
+  --ngs-state-disabled-bg: #eef2f6;
+  --ngs-state-disabled-color: #8b97a7;
+  --ngs-state-disabled-border: #d5dce5;
+
+  --ngs-control-height-sm: calc(1.875rem + var(--ngs-density-scale) * 1px);
+  --ngs-control-height-md: calc(2.375rem + var(--ngs-density-scale) * 1px);
+  --ngs-control-height-lg: calc(2.75rem + var(--ngs-density-scale) * 1px);
+  --ngs-control-padding-x: --spacing(3);
+  --ngs-control-radius: var(--ngs-radius-md);
+  --ngs-button-font-size: 0.8125rem;
+  --ngs-button-font-weight: 600;
+  --ngs-button-tonal-bg: #eef2f6;
+  --ngs-button-tonal-color: #202b37;
+  --ngs-button-outlined-border: #a7b1be;
+  --ngs-field-bg: #ffffff;
+  --ngs-field-disabled-bg: #eef2f6;
+  --ngs-field-border-color: #a7b1be;
+  --ngs-field-border-focus-color: #173b66;
+  --ngs-field-radius: var(--ngs-radius-md);
+  --ngs-field-font-size: 0.875rem;
+  --ngs-field-container-height: calc(2.625rem + var(--ngs-density-scale) * 1px);
+  --ngs-field-infix-height: calc(2.625rem + var(--ngs-density-scale) * 1px);
+  --ngs-field-filled-bg: #f4f6f8;
+  --ngs-dropdown-bg: #ffffff;
+  --ngs-dropdown-shadow: 0 6px 18px rgba(16, 24, 40, 0.12);
+  --ngs-dropdown-radius: var(--ngs-radius-md);
+  --ngs-dropdown-border: 1px solid #d5dce5;
+  --ngs-dialog-radius: var(--ngs-radius-lg);
+  --ngs-dialog-shadow: 0 18px 44px rgba(16, 24, 40, 0.18);
+  --ngs-overlay-backdrop-bg: rgba(17, 24, 39, 0.36);
+  --ngs-overlay-backdrop-blur: 1px;
+
+  --ngs-table-bg: #ffffff;
+  --ngs-table-header-bg: #f4f6f8;
+  --ngs-table-row-bg: #ffffff;
+  --ngs-table-border-color: #d5dce5;
+  --ngs-table-row-height: calc(2.625rem + var(--ngs-density-scale) * 1px);
+  --ngs-table-header-row-height: calc(2.5rem + var(--ngs-density-scale) * 1px);
+  --ngs-table-cell-padding: --spacing(1) --spacing(3);
+  --ngs-table-cell-font-size: 0.8125rem;
+  --ngs-table-header-cell-font-size: 0.6875rem;
+  --ngs-table-header-cell-font-weight: 700;
+
+  --ngs-nav-item-height: calc(2.125rem + var(--ngs-density-scale) * 1px);
+  --ngs-nav-items-gap: --spacing(0.5);
+  --ngs-nav-item-padding: 0 --spacing(2.5);
+  --ngs-nav-item-radius: var(--ngs-radius-sm);
+  --ngs-nav-item-font-size: 0.8125rem;
+  --ngs-nav-item-font-weight: 600;
+  --ngs-nav-item-border-width: 1px;
+  --ngs-nav-item-border-color: transparent;
+  --ngs-nav-item-color: #465260;
+  --ngs-nav-item-hover-color: #17202a;
+  --ngs-nav-item-active-color: #173b66;
+  --ngs-nav-item-hover-bg: #eef2f6;
+  --ngs-nav-item-active-bg: #e3ebf5;
+  --ngs-nav-item-icon-color: #758295;
+  --ngs-nav-item-hover-icon-color: #344051;
+  --ngs-nav-item-active-icon-color: #173b66;
+  --ngs-nav-item-icon-font-size: 1.25rem;
+  --ngs-nav-heading-font-size: 0.6875rem;
+  --ngs-nav-heading-font-weight: 700;
+  --ngs-nav-heading-margin-top: --spacing(5);
+  --ngs-nav-heading-margin-bottom: --spacing(1.5);
+  --ngs-nav-divider-margin: --spacing(4) 0;
+  --ngs-nav-nested-item-margin: 0 0 0 38px;
+  --ngs-sidebar-width: var(--ngs-sidenav-width, 16rem);
+}
+
+.dark[data-ngs-theme='enterprise'],
+[data-ngs-theme='enterprise'][data-ngs-color-scheme='dark'] {
+  --ngs-color-primary: #8fb8ff;
+  --ngs-color-on-primary: #07111f;
+  --ngs-color-primary-container: #173b66;
+  --ngs-color-on-primary-container: #d7e7ff;
+  --ngs-color-secondary: #a7b1be;
+  --ngs-color-on-secondary: #0b1118;
+  --ngs-color-secondary-container: #202b37;
+  --ngs-color-on-secondary-container: #e4e9ef;
+  --ngs-color-tertiary: #7bd2d5;
+  --ngs-color-on-tertiary: #082f32;
+  --ngs-color-tertiary-container: #0f4f52;
+  --ngs-color-on-tertiary-container: #d9eeee;
+  --ngs-color-danger: #f97066;
+  --ngs-color-on-danger: #4e1b16;
+  --ngs-color-danger-container: #7a271a;
+  --ngs-color-on-danger-container: #fee4e2;
+  --ngs-color-info: #84caff;
+  --ngs-color-on-info: #102a56;
+  --ngs-color-info-container: #1849a9;
+  --ngs-color-on-info-container: #d1e9ff;
+  --ngs-color-success: #75e0a7;
+  --ngs-color-on-success: #053321;
+  --ngs-color-success-container: #05603a;
+  --ngs-color-on-success-container: #d1fadf;
+  --ngs-color-warning: #fdb022;
+  --ngs-color-on-warning: #4e1d09;
+  --ngs-color-warning-container: #93370d;
+  --ngs-color-on-warning-container: #fef0c7;
+  --ngs-color-background: #0b1118;
+  --ngs-color-on-background: #e6edf3;
+  --ngs-color-surface: #111922;
+  --ngs-color-surface-bright: #182230;
+  --ngs-color-on-surface: #e6edf3;
+  --ngs-color-on-surface-variant: #9ba8b6;
+  --ngs-color-neutral-50: #0b1118;
+  --ngs-color-neutral-100: #111922;
+  --ngs-color-neutral-200: #182230;
+  --ngs-color-neutral-300: #202b37;
+  --ngs-color-neutral-400: #344051;
+  --ngs-color-neutral-500: #536170;
+  --ngs-color-neutral-600: #758295;
+  --ngs-color-neutral-650: #8b97a7;
+  --ngs-color-neutral-700: #a7b1be;
+  --ngs-color-neutral-800: #c6ced8;
+  --ngs-color-neutral-900: #e4e9ef;
+  --ngs-color-neutral-950: #f8fafc;
+  --ngs-color-surface-container-lowest: #0b1118;
+  --ngs-color-surface-container-low: #111922;
+  --ngs-color-surface-container: #182230;
+  --ngs-color-surface-container-high: #202b37;
+  --ngs-color-surface-container-highest: #293544;
+  --ngs-color-outline: #758295;
+  --ngs-color-outline-variant: #344051;
+  --ngs-color-border: #293544;
+  --ngs-color-faint: #182230;
+  --ngs-color-subtle: #202b37;
+  --ngs-color-muted: #344051;
+  --ngs-color-emphasis: #8b97a7;
+  --ngs-color-strong: #c6ced8;
+  --ngs-state-hover-bg: #182230;
+  --ngs-state-active-bg: #202b37;
+  --ngs-state-selected-bg: #173b66;
+  --ngs-state-selected-color: #d7e7ff;
+  --ngs-state-focus-ring: rgba(143, 184, 255, 0.26);
+  --ngs-state-disabled-bg: #182230;
+  --ngs-state-disabled-color: #758295;
+  --ngs-state-disabled-border: #293544;
+  --ngs-button-tonal-bg: #202b37;
+  --ngs-button-tonal-color: #e4e9ef;
+  --ngs-button-outlined-border: #536170;
+  --ngs-field-bg: #111922;
+  --ngs-field-disabled-bg: #182230;
+  --ngs-field-border-color: #536170;
+  --ngs-field-border-focus-color: #8fb8ff;
+  --ngs-field-filled-bg: #182230;
+  --ngs-dropdown-bg: #111922;
+  --ngs-dropdown-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
+  --ngs-dropdown-border: 1px solid #293544;
+  --ngs-dialog-shadow: 0 24px 54px rgba(0, 0, 0, 0.42);
+  --ngs-overlay-backdrop-bg: rgba(3, 7, 12, 0.62);
+  --ngs-table-bg: #111922;
+  --ngs-table-header-bg: #182230;
+  --ngs-table-row-bg: #111922;
+  --ngs-table-border-color: #293544;
+  --ngs-nav-item-color: #a7b1be;
+  --ngs-nav-item-hover-color: #e6edf3;
+  --ngs-nav-item-active-color: #d7e7ff;
+  --ngs-nav-item-hover-bg: #182230;
+  --ngs-nav-item-active-bg: #173b66;
+  --ngs-nav-item-icon-color: #8b97a7;
+  --ngs-nav-item-hover-icon-color: #e6edf3;
+  --ngs-nav-item-active-icon-color: #d7e7ff;
+}
+
+[data-ngs-theme='modern']:not([data-ngs-color-scheme='dark']):not(.dark) {
+  --ngs-font-family-base: "Inter", "Plus Jakarta Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --ngs-radius-xs: 0.5rem;
+  --ngs-radius-sm: 0.75rem;
+  --ngs-radius-md: 1rem;
+  --ngs-radius-lg: 1.25rem;
+  --ngs-radius-xl: 1.5rem;
+  --ngs-shadow-sm: 0 4px 14px rgba(79, 70, 229, 0.08);
+  --ngs-shadow-md: 0 16px 42px rgba(39, 52, 105, 0.14);
+  --ngs-shadow-lg: 0 28px 70px rgba(39, 52, 105, 0.20);
+
+  --ngs-color-primary: #4f46e5;
+  --ngs-color-on-primary: #ffffff;
+  --ngs-color-primary-container: #e6e9ff;
+  --ngs-color-on-primary-container: #27226e;
+  --ngs-color-secondary: #0f766e;
+  --ngs-color-on-secondary: #ffffff;
+  --ngs-color-secondary-container: #ccfbf1;
+  --ngs-color-on-secondary-container: #134e4a;
+  --ngs-color-tertiary: #db2777;
+  --ngs-color-on-tertiary: #ffffff;
+  --ngs-color-tertiary-container: #fce7f3;
+  --ngs-color-on-tertiary-container: #831843;
+  --ngs-color-danger: #e11d48;
+  --ngs-color-on-danger: #ffffff;
+  --ngs-color-danger-container: #ffe4e6;
+  --ngs-color-on-danger-container: #9f1239;
+  --ngs-color-info: #2563eb;
+  --ngs-color-on-info: #ffffff;
+  --ngs-color-info-container: #dbeafe;
+  --ngs-color-on-info-container: #1e3a8a;
+  --ngs-color-success: #059669;
+  --ngs-color-on-success: #ffffff;
+  --ngs-color-success-container: #d1fae5;
+  --ngs-color-on-success-container: #065f46;
+  --ngs-color-warning: #d97706;
+  --ngs-color-on-warning: #ffffff;
+  --ngs-color-warning-container: #fef3c7;
+  --ngs-color-on-warning-container: #92400e;
+  --ngs-color-background: #f7f8ff;
+  --ngs-color-on-background: #172033;
+  --ngs-color-surface: #ffffff;
+  --ngs-color-surface-bright: #ffffff;
+  --ngs-color-on-surface: #172033;
+  --ngs-color-on-surface-variant: #667085;
+  --ngs-color-neutral-50: #fafbff;
+  --ngs-color-neutral-100: #f3f5fb;
+  --ngs-color-neutral-200: #e8ecf6;
+  --ngs-color-neutral-300: #d7deee;
+  --ngs-color-neutral-400: #a9b4cc;
+  --ngs-color-neutral-500: #74809a;
+  --ngs-color-neutral-600: #566176;
+  --ngs-color-neutral-650: #495466;
+  --ngs-color-neutral-700: #384254;
+  --ngs-color-neutral-800: #20283a;
+  --ngs-color-neutral-900: #111827;
+  --ngs-color-neutral-950: #070b15;
+  --ngs-color-surface-container-lowest: #ffffff;
+  --ngs-color-surface-container-low: #fbfcff;
+  --ngs-color-surface-container: #f3f5ff;
+  --ngs-color-surface-container-high: #e9edff;
+  --ngs-color-surface-container-highest: #dde5ff;
+  --ngs-color-outline: #8c96b3;
+  --ngs-color-outline-variant: #d7deee;
+  --ngs-color-border: #e1e7f4;
+  --ngs-color-faint: #f1f5ff;
+  --ngs-color-subtle: #e7ecfb;
+  --ngs-color-muted: #d7deee;
+  --ngs-color-emphasis: #9aa6c0;
+  --ngs-color-strong: #566176;
+
+  --ngs-state-hover-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(15, 118, 110, 0.08));
+  --ngs-state-active-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.13), rgba(15, 118, 110, 0.12));
+  --ngs-state-selected-bg: linear-gradient(135deg, #e6e9ff, #ccfbf1);
+  --ngs-state-selected-color: #3730a3;
+  --ngs-state-focus-ring: rgba(79, 70, 229, 0.22);
+  --ngs-state-disabled-bg: #edf1f8;
+  --ngs-state-disabled-color: #9aa6c0;
+  --ngs-state-disabled-border: #d7deee;
+
+  --ngs-control-height-sm: calc(2.25rem + var(--ngs-density-scale) * 1px);
+  --ngs-control-height-md: calc(3rem + var(--ngs-density-scale) * 1px);
+  --ngs-control-height-lg: calc(3.5rem + var(--ngs-density-scale) * 1px);
+  --ngs-control-padding-x: --spacing(5);
+  --ngs-control-gap: --spacing(2.5);
+  --ngs-control-radius: var(--ngs-radius-xl);
+  --ngs-icon-size: --spacing(6);
+  --ngs-button-font-size: 0.9375rem;
+  --ngs-button-font-weight: 700;
+  --ngs-button-tonal-bg: linear-gradient(135deg, #e6e9ff, #ccfbf1);
+  --ngs-button-tonal-color: #27226e;
+  --ngs-button-outlined-border: #c7d2fe;
+  --ngs-field-bg: rgba(255, 255, 255, 0.92);
+  --ngs-field-disabled-bg: #edf1f8;
+  --ngs-field-border-color: #ccd5ea;
+  --ngs-field-border-focus-color: #4f46e5;
+  --ngs-field-radius: var(--ngs-radius-lg);
+  --ngs-field-font-size: 0.9375rem;
+  --ngs-field-container-height: calc(3.375rem + var(--ngs-density-scale) * 1px);
+  --ngs-field-infix-height: calc(3.375rem + var(--ngs-density-scale) * 1px);
+  --ngs-field-padding-x: --spacing(4);
+  --ngs-field-filled-bg: #f3f5ff;
+  --ngs-dropdown-bg: rgba(255, 255, 255, 0.98);
+  --ngs-dropdown-shadow: 0 20px 52px rgba(39, 52, 105, 0.18);
+  --ngs-dropdown-radius: var(--ngs-radius-xl);
+  --ngs-dropdown-border: 1px solid rgba(215, 222, 238, 0.9);
+  --ngs-dialog-radius: 1.75rem;
+  --ngs-dialog-shadow: 0 34px 86px rgba(39, 52, 105, 0.24);
+  --ngs-overlay-backdrop-bg: rgba(23, 32, 51, 0.30);
+  --ngs-overlay-backdrop-blur: 8px;
+
+  --ngs-table-bg: #ffffff;
+  --ngs-table-header-bg: linear-gradient(135deg, #f3f5ff, #eefcf9);
+  --ngs-table-row-bg: #ffffff;
+  --ngs-table-border-color: #e1e7f4;
+  --ngs-table-row-height: calc(3.5rem + var(--ngs-density-scale) * 1px);
+  --ngs-table-header-row-height: calc(3.25rem + var(--ngs-density-scale) * 1px);
+  --ngs-table-cell-padding: --spacing(2) --spacing(5);
+  --ngs-table-cell-font-size: 0.9375rem;
+  --ngs-table-header-cell-font-size: 0.75rem;
+  --ngs-table-header-cell-font-weight: 800;
+
+  --ngs-nav-item-height: calc(2.875rem + var(--ngs-density-scale) * 1px);
+  --ngs-nav-items-gap: --spacing(1.5);
+  --ngs-nav-item-padding: 0 --spacing(4);
+  --ngs-nav-item-radius: var(--ngs-radius-full);
+  --ngs-nav-item-font-size: 0.9375rem;
+  --ngs-nav-item-font-weight: 700;
+  --ngs-nav-item-color: #566176;
+  --ngs-nav-item-hover-color: #172033;
+  --ngs-nav-item-active-color: #3730a3;
+  --ngs-nav-item-hover-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(15, 118, 110, 0.08));
+  --ngs-nav-item-active-bg: linear-gradient(135deg, #e6e9ff, #ccfbf1);
+  --ngs-nav-item-icon-color: #74809a;
+  --ngs-nav-item-hover-icon-color: #4f46e5;
+  --ngs-nav-item-active-icon-color: #4f46e5;
+  --ngs-nav-item-icon-font-size: 1.375rem;
+  --ngs-nav-heading-font-size: 0.75rem;
+  --ngs-nav-heading-font-weight: 800;
+  --ngs-nav-heading-margin-top: --spacing(7);
+  --ngs-nav-heading-margin-bottom: --spacing(2);
+  --ngs-nav-divider-margin: --spacing(6) 0;
+  --ngs-nav-nested-item-margin: 0 0 0 52px;
+  --ngs-sidebar-width: var(--ngs-sidenav-width, 18.5rem);
+}
+
+.dark[data-ngs-theme='modern'],
+[data-ngs-theme='modern'][data-ngs-color-scheme='dark'] {
+  --ngs-color-primary: #a5b4fc;
+  --ngs-color-on-primary: #111827;
+  --ngs-color-primary-container: #3730a3;
+  --ngs-color-on-primary-container: #e0e7ff;
+  --ngs-color-secondary: #5eead4;
+  --ngs-color-on-secondary: #042f2e;
+  --ngs-color-secondary-container: #115e59;
+  --ngs-color-on-secondary-container: #ccfbf1;
+  --ngs-color-tertiary: #f9a8d4;
+  --ngs-color-on-tertiary: #500724;
+  --ngs-color-tertiary-container: #9d174d;
+  --ngs-color-on-tertiary-container: #fce7f3;
+  --ngs-color-danger: #fb7185;
+  --ngs-color-on-danger: #4c0519;
+  --ngs-color-danger-container: #9f1239;
+  --ngs-color-on-danger-container: #ffe4e6;
+  --ngs-color-info: #93c5fd;
+  --ngs-color-on-info: #0f1e46;
+  --ngs-color-info-container: #1d4ed8;
+  --ngs-color-on-info-container: #dbeafe;
+  --ngs-color-success: #6ee7b7;
+  --ngs-color-on-success: #042f2e;
+  --ngs-color-success-container: #047857;
+  --ngs-color-on-success-container: #d1fae5;
+  --ngs-color-warning: #fbbf24;
+  --ngs-color-on-warning: #451a03;
+  --ngs-color-warning-container: #92400e;
+  --ngs-color-on-warning-container: #fef3c7;
+  --ngs-color-background: #090d1a;
+  --ngs-color-on-background: #eef2ff;
+  --ngs-color-surface: #11162a;
+  --ngs-color-surface-bright: #1b2138;
+  --ngs-color-on-surface: #eef2ff;
+  --ngs-color-on-surface-variant: #b6c0d6;
+  --ngs-color-neutral-50: #090d1a;
+  --ngs-color-neutral-100: #11162a;
+  --ngs-color-neutral-200: #1b2138;
+  --ngs-color-neutral-300: #28304a;
+  --ngs-color-neutral-400: #3c4664;
+  --ngs-color-neutral-500: #697491;
+  --ngs-color-neutral-600: #8d98b5;
+  --ngs-color-neutral-650: #a3aec7;
+  --ngs-color-neutral-700: #b6c0d6;
+  --ngs-color-neutral-800: #d5dcf0;
+  --ngs-color-neutral-900: #eef2ff;
+  --ngs-color-neutral-950: #ffffff;
+  --ngs-color-surface-container-lowest: #090d1a;
+  --ngs-color-surface-container-low: #11162a;
+  --ngs-color-surface-container: #1b2138;
+  --ngs-color-surface-container-high: #28304a;
+  --ngs-color-surface-container-highest: #3c4664;
+  --ngs-color-outline: #8d98b5;
+  --ngs-color-outline-variant: #3c4664;
+  --ngs-color-border: #28304a;
+  --ngs-color-faint: #11162a;
+  --ngs-color-subtle: #1b2138;
+  --ngs-color-muted: #28304a;
+  --ngs-color-emphasis: #8d98b5;
+  --ngs-color-strong: #d5dcf0;
+  --ngs-state-hover-bg: linear-gradient(135deg, rgba(165, 180, 252, 0.12), rgba(94, 234, 212, 0.10));
+  --ngs-state-active-bg: linear-gradient(135deg, rgba(165, 180, 252, 0.18), rgba(94, 234, 212, 0.16));
+  --ngs-state-selected-bg: linear-gradient(135deg, #3730a3, #115e59);
+  --ngs-state-selected-color: #eef2ff;
+  --ngs-state-focus-ring: rgba(165, 180, 252, 0.32);
+  --ngs-state-disabled-bg: #1b2138;
+  --ngs-state-disabled-color: #697491;
+  --ngs-state-disabled-border: #28304a;
+  --ngs-button-tonal-bg: linear-gradient(135deg, #3730a3, #115e59);
+  --ngs-button-tonal-color: #eef2ff;
+  --ngs-button-outlined-border: #4f5d82;
+  --ngs-field-bg: rgba(17, 22, 42, 0.92);
+  --ngs-field-disabled-bg: #1b2138;
+  --ngs-field-border-color: #4f5d82;
+  --ngs-field-border-focus-color: #a5b4fc;
+  --ngs-field-filled-bg: #1b2138;
+  --ngs-dropdown-bg: rgba(17, 22, 42, 0.98);
+  --ngs-dropdown-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
+  --ngs-dropdown-border: 1px solid #28304a;
+  --ngs-dialog-shadow: 0 34px 86px rgba(0, 0, 0, 0.52);
+  --ngs-overlay-backdrop-bg: rgba(2, 6, 23, 0.62);
+  --ngs-table-bg: #11162a;
+  --ngs-table-header-bg: linear-gradient(135deg, #1b2138, #102f35);
+  --ngs-table-row-bg: #11162a;
+  --ngs-table-border-color: #28304a;
+  --ngs-nav-item-color: #b6c0d6;
+  --ngs-nav-item-hover-color: #eef2ff;
+  --ngs-nav-item-active-color: #eef2ff;
+  --ngs-nav-item-hover-bg: linear-gradient(135deg, rgba(165, 180, 252, 0.12), rgba(94, 234, 212, 0.10));
+  --ngs-nav-item-active-bg: linear-gradient(135deg, #3730a3, #115e59);
+  --ngs-nav-item-icon-color: #8d98b5;
+  --ngs-nav-item-hover-icon-color: #a5b4fc;
+  --ngs-nav-item-active-icon-color: #ccfbf1;
+}
+
+[data-ngs-density='compact'] {
+  --ngs-density-scale: -6;
+  --ngs-control-padding-x: --spacing(3);
+  --ngs-table-cell-padding: --spacing(1) --spacing(3);
+}
+
+[data-ngs-density='comfortable'] {
+  --ngs-density-scale: 0;
+}
+
+[data-ngs-density='spacious'] {
+  --ngs-density-scale: 6;
+  --ngs-control-padding-x: --spacing(5);
+}
+
+[data-ngs-radius='none'] { --ngs-control-radius: var(--ngs-radius-none); --ngs-dialog-radius: var(--ngs-radius-none); --ngs-nav-item-radius: var(--ngs-radius-none); }
+[data-ngs-radius='small'] { --ngs-control-radius: var(--ngs-radius-sm); --ngs-dialog-radius: var(--ngs-radius-md); --ngs-nav-item-radius: var(--ngs-radius-sm); }
+[data-ngs-radius='medium'] { --ngs-control-radius: var(--ngs-radius-lg); --ngs-dialog-radius: var(--ngs-radius-xl); --ngs-nav-item-radius: var(--ngs-radius-lg); }
+[data-ngs-radius='large'] { --ngs-control-radius: var(--ngs-radius-xl); --ngs-dialog-radius: 1.25rem; --ngs-nav-item-radius: var(--ngs-radius-xl); }
+
+:root,
+.dark,
+[data-ngs-theme],
+[data-ngs-color-scheme] {
+  --color-primary: var(--ngs-color-primary);
+  --color-on-primary: var(--ngs-color-on-primary);
+  --color-primary-container: var(--ngs-color-primary-container);
+  --color-on-primary-container: var(--ngs-color-on-primary-container);
+  --color-secondary: var(--ngs-color-secondary);
+  --color-on-secondary: var(--ngs-color-on-secondary);
+  --color-secondary-container: var(--ngs-color-secondary-container);
+  --color-on-secondary-container: var(--ngs-color-on-secondary-container);
+  --color-tertiary: var(--ngs-color-tertiary);
+  --color-on-tertiary: var(--ngs-color-on-tertiary);
+  --color-tertiary-container: var(--ngs-color-tertiary-container);
+  --color-on-tertiary-container: var(--ngs-color-on-tertiary-container);
+  --color-error: var(--ngs-color-danger);
+  --color-on-error: var(--ngs-color-on-danger);
+  --color-error-container: var(--ngs-color-danger-container);
+  --color-on-error-container: var(--ngs-color-on-danger-container);
+  --color-background: var(--ngs-color-background);
+  --color-on-background: var(--ngs-color-on-background);
+  --color-surface: var(--ngs-color-surface);
+  --color-surface-bright: var(--ngs-color-surface-bright);
+  --color-on-surface: var(--ngs-color-on-surface);
+  --color-on-surface-variant: var(--ngs-color-on-surface-variant);
+  --color-surface-container-lowest: var(--ngs-color-surface-container-lowest);
+  --color-surface-container-low: var(--ngs-color-surface-container-low);
+  --color-surface-container: var(--ngs-color-surface-container);
+  --color-surface-container-high: var(--ngs-color-surface-container-high);
+  --color-surface-container-highest: var(--ngs-color-surface-container-highest);
+  --color-outline: var(--ngs-color-outline);
+  --color-outline-variant: var(--ngs-color-outline-variant);
+  --color-border: var(--ngs-color-border);
+  --color-neutral-50: var(--ngs-color-neutral-50);
+  --color-neutral-100: var(--ngs-color-neutral-100);
+  --color-neutral-200: var(--ngs-color-neutral-200);
+  --color-neutral-300: var(--ngs-color-neutral-300);
+  --color-neutral-400: var(--ngs-color-neutral-400);
+  --color-neutral-500: var(--ngs-color-neutral-500);
+  --color-neutral-600: var(--ngs-color-neutral-600);
+  --color-neutral-650: var(--ngs-color-neutral-650);
+  --color-neutral-700: var(--ngs-color-neutral-700);
+  --color-neutral-800: var(--ngs-color-neutral-800);
+  --color-neutral-900: var(--ngs-color-neutral-900);
+  --color-neutral-950: var(--ngs-color-neutral-950);
+  --color-black: var(--ngs-color-black);
+  --color-white: var(--ngs-color-white);
+  --color-primary-100: var(--ngs-color-primary-100);
+  --color-primary-200: var(--ngs-color-primary-200);
+  --color-primary-300: var(--ngs-color-primary-300);
+  --color-primary-400: var(--ngs-color-primary-400);
+  --color-primary-500: var(--ngs-color-primary-500);
+  --color-primary-600: var(--ngs-color-primary-600);
+  --color-secondary-100: var(--ngs-color-secondary-100);
+  --color-secondary-200: var(--ngs-color-secondary-200);
+  --color-secondary-300: var(--ngs-color-secondary-300);
+  --color-secondary-400: var(--ngs-color-secondary-400);
+  --color-secondary-fixed: var(--ngs-color-secondary-fixed);
+  --color-on-secondary-fixed: var(--ngs-color-on-secondary-fixed);
+  --color-tertiary-100: var(--ngs-color-tertiary-100);
+  --color-tertiary-200: var(--ngs-color-tertiary-200);
+  --color-tertiary-300: var(--ngs-color-tertiary-300);
+  --color-tertiary-700: var(--ngs-color-tertiary-700);
+  --color-tertiary-800: var(--ngs-color-tertiary-800);
+  --color-error-container-lowest: var(--ngs-color-danger-container-lowest);
+  --color-error-container-low: var(--ngs-color-danger-container-low);
+  --color-error-container-high: var(--ngs-color-danger-container-high);
+  --color-error-container-highest: var(--ngs-color-danger-container-highest);
+  --color-informative: var(--ngs-color-info);
+  --color-on-informative: var(--ngs-color-on-info);
+  --color-informative-container: var(--ngs-color-info-container);
+  --color-on-informative-container: var(--ngs-color-on-info-container);
+  --color-positive: var(--ngs-color-success);
+  --color-on-positive: var(--ngs-color-on-success);
+  --color-positive-container: var(--ngs-color-success-container);
+  --color-on-positive-container: var(--ngs-color-on-success-container);
+  --color-negative: var(--ngs-color-danger);
+  --color-on-negative: var(--ngs-color-on-danger);
+  --color-negative-container: var(--ngs-color-danger-container);
+  --color-on-negative-container: var(--ngs-color-on-danger-container);
+  --color-notice: var(--ngs-color-warning);
+  --color-on-notice: var(--ngs-color-on-warning);
+  --color-notice-container: var(--ngs-color-warning-container);
+  --color-on-notice-container: var(--ngs-color-on-warning-container);
+  --color-orange-container: var(--ngs-color-orange-container);
+  --color-on-orange-container: var(--ngs-color-on-orange-container);
+  --color-green-500: var(--ngs-color-green-500);
+  --color-faint: var(--ngs-color-faint);
+  --color-subtle: var(--ngs-color-subtle);
+  --color-muted: var(--ngs-color-muted);
+  --color-emphasis: var(--ngs-color-emphasis);
+  --color-strong: var(--ngs-color-strong);
+  --state-hover-bg: var(--ngs-state-hover-bg);
+  --state-active-bg: var(--ngs-state-active-bg);
+  --state-selected-bg: var(--ngs-state-selected-bg);
+  --state-selected-color: var(--ngs-state-selected-color);
+  --state-focus-ring: var(--ngs-state-focus-ring);
+  --state-disabled-bg: var(--ngs-state-disabled-bg);
+  --state-disabled-color: var(--ngs-state-disabled-color);
+  --state-disabled-border: var(--ngs-state-disabled-border);
+
+  --btn-height: var(--ngs-button-height);
+  --btn-radius: var(--ngs-button-radius);
+  --btn-filled-bg: var(--ngs-button-filled-bg);
+  --btn-filled-text: var(--ngs-button-filled-color);
+  --btn-tonal-bg: var(--ngs-button-tonal-bg);
+  --btn-tonal-text: var(--ngs-button-tonal-color);
+  --btn-outlined-border: var(--ngs-button-outlined-border);
+  --btn-outlined-text: var(--ngs-button-outlined-color);
+  --btn-text-text: var(--ngs-button-text-color);
+
+  --input-color: var(--ngs-field-color);
+  --input-text: var(--ngs-field-text);
+  --input-caret: var(--ngs-field-caret-color);
+  --input-label-color: var(--ngs-field-label-color);
+  --input-label-float-font-size: var(--ngs-field-label-float-font-size);
+  --input-label-focus: var(--ngs-field-label-focus-color);
+  --input-error: var(--ngs-field-error-color);
+  --input-radius: var(--ngs-field-radius);
+  --input-border-color: var(--ngs-field-border-color);
+  --input-font-size: var(--ngs-field-font-size);
+  --input-border-width: var(--ngs-field-border-width);
+  --input-line-height: var(--ngs-field-line-height);
+  --input-padding-x: var(--ngs-field-padding-x);
+  --input-filled-bg: var(--ngs-field-filled-bg);
+  --input-filled-indicator: var(--ngs-field-filled-indicator);
+  --input-filled-indicator-focus: var(--ngs-field-filled-indicator-focus);
+  --input-outlined-border: var(--ngs-field-outlined-border);
+  --input-outlined-border-focus: var(--ngs-field-outlined-border-focus);
+
+  --nav-item-color: var(--ngs-nav-item-color);
+  --nav-item-hover-color: var(--ngs-nav-item-hover-color);
+  --nav-item-active-color: var(--ngs-nav-item-active-color);
+  --nav-item-hover-bg: var(--ngs-nav-item-hover-bg);
+  --nav-item-active-bg: var(--ngs-nav-item-active-bg);
+  --nav-item-icon-color: var(--ngs-nav-item-icon-color);
+  --nav-item-hover-icon-color: var(--ngs-nav-item-hover-icon-color);
+  --nav-item-active-icon-color: var(--ngs-nav-item-active-icon-color);
+  --nav-item-radius: var(--ngs-nav-item-radius);
+  --nav-item-font-size: var(--ngs-nav-item-font-size);
+
+  --dropdown-bg: var(--ngs-dropdown-bg);
+  --dropdown-shadow: var(--ngs-dropdown-shadow);
+  --dropdown-radius: var(--ngs-dropdown-radius);
+  --dropdown-border: var(--ngs-dropdown-border);
+  --dropdown-max-height: var(--ngs-dropdown-max-height);
+  --option-height: var(--ngs-option-height);
+  --overlay-backdrop-bg: var(--ngs-overlay-backdrop-bg);
+  --overlay-backdrop-blur: var(--ngs-overlay-backdrop-blur);
+  --icon-size: var(--ngs-icon-size);
+  --icon-color: var(--ngs-icon-color);
+  --font-size: var(--ngs-field-font-size);
+}