@rhavenside/baseline-ui 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/README.md +51 -0
  2. package/dist/baseline.css +144 -14
  3. package/dist/baseline.css.map +1 -1
  4. package/dist/baseline.js +193 -0
  5. package/dist/baseline.js.map +7 -0
  6. package/dist/baseline.min.css +1 -1
  7. package/dist/baseline.min.js +2 -0
  8. package/dist/baseline.min.js.map +7 -0
  9. package/package.json +14 -12
  10. package/src/components/_card.scss +6 -10
  11. package/src/components/_dropdown.scss +4 -1
  12. package/src/components/_form.scss +157 -6
  13. package/src/js/baseline.js +59 -0
  14. package/src/js/components/alert.js +25 -0
  15. package/src/js/components/dropdown.js +40 -0
  16. package/src/js/components/modal.js +67 -0
  17. package/src/js/components/tabs.js +49 -0
  18. package/src/js/components/tooltip.js +37 -0
  19. package/src/tokens/_z-index.scss +1 -1
package/dist/baseline.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["file:///Volumes/Main/Codes/Baseline/src/tokens/_colors.scss","file:///Volumes/Main/Codes/Baseline/src/tokens/_spacing.scss","file:///Volumes/Main/Codes/Baseline/src/tokens/_typography.scss","file:///Volumes/Main/Codes/Baseline/src/tokens/_borders.scss","file:///Volumes/Main/Codes/Baseline/src/tokens/_shadows.scss","file:///Volumes/Main/Codes/Baseline/src/tokens/_z-index.scss","file:///Volumes/Main/Codes/Baseline/src/tokens/_transitions.scss","file:///Volumes/Main/Codes/Baseline/src/tokens/_forms.scss","file:///Volumes/Main/Codes/Baseline/src/tokens/_glassmorphism.scss","file:///Volumes/Main/Codes/Baseline/src/base/_reset.scss","file:///Volumes/Main/Codes/Baseline/src/base/_normalize.scss","file:///Volumes/Main/Codes/Baseline/src/base/_base.scss","file:///Volumes/Main/Codes/Baseline/src/layout/_container.scss","file:///Volumes/Main/Codes/Baseline/src/layout/_grid.scss","file:///Volumes/Main/Codes/Baseline/src/layout/_grid-modern.scss","file:///Volumes/Main/Codes/Baseline/src/layout/_flex.scss","file:///Volumes/Main/Codes/Baseline/src/utilities/_spacing.scss","file:///Volumes/Main/Codes/Baseline/src/utilities/_display.scss","file:///Volumes/Main/Codes/Baseline/src/utilities/_text.scss","file:///Volumes/Main/Codes/Baseline/src/utilities/_visibility.scss","file:///Volumes/Main/Codes/Baseline/src/utilities/_position.scss","file:///Volumes/Main/Codes/Baseline/src/utilities/_animations.scss","file:///Volumes/Main/Codes/Baseline/src/utilities/_accessibility.scss","file:///Volumes/Main/Codes/Baseline/src/components/_button.scss","file:///Volumes/Main/Codes/Baseline/src/components/_form.scss","file:///Volumes/Main/Codes/Baseline/src/components/_card.scss","file:///Volumes/Main/Codes/Baseline/src/components/_alert.scss","file:///Volumes/Main/Codes/Baseline/src/components/_badge.scss","file:///Volumes/Main/Codes/Baseline/src/components/_modal.scss","file:///Volumes/Main/Codes/Baseline/src/components/_dropdown.scss","file:///Volumes/Main/Codes/Baseline/src/components/_nav.scss","file:///Volumes/Main/Codes/Baseline/src/components/_table.scss","file:///Volumes/Main/Codes/Baseline/src/components/_tooltip.scss","file:///Volumes/Main/Codes/Baseline/src/components/_progress.scss","file:///Volumes/Main/Codes/Baseline/src/components/_spinner.scss","file:///Volumes/Main/Codes/Baseline/src/icons/_icons.scss","file:///Volumes/Main/Codes/Baseline/src/themes/_dark.scss"],"names":[],"mappings":";AAsEA;EAEE;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;;;ACnHF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACkBF;EAEE;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;;AClEF;EAEE;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACpBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACNF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACAF;EAEE;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;;;ACkDF;EAEE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;;;ACxIF;EAEE;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;;;ACtDF;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AChBF;EACE;EACA;;;AAIF;EACE;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AChLF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;EAGE;EACA;;;AAIF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AC9KF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;AAIF;EAbF;IAcI;;;AAIF;EAlBF;IAmBI;;;AAIF;EAvBF;IAwBI;;;AAIF;EA5BF;IA6BI;;;;AAIJ;EACE;EACA;EACA;;;AClCF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAKA;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAMJ;EACE;IACE;IACA;IACA;;EAIA;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;;AAMN;EACE;IACE;IACA;IACA;;EAIA;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;;AAMN;EACE;IACE;IACA;IACA;;EAIA;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;;AAMN;EACE;IACE;IACA;IACA;;EAIA;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;;AAMN;EACE;IACE;IACA;IACA;;EAIA;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;;AC/GN;EACE;EACA;;;AAKA;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAMF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAKJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKA;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAMF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAKJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;ACtHF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;ACtJA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAOA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AC9EN;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;IAAgB;;EAChB;IAAkB;;EAClB;IAAwB;;EACxB;IAAiB;;EACjB;IAAgB;;EAChB;IAAuB;;EACvB;IAAgB;;;AAGlB;EACE;IAAgB;;EAChB;IAAkB;;EAClB;IAAwB;;EACxB;IAAiB;;EACjB;IAAgB;;EAChB;IAAuB;;EACvB;IAAgB;;;AAGlB;EACE;IAAgB;;EAChB;IAAkB;;EAClB;IAAwB;;EACxB;IAAiB;;EACjB;IAAgB;;EAChB;IAAuB;;EACvB;IAAgB;;;AAGlB;EACE;IAAgB;;EAChB;IAAkB;;EAClB;IAAwB;;EACxB;IAAiB;;EACjB;IAAgB;;EAChB;IAAuB;;EACvB;IAAgB;;;AC/ElB;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;ACxPF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;ACnEF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AC/FF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAIF;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;;;AAIF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;;;ACzKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;;;AAIF;EACE;IACE;;EAGF;IACE;;;AAKJ;EACE;AAAA;AAAA;IAGE;IACA;IACA;IACA;;;AClEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;EACA;EACA;;;AAKJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAKJ;EACE;EACA;;;AC/LF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAIF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAKJ;AAAA;AAAA;EAGE;;AAEA;AAAA;AAAA;EACE;EACA;EACA;;;AAIJ;AAAA;AAAA;EAGE;;AAEA;AAAA;AAAA;EACE;EACA;EACA;;;AAKJ;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAIF;AAAA;EAEE;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;;;AAKJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAKJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;EACA;;;AC1TN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAIF;EACE;;AAEA;EACE;;;AAIJ;EACE;;AAEA;EACE;;;AAKJ;EACE;;;AAGF;EACE;;;AAIF;EACE;;AAEA;EACE;EACA;;;ACrFJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAIF;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAKJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;;ACxFJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKA;EACE;EACA;;;AAKF;EACE;EACA;;;AAKF;EACE;EACA;;;AAKF;EACE;EACA;;;AAKF;EACE;EACA;;;AAKF;EACE;EACA;;;AAKJ;EACE;;AAEA;AAAA;EAEE;;;AAIJ;EACE;;AAEA;AAAA;EAEE;;;AChGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;IACA;;;AAGF;EAXF;IAYI;;;AAGF;EAfF;IAgBI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAMF;EADF;IAEI;;;;AAKF;EADF;IAEI;;;;AAKF;EADF;IAEI;;;;AAMF;EACE;EACA;EACA;;;ACpJJ;EACE;EACA;;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EAEE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACtGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAKJ;EACE;;AAEA;EACE;;;AAKJ;EACE;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAOJ;EACE;;AAEA;EACE;EACA;EACA;;;AAMN;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AC1MJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKA;EACE;EACA;EACA;;;AAIJ;EACE;;AAEA;EACE;;AAEA;EACE;EACA;;;AAMJ;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;;;AAMF;EACE;;;AAKF;EACE;;;AAKJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;IACE;IACA;IACA;IACA;;EAEA;IACE;;;AAKN;EACE;IACE;IACA;IACA;IACA;;EAEA;IACE;;;AAKN;EACE;IACE;IACA;IACA;IACA;;EAEA;IACE;;;AAKN;EACE;IACE;IACA;IACA;IACA;;EAEA;IACE;;;AC5KN;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAMF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC5HN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;ACtDF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;;EAEF;IACE;IACA;;;AAKJ;EACE;;AAEA;EACE;;;AAIJ;EACE;;AAEA;EACE;;;AAIJ;EACE;;AAEA;EACE;;;AAIJ;EACE;;AAEA;EACE;;;AAIJ;EACE;;AAEA;EACE;;;AAIJ;EACE;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AC3GF;EACE;EACA;EAEA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKF;EAAwB;;;AACxB;EAAwB;;;AACxB;EAA0B;;;AAC1B;EAAwB;;;AACxB;EAAyB;;;AACzB;EAAgC;;;AAChC;EAAiC;;;AACjC;EAA8B;;;AAC9B;EAAgC;;;AAChC;EAA8B;;;AAC9B;EAA+B;;;AAC/B;EAA4B;;;AAC5B;EAA8B;;;AAC9B;EAAyB;;;AACzB;EAAyB;;;AACzB;EAAwB;;;AACxB;EAAyB;;;AACzB;EAAwB;;;AACxB;EAA2B;;;AAC3B;EAAyB;;;AACzB;EAA2B;;;AAC3B;EAAyB;;;AACzB;EAAwB;;;AACxB;EAA4B;;;AAC5B;EAAyB;;;AACzB;EAA4B;;;AAC5B;EAA0B;;;AAC1B;EAAwB;;;AACxB;EAA0B;;;AAC1B;EAA4B;;;AAC5B;EAAwB;;;AACxB;EAAwB;;;AACxB;EAAyB;;;AACzB;EAA4B;;;AAC5B;EAAyB;;;AACzB;EAAyB;;;AACzB;EAAyB;;;AACzB;EAAwB;;;AACxB;EAA0B;;;AAC1B;EAAwB;;;AACxB;EAA0B;;;AAC1B;EAAuB;;;AACvB;EAA2B;;;AAC3B;EAA0B;;;AAC1B;EAAwB;;;AACxB;EAAwB;;;AACxB;EAAwB;;;AACxB;EAA2B;;;AAC3B;EAA2B;;;AAC3B;EAAwB;;;AACxB;EAAyB;;;AACzB;EAAwB;;;AACxB;EAAwB;;;AACxB;EAAwB;;;AACxB;EAA0B;;;AAC1B;EAA8B;;;AAC9B;EAA8B;;;AAC9B;EAAmC;;;AACnC;EAAwB;;;AACxB;EAA4B;;;AAC5B;EAAwB;;;AACxB;EAAuB;;;AACvB;EAAyB;;;AACzB;EAAwB;;;AACxB;EAAwB;;;AACxB;EAAwB;;;AACxB;EAAyB;;;AACzB;EAA2B;;;AAC3B;EAA4B;;;AAC5B;EAA4B;;;AAC5B;EAA4B;;;AAG5B;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AC/IF;EACE;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAGA;IACA;IACA;IACA;IAGA;IACA;IACA;IAGA;IACA;IACA;IACA;;;AAKJ;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA","sourcesContent":["// ============================================================================\n// Color Tokens (Technical Glass Design)\n// ============================================================================\n\n// Base Tone: Dark Graphite\n$color-base: #1A1A1A;\n$color-base-light: #2A2A2A;\n$color-base-dark: #0F0F0F;\n\n// Accent: Ice Blue\n$color-accent: #4A9EFF;\n$color-accent-light: #6BB0FF;\n$color-accent-dark: #3A8EEF;\n\n// Neutral Grayscale (for glass effects)\n$color-gray-50: #f9fafb;\n$color-gray-100: #f3f4f6;\n$color-gray-200: #e5e7eb;\n$color-gray-300: #d1d5db;\n$color-gray-400: #9ca3af;\n$color-gray-500: #6b7280;\n$color-gray-600: #4b5563;\n$color-gray-700: #374151;\n$color-gray-800: #1f2937;\n$color-gray-900: #111827;\n$color-gray-950: #030712;\n\n// Semantic Colors (using accent for primary)\n$color-primary: $color-accent;\n$color-primary-light: $color-accent-light;\n$color-primary-dark: $color-accent-dark;\n\n$color-secondary: $color-gray-600;\n$color-secondary-light: $color-gray-500;\n$color-secondary-dark: $color-gray-700;\n\n$color-success: #10b981;\n$color-success-light: #34d399;\n$color-success-dark: #059669;\n\n$color-warning: #f59e0b;\n$color-warning-light: #fbbf24;\n$color-warning-dark: #d97706;\n\n$color-error: #ef4444;\n$color-error-light: #f87171;\n$color-error-dark: #dc2626;\n\n$color-info: $color-accent;\n$color-info-light: $color-accent-light;\n$color-info-dark: $color-accent-dark;\n\n// Text Colors (high contrast on dark ground)\n$color-text: #ffffff;\n$color-text-muted: rgba(255, 255, 255, 0.7);\n$color-text-light: rgba(255, 255, 255, 0.5);\n$color-text-inverse: #1A1A1A;\n\n// Background Colors\n$color-bg: $color-base;\n$color-bg-alt: $color-base-light;\n$color-bg-overlay: rgba(0, 0, 0, 0.3); // Desaturated, not darkened\n\n// Border Colors (cool, slightly bright on dark ground)\n$color-border: rgba(255, 255, 255, 0.15);\n$color-border-light: rgba(255, 255, 255, 0.1);\n$color-border-dark: rgba(255, 255, 255, 0.2);\n$color-border-focus: $color-accent;\n\n// Export as CSS Custom Properties\n:root {\n // Base Tone\n --color-base: #{$color-base};\n --color-base-light: #{$color-base-light};\n --color-base-dark: #{$color-base-dark};\n\n // Accent\n --color-accent: #{$color-accent};\n --color-accent-light: #{$color-accent-light};\n --color-accent-dark: #{$color-accent-dark};\n\n // Neutral Grayscale\n --color-gray-50: #{$color-gray-50};\n --color-gray-100: #{$color-gray-100};\n --color-gray-200: #{$color-gray-200};\n --color-gray-300: #{$color-gray-300};\n --color-gray-400: #{$color-gray-400};\n --color-gray-500: #{$color-gray-500};\n --color-gray-600: #{$color-gray-600};\n --color-gray-700: #{$color-gray-700};\n --color-gray-800: #{$color-gray-800};\n --color-gray-900: #{$color-gray-900};\n --color-gray-950: #{$color-gray-950};\n\n // Semantic Colors\n --color-primary: #{$color-primary};\n --color-primary-light: #{$color-primary-light};\n --color-primary-dark: #{$color-primary-dark};\n\n --color-secondary: #{$color-secondary};\n --color-secondary-light: #{$color-secondary-light};\n --color-secondary-dark: #{$color-secondary-dark};\n\n --color-success: #{$color-success};\n --color-success-light: #{$color-success-light};\n --color-success-dark: #{$color-success-dark};\n\n --color-warning: #{$color-warning};\n --color-warning-light: #{$color-warning-light};\n --color-warning-dark: #{$color-warning-dark};\n\n --color-error: #{$color-error};\n --color-error-light: #{$color-error-light};\n --color-error-dark: #{$color-error-dark};\n\n --color-info: #{$color-info};\n --color-info-light: #{$color-info-light};\n --color-info-dark: #{$color-info-dark};\n\n // Text Colors\n --color-text: #{$color-text};\n --color-text-muted: #{$color-text-muted};\n --color-text-light: #{$color-text-light};\n --color-text-inverse: #{$color-text-inverse};\n\n // Background Colors\n --color-bg: #{$color-bg};\n --color-bg-alt: #{$color-bg-alt};\n --color-bg-overlay: #{$color-bg-overlay};\n\n // Border Colors\n --color-border: #{$color-border};\n --color-border-light: #{$color-border-light};\n --color-border-dark: #{$color-border-dark};\n --color-border-focus: #{$color-border-focus};\n}\n","// ============================================================================\n// Spacing Tokens\n// ============================================================================\n\n// Base spacing unit: 4px (0.25rem)\n$spacing-base: 0.25rem; // 4px\n\n// Spacing scale (8px base system)\n$spacing-xs: 0.25rem; // 4px\n$spacing-sm: 0.5rem; // 8px\n$spacing-md: 1rem; // 16px\n$spacing-lg: 1.5rem; // 24px\n$spacing-xl: 2rem; // 32px\n$spacing-2xl: 3rem; // 48px\n$spacing-3xl: 4rem; // 64px\n$spacing-4xl: 6rem; // 96px\n$spacing-5xl: 8rem; // 128px\n\n// Export as CSS Custom Properties\n:root {\n --spacing-xs: #{$spacing-xs};\n --spacing-sm: #{$spacing-sm};\n --spacing-md: #{$spacing-md};\n --spacing-lg: #{$spacing-lg};\n --spacing-xl: #{$spacing-xl};\n --spacing-2xl: #{$spacing-2xl};\n --spacing-3xl: #{$spacing-3xl};\n --spacing-4xl: #{$spacing-4xl};\n --spacing-5xl: #{$spacing-5xl};\n}\n\n","// ============================================================================\n// Typography Tokens\n// ============================================================================\n\n// Font Families\n$font-family-base: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n$font-family-mono: \"SF Mono\", Monaco, \"Cascadia Code\", \"Roboto Mono\", Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n$font-family-serif: Georgia, \"Times New Roman\", Times, serif;\n\n// Font Sizes (Modular Scale: 1.125, 1.25, 1.5, 1.875, 2.25)\n$font-size-xs: 0.75rem; // 12px\n$font-size-sm: 0.875rem; // 14px\n$font-size-base: 1rem; // 16px\n$font-size-lg: 1.125rem; // 18px\n$font-size-xl: 1.25rem; // 20px\n$font-size-2xl: 1.5rem; // 24px\n$font-size-3xl: 1.875rem; // 30px\n$font-size-4xl: 2.25rem; // 36px\n$font-size-5xl: 3rem; // 48px\n$font-size-6xl: 3.75rem; // 60px\n\n// Line Heights\n$line-height-none: 1;\n$line-height-tight: 1.25;\n$line-height-snug: 1.375;\n$line-height-base: 1.5;\n$line-height-relaxed: 1.75;\n$line-height-loose: 2;\n\n// Font Weights\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extrabold: 800;\n\n// Letter Spacing\n$letter-spacing-tighter: -0.05em;\n$letter-spacing-tight: -0.025em;\n$letter-spacing-normal: 0;\n$letter-spacing-wide: 0.025em;\n$letter-spacing-wider: 0.05em;\n$letter-spacing-widest: 0.1em;\n\n// Export as CSS Custom Properties\n:root {\n // Font Families\n --font-family-base: #{$font-family-base};\n --font-family-mono: #{$font-family-mono};\n --font-family-serif: #{$font-family-serif};\n\n // Font Sizes\n --font-size-xs: #{$font-size-xs};\n --font-size-sm: #{$font-size-sm};\n --font-size-base: #{$font-size-base};\n --font-size-lg: #{$font-size-lg};\n --font-size-xl: #{$font-size-xl};\n --font-size-2xl: #{$font-size-2xl};\n --font-size-3xl: #{$font-size-3xl};\n --font-size-4xl: #{$font-size-4xl};\n --font-size-5xl: #{$font-size-5xl};\n --font-size-6xl: #{$font-size-6xl};\n\n // Line Heights\n --line-height-none: #{$line-height-none};\n --line-height-tight: #{$line-height-tight};\n --line-height-snug: #{$line-height-snug};\n --line-height-base: #{$line-height-base};\n --line-height-relaxed: #{$line-height-relaxed};\n --line-height-loose: #{$line-height-loose};\n\n // Font Weights\n --font-weight-light: #{$font-weight-light};\n --font-weight-normal: #{$font-weight-normal};\n --font-weight-medium: #{$font-weight-medium};\n --font-weight-semibold: #{$font-weight-semibold};\n --font-weight-bold: #{$font-weight-bold};\n --font-weight-extrabold: #{$font-weight-extrabold};\n\n // Letter Spacing\n --letter-spacing-tighter: #{$letter-spacing-tighter};\n --letter-spacing-tight: #{$letter-spacing-tight};\n --letter-spacing-normal: #{$letter-spacing-normal};\n --letter-spacing-wide: #{$letter-spacing-wide};\n --letter-spacing-wider: #{$letter-spacing-wider};\n --letter-spacing-widest: #{$letter-spacing-widest};\n}\n\n","// ============================================================================\n// Border Tokens (Technical Design - Max 4px Radius)\n// ============================================================================\n\n// Border Widths\n$border-width-none: 0;\n$border-width-thin: 1px;\n$border-width-base: 2px;\n$border-width-thick: 4px;\n\n// Border Radius (Technical - Max 4px)\n$border-radius-none: 0;\n$border-radius-sm: 2px;\n$border-radius-md: 4px;\n$border-radius-lg: 4px; // Max 4px\n$border-radius-xl: 4px; // Max 4px\n$border-radius-2xl: 4px; // Max 4px\n$border-radius-full: 9999px; // Keep for special cases like switches\n\n// Export as CSS Custom Properties\n:root {\n // Border Widths\n --border-width-none: #{$border-width-none};\n --border-width-thin: #{$border-width-thin};\n --border-width-base: #{$border-width-base};\n --border-width-thick: #{$border-width-thick};\n\n // Border Radius (Technical)\n --border-radius-none: #{$border-radius-none};\n --border-radius-sm: #{$border-radius-sm};\n --border-radius-md: #{$border-radius-md};\n --border-radius-lg: #{$border-radius-lg};\n --border-radius-xl: #{$border-radius-xl};\n --border-radius-2xl: #{$border-radius-2xl};\n --border-radius-full: #{$border-radius-full};\n}\n","// ============================================================================\n// Shadow Tokens (Elevation System)\n// ============================================================================\n\n// Box Shadows\n$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n$shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);\n$shadow-none: none;\n\n// Export as CSS Custom Properties\n:root {\n --shadow-sm: #{$shadow-sm};\n --shadow-md: #{$shadow-md};\n --shadow-lg: #{$shadow-lg};\n --shadow-xl: #{$shadow-xl};\n --shadow-2xl: #{$shadow-2xl};\n --shadow-inner: #{$shadow-inner};\n --shadow-none: #{$shadow-none};\n}\n\n","// ============================================================================\n// Z-Index Tokens (Layer System)\n// ============================================================================\n\n// Z-Index Layers\n$z-index-base: 0;\n$z-index-dropdown: 1000;\n$z-index-sticky: 1020;\n$z-index-fixed: 1030;\n$z-index-modal-backdrop: 1040;\n$z-index-modal: 1050;\n$z-index-popover: 1060;\n$z-index-tooltip: 1070;\n\n// Export as CSS Custom Properties\n:root {\n --z-index-base: #{$z-index-base};\n --z-index-dropdown: #{$z-index-dropdown};\n --z-index-sticky: #{$z-index-sticky};\n --z-index-fixed: #{$z-index-fixed};\n --z-index-modal-backdrop: #{$z-index-modal-backdrop};\n --z-index-modal: #{$z-index-modal};\n --z-index-popover: #{$z-index-popover};\n --z-index-tooltip: #{$z-index-tooltip};\n}\n\n","// ============================================================================\n// Transition Tokens (Mechanical, Linear)\n// ============================================================================\n\n// Transition Durations (shorter, mechanical)\n$transition-duration-fast: 100ms;\n$transition-duration-base: 150ms;\n$transition-duration-slow: 200ms;\n$transition-duration-slower: 300ms;\n\n// Transition Timing Functions (all linear - mechanical)\n$transition-ease-linear: linear;\n$transition-ease-in: linear;\n$transition-ease-out: linear;\n$transition-ease-in-out: linear;\n\n// Common Transitions (all linear)\n$transition-base: all $transition-duration-base $transition-ease-linear;\n$transition-colors: color $transition-duration-base $transition-ease-linear, background-color $transition-duration-base $transition-ease-linear, border-color $transition-duration-base $transition-ease-linear;\n$transition-opacity: opacity $transition-duration-base $transition-ease-linear;\n$transition-transform: transform $transition-duration-base $transition-ease-linear;\n\n// Export as CSS Custom Properties\n:root {\n // Durations\n --transition-duration-fast: #{$transition-duration-fast};\n --transition-duration-base: #{$transition-duration-base};\n --transition-duration-slow: #{$transition-duration-slow};\n --transition-duration-slower: #{$transition-duration-slower};\n\n // Timing Functions (all linear)\n --transition-ease-linear: #{$transition-ease-linear};\n --transition-ease-in: #{$transition-ease-in};\n --transition-ease-out: #{$transition-ease-out};\n --transition-ease-in-out: #{$transition-ease-in-out};\n\n // Common Transitions\n --transition-base: #{$transition-base};\n --transition-colors: #{$transition-colors};\n --transition-opacity: #{$transition-opacity};\n --transition-transform: #{$transition-transform};\n}\n","// ============================================================================\n// Form Tokens\n// ============================================================================\n\n@use 'spacing' as *;\n@use 'colors' as *;\n@use 'typography' as *;\n@use 'borders' as *;\n@use 'transitions' as *;\n\n// Form Input Tokens\n$form-input-padding-x: $spacing-md;\n$form-input-padding-y: $spacing-sm;\n$form-input-padding-x-sm: $spacing-sm;\n$form-input-padding-y-sm: $spacing-xs;\n$form-input-padding-x-lg: $spacing-lg;\n$form-input-padding-y-lg: $spacing-md;\n\n$form-input-border-width: $border-width-thin;\n$form-input-border-radius: $border-radius-md;\n$form-input-font-size: $font-size-base;\n$form-input-font-size-sm: $font-size-sm;\n$form-input-font-size-lg: $font-size-lg;\n$form-input-line-height: $line-height-base;\n\n$form-input-bg: $color-bg;\n$form-input-bg-disabled: $color-bg-alt;\n$form-input-color: $color-text;\n$form-input-border: $color-border;\n$form-input-border-focus: $color-border-focus;\n$form-input-placeholder-color: $color-text-muted;\n\n$form-input-focus-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);\n$form-input-focus-shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.1);\n$form-input-focus-shadow-success: 0 0 0 3px rgba(16, 185, 129, 0.1);\n\n$form-input-opacity-disabled: 0.6;\n\n// Form Label Tokens\n$form-label-font-size: $font-size-sm;\n$form-label-font-weight: $font-weight-medium;\n$form-label-color: $color-text;\n$form-label-margin-bottom: $spacing-xs;\n\n// Form Helper/Error Tokens\n$form-helper-font-size: $font-size-xs;\n$form-helper-color: $color-text-muted;\n$form-error-color: $color-error;\n$form-error-font-size: $font-size-xs;\n$form-helper-margin-top: $spacing-xs;\n\n// Form Group Tokens\n$form-group-margin-bottom: $spacing-md;\n\n// Checkbox & Radio Tokens\n$form-checkbox-size: 1.25rem;\n$form-checkbox-margin-right: $spacing-sm;\n$form-checkbox-accent-color: $color-primary;\n$form-checkbox-opacity-disabled: 0.6;\n\n// Switch Tokens\n$form-switch-width: 3rem;\n$form-switch-height: 1.5rem;\n$form-switch-slider-size: 1.25rem;\n$form-switch-slider-offset: 0.125rem;\n$form-switch-slider-translate: 1.5rem;\n$form-switch-bg: $color-gray-300;\n$form-switch-bg-active: $color-primary;\n$form-switch-slider-bg: #ffffff;\n$form-switch-focus-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);\n$form-switch-opacity-disabled: 0.6;\n\n// Textarea Tokens\n$form-textarea-min-height: 100px;\n$form-textarea-resize: vertical;\n\n// Range Tokens\n$form-range-height: 0.5rem;\n$form-range-thumb-size: 1.25rem;\n$form-range-bg: $color-gray-200;\n$form-range-thumb-bg: $color-primary;\n\n// File Input Tokens\n$form-file-input-padding: $spacing-sm;\n$form-file-input-font-size: $font-size-sm;\n$form-file-input-border-style: dashed;\n$form-file-input-bg: $color-bg-alt;\n$form-file-input-bg-hover: $color-bg;\n\n// Export as CSS Custom Properties\n:root {\n // Form Input\n --form-input-padding-x: #{$form-input-padding-x};\n --form-input-padding-y: #{$form-input-padding-y};\n --form-input-padding-x-sm: #{$form-input-padding-x-sm};\n --form-input-padding-y-sm: #{$form-input-padding-y-sm};\n --form-input-padding-x-lg: #{$form-input-padding-x-lg};\n --form-input-padding-y-lg: #{$form-input-padding-y-lg};\n\n --form-input-border-width: #{$form-input-border-width};\n --form-input-border-radius: #{$form-input-border-radius};\n --form-input-font-size: #{$form-input-font-size};\n --form-input-font-size-sm: #{$form-input-font-size-sm};\n --form-input-font-size-lg: #{$form-input-font-size-lg};\n --form-input-line-height: #{$form-input-line-height};\n\n --form-input-bg: #{$form-input-bg};\n --form-input-bg-disabled: #{$form-input-bg-disabled};\n --form-input-color: #{$form-input-color};\n --form-input-border: #{$form-input-border};\n --form-input-border-focus: #{$form-input-border-focus};\n --form-input-placeholder-color: #{$form-input-placeholder-color};\n\n --form-input-focus-shadow: #{$form-input-focus-shadow};\n --form-input-focus-shadow-error: #{$form-input-focus-shadow-error};\n --form-input-focus-shadow-success: #{$form-input-focus-shadow-success};\n\n --form-input-opacity-disabled: #{$form-input-opacity-disabled};\n\n // Form Label\n --form-label-font-size: #{$form-label-font-size};\n --form-label-font-weight: #{$form-label-font-weight};\n --form-label-color: #{$form-label-color};\n --form-label-margin-bottom: #{$form-label-margin-bottom};\n\n // Form Helper/Error\n --form-helper-font-size: #{$form-helper-font-size};\n --form-helper-color: #{$form-helper-color};\n --form-error-color: #{$form-error-color};\n --form-error-font-size: #{$form-error-font-size};\n --form-helper-margin-top: #{$form-helper-margin-top};\n\n // Form Group\n --form-group-margin-bottom: #{$form-group-margin-bottom};\n\n // Checkbox & Radio\n --form-checkbox-size: #{$form-checkbox-size};\n --form-checkbox-margin-right: #{$form-checkbox-margin-right};\n --form-checkbox-accent-color: #{$form-checkbox-accent-color};\n --form-checkbox-opacity-disabled: #{$form-checkbox-opacity-disabled};\n\n // Switch\n --form-switch-width: #{$form-switch-width};\n --form-switch-height: #{$form-switch-height};\n --form-switch-slider-size: #{$form-switch-slider-size};\n --form-switch-slider-offset: #{$form-switch-slider-offset};\n --form-switch-slider-translate: #{$form-switch-slider-translate};\n --form-switch-bg: #{$form-switch-bg};\n --form-switch-bg-active: #{$form-switch-bg-active};\n --form-switch-slider-bg: #{$form-switch-slider-bg};\n --form-switch-focus-shadow: #{$form-switch-focus-shadow};\n --form-switch-opacity-disabled: #{$form-switch-opacity-disabled};\n\n // Textarea\n --form-textarea-min-height: #{$form-textarea-min-height};\n --form-textarea-resize: #{$form-textarea-resize};\n\n // Range\n --form-range-height: #{$form-range-height};\n --form-range-thumb-size: #{$form-range-thumb-size};\n --form-range-bg: #{$form-range-bg};\n --form-range-thumb-bg: #{$form-range-thumb-bg};\n\n // File Input\n --form-file-input-padding: #{$form-file-input-padding};\n --form-file-input-font-size: #{$form-file-input-font-size};\n --form-file-input-border-style: #{$form-file-input-border-style};\n --form-file-input-bg: #{$form-file-input-bg};\n --form-file-input-bg-hover: #{$form-file-input-bg-hover};\n}\n","// ============================================================================\n// Glassmorphism Tokens (Technical Glass Design)\n// ============================================================================\n\n// Glass Background Colors (milky, desaturated)\n$glass-bg-light: rgba(255, 255, 255, 0.05);\n$glass-bg-medium: rgba(255, 255, 255, 0.08);\n$glass-bg-heavy: rgba(255, 255, 255, 0.12);\n$glass-bg-etched: rgba(255, 255, 255, 0.15); // For table headers (etched glass)\n\n// Backdrop Blur (subtle, reduced)\n$glass-blur-sm: 2px;\n$glass-blur-md: 4px;\n$glass-blur-lg: 6px;\n$glass-blur-xl: 8px;\n\n// Glass Borders (cool, slightly bright on dark ground)\n$glass-border-light: rgba(255, 255, 255, 0.1);\n$glass-border-medium: rgba(255, 255, 255, 0.15);\n$glass-border-heavy: rgba(255, 255, 255, 0.2);\n\n// Glass Shadows (subtle gray, no colorful glows)\n$glass-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);\n$glass-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.15);\n$glass-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.2);\n\n// Technical Border Radius (max 4px)\n$tech-border-radius-none: 0;\n$tech-border-radius-sm: 2px;\n$tech-border-radius-md: 4px;\n\n// Export as CSS Custom Properties\n:root {\n // Glass Backgrounds\n --glass-bg-light: #{$glass-bg-light};\n --glass-bg-medium: #{$glass-bg-medium};\n --glass-bg-heavy: #{$glass-bg-heavy};\n --glass-bg-etched: #{$glass-bg-etched};\n\n // Backdrop Blur\n --glass-blur-sm: #{$glass-blur-sm};\n --glass-blur-md: #{$glass-blur-md};\n --glass-blur-lg: #{$glass-blur-lg};\n --glass-blur-xl: #{$glass-blur-xl};\n\n // Glass Borders\n --glass-border-light: #{$glass-border-light};\n --glass-border-medium: #{$glass-border-medium};\n --glass-border-heavy: #{$glass-border-heavy};\n\n // Glass Shadows\n --glass-shadow-sm: #{$glass-shadow-sm};\n --glass-shadow-md: #{$glass-shadow-md};\n --glass-shadow-lg: #{$glass-shadow-lg};\n\n // Technical Border Radius\n --tech-border-radius-none: #{$tech-border-radius-none};\n --tech-border-radius-sm: #{$tech-border-radius-sm};\n --tech-border-radius-md: #{$tech-border-radius-md};\n}\n","// ============================================================================\n// CSS Reset\n// ============================================================================\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nhtml {\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n}\n\nbody {\n margin: 0;\n padding: 0;\n}\n\n","// ============================================================================\n// Normalize.css-inspired Browser Normalization\n// ============================================================================\n\n// Document\nhtml {\n line-height: 1.15;\n -webkit-text-size-adjust: 100%;\n}\n\n// Sections\nbody {\n margin: 0;\n}\n\n// Grouping content\nhr {\n box-sizing: content-box;\n height: 0;\n overflow: visible;\n}\n\npre {\n font-family: monospace, monospace;\n font-size: 1em;\n}\n\n// Text-level semantics\nabbr[title] {\n border-bottom: none;\n text-decoration: underline;\n text-decoration: underline dotted;\n}\n\nb,\nstrong {\n font-weight: bolder;\n}\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace;\n font-size: 1em;\n}\n\nsmall {\n font-size: 80%;\n}\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n// Embedded content\nimg {\n border-style: none;\n max-width: 100%;\n height: auto;\n display: block;\n}\n\nsvg:not(:root) {\n overflow: hidden;\n}\n\n// Forms\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n font-size: 100%;\n line-height: 1.15;\n margin: 0;\n}\n\nbutton,\ninput {\n overflow: visible;\n}\n\nbutton,\nselect {\n text-transform: none;\n}\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\nlegend {\n box-sizing: border-box;\n color: inherit;\n display: table;\n max-width: 100%;\n padding: 0;\n white-space: normal;\n}\n\nprogress {\n vertical-align: baseline;\n}\n\ntextarea {\n overflow: auto;\n}\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box;\n padding: 0;\n}\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n[type=\"search\"] {\n -webkit-appearance: textfield;\n outline-offset: -2px;\n}\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n font: inherit;\n}\n\n// Interactive\ndetails {\n display: block;\n}\n\nsummary {\n display: list-item;\n}\n\n// Misc\ntemplate {\n display: none;\n}\n\n[hidden] {\n display: none;\n}\n\n","// ============================================================================\n// Base Styles (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n// Root Element\n:root {\n font-size: 16px; // Base font size for rem calculations\n}\n\n// Body (Dark Graphite, Desaturated)\nbody {\n font-family: var(--font-family-base);\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n color: var(--color-text);\n background-color: var(--color-bg);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n min-height: 100vh;\n}\n\n// Headings (High Contrast)\nh1, h2, h3, h4, h5, h6 {\n margin: 0;\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-text);\n}\n\nh1 {\n font-size: var(--font-size-4xl);\n}\n\nh2 {\n font-size: var(--font-size-3xl);\n}\n\nh3 {\n font-size: var(--font-size-2xl);\n}\n\nh4 {\n font-size: var(--font-size-xl);\n}\n\nh5 {\n font-size: var(--font-size-lg);\n}\n\nh6 {\n font-size: var(--font-size-base);\n}\n\n// Paragraphs\np {\n margin: 0;\n line-height: var(--line-height-base);\n color: var(--color-text);\n}\n\n// Links\na {\n color: var(--color-accent);\n text-decoration: none;\n transition: var(--transition-colors);\n\n &:hover {\n color: var(--color-accent-light);\n }\n\n &:focus {\n outline: 1px solid var(--color-border-focus);\n outline-offset: 2px;\n }\n}\n\n// Lists\nul, ol {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n// Images\nimg {\n max-width: 100%;\n height: auto;\n display: block;\n}\n\n// Horizontal Rule\nhr {\n border: 0;\n border-top: 1px solid var(--color-border);\n margin: var(--spacing-lg) 0;\n}\n\n// Code (Technical Style, Monospace)\ncode {\n font-family: var(--font-family-mono);\n font-size: 0.875em;\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n border: 1px solid var(--glass-border-light);\n padding: 0.125em 0.25em;\n border-radius: var(--tech-border-radius-sm);\n color: var(--color-text);\n}\n\npre {\n font-family: var(--font-family-mono);\n font-size: var(--font-size-sm);\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n border: 1px solid var(--glass-border-medium);\n padding: var(--spacing-md);\n border-radius: var(--tech-border-radius-md);\n overflow-x: auto;\n color: var(--color-text);\n\n code {\n background-color: transparent;\n padding: 0;\n border: none;\n }\n}\n\n// Blockquote\nblockquote {\n margin: 0;\n padding-left: var(--spacing-lg);\n border-left: var(--border-width-base) solid var(--color-border);\n color: var(--color-text-muted);\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n padding: var(--spacing-md);\n border-radius: var(--tech-border-radius-md);\n}\n\n// Tables (basic)\ntable {\n width: 100%;\n border-collapse: collapse;\n}\n\n// Buttons (reset)\nbutton {\n background: none;\n border: none;\n padding: 0;\n font: inherit;\n cursor: pointer;\n color: inherit;\n}\n\n// Inputs (reset)\ninput,\nselect,\ntextarea {\n font: inherit;\n color: inherit;\n}\n\n// Focus styles (accessibility)\n*:focus {\n outline: 1px solid var(--color-border-focus);\n outline-offset: 2px;\n}\n\n*:focus:not(:focus-visible) {\n outline: none;\n}\n\n*:focus-visible {\n outline: 1px solid var(--color-border-focus);\n outline-offset: 2px;\n}\n","// ============================================================================\n// Container\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-container {\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n\n // Small devices (landscape phones, 640px and up)\n @media (min-width: 640px) {\n max-width: 640px;\n }\n\n // Medium devices (tablets, 768px and up)\n @media (min-width: 768px) {\n max-width: 768px;\n }\n\n // Large devices (desktops, 1024px and up)\n @media (min-width: 1024px) {\n max-width: 1024px;\n }\n\n // Extra large devices (large desktops, 1280px and up)\n @media (min-width: 1280px) {\n max-width: 1280px;\n }\n\n // 2X Large devices (larger desktops, 1536px and up)\n @media (min-width: 1536px) {\n max-width: 1536px;\n }\n}\n\n.bl-container-fluid {\n width: 100%;\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n}\n\n","// ============================================================================\n// Flexbox 12-Column Grid System\n// ============================================================================\n\n@use 'sass:math';\n@use '../tokens/tokens' as *;\n\n// Row\n.bl-row {\n display: flex;\n flex-wrap: wrap;\n margin-left: calc(var(--spacing-md) * -1);\n margin-right: calc(var(--spacing-md) * -1);\n}\n\n// Column Base\n.bl-col {\n flex: 1 0 0%;\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n}\n\n// Column Sizes (1-12)\n@for $i from 1 through 12 {\n .bl-col-#{$i} {\n flex: 0 0 auto;\n width: math.percentage(math.div($i, 12));\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n}\n\n// Responsive Breakpoints\n// Small (sm: 640px)\n@media (min-width: 640px) {\n .bl-col-sm {\n flex: 1 0 0%;\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n\n @for $i from 1 through 12 {\n .bl-col-sm-#{$i} {\n flex: 0 0 auto;\n width: math.percentage(math.div($i, 12));\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n }\n}\n\n// Medium (md: 768px)\n@media (min-width: 768px) {\n .bl-col-md {\n flex: 1 0 0%;\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n\n @for $i from 1 through 12 {\n .bl-col-md-#{$i} {\n flex: 0 0 auto;\n width: math.percentage(math.div($i, 12));\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n }\n}\n\n// Large (lg: 1024px)\n@media (min-width: 1024px) {\n .bl-col-lg {\n flex: 1 0 0%;\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n\n @for $i from 1 through 12 {\n .bl-col-lg-#{$i} {\n flex: 0 0 auto;\n width: math.percentage(math.div($i, 12));\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n }\n}\n\n// Extra Large (xl: 1280px)\n@media (min-width: 1280px) {\n .bl-col-xl {\n flex: 1 0 0%;\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n\n @for $i from 1 through 12 {\n .bl-col-xl-#{$i} {\n flex: 0 0 auto;\n width: math.percentage(math.div($i, 12));\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n }\n}\n\n// 2X Large (2xl: 1536px)\n@media (min-width: 1536px) {\n .bl-col-2xl {\n flex: 1 0 0%;\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n\n @for $i from 1 through 12 {\n .bl-col-2xl-#{$i} {\n flex: 0 0 auto;\n width: math.percentage(math.div($i, 12));\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n }\n}\n\n","// ============================================================================\n// CSS Grid Utilities\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n// Base Grid\n.bl-grid {\n display: grid;\n gap: var(--spacing-md);\n}\n\n// Grid Columns (1-12)\n@for $i from 1 through 12 {\n .bl-grid-cols-#{$i} {\n grid-template-columns: repeat(#{$i}, minmax(0, 1fr));\n }\n}\n\n// Grid Rows (1-12)\n@for $i from 1 through 12 {\n .bl-grid-rows-#{$i} {\n grid-template-rows: repeat(#{$i}, minmax(0, 1fr));\n }\n}\n\n// Gap Utilities\n.bl-gap-xs {\n gap: var(--spacing-xs);\n}\n\n.bl-gap-sm {\n gap: var(--spacing-sm);\n}\n\n.bl-gap-md {\n gap: var(--spacing-md);\n}\n\n.bl-gap-lg {\n gap: var(--spacing-lg);\n}\n\n.bl-gap-xl {\n gap: var(--spacing-xl);\n}\n\n.bl-gap-2xl {\n gap: var(--spacing-2xl);\n}\n\n// Column Gap\n.bl-gap-x-xs {\n column-gap: var(--spacing-xs);\n}\n\n.bl-gap-x-sm {\n column-gap: var(--spacing-sm);\n}\n\n.bl-gap-x-md {\n column-gap: var(--spacing-md);\n}\n\n.bl-gap-x-lg {\n column-gap: var(--spacing-lg);\n}\n\n.bl-gap-x-xl {\n column-gap: var(--spacing-xl);\n}\n\n.bl-gap-x-2xl {\n column-gap: var(--spacing-2xl);\n}\n\n// Row Gap\n.bl-gap-y-xs {\n row-gap: var(--spacing-xs);\n}\n\n.bl-gap-y-sm {\n row-gap: var(--spacing-sm);\n}\n\n.bl-gap-y-md {\n row-gap: var(--spacing-md);\n}\n\n.bl-gap-y-lg {\n row-gap: var(--spacing-lg);\n}\n\n.bl-gap-y-xl {\n row-gap: var(--spacing-xl);\n}\n\n.bl-gap-y-2xl {\n row-gap: var(--spacing-2xl);\n}\n\n// Grid Column Span\n@for $i from 1 through 12 {\n .bl-col-span-#{$i} {\n grid-column: span #{$i} / span #{$i};\n }\n}\n\n// Grid Row Span\n@for $i from 1 through 12 {\n .bl-row-span-#{$i} {\n grid-row: span #{$i} / span #{$i};\n }\n}\n\n// Auto Flow\n.bl-grid-flow-row {\n grid-auto-flow: row;\n}\n\n.bl-grid-flow-col {\n grid-auto-flow: column;\n}\n\n.bl-grid-flow-dense {\n grid-auto-flow: dense;\n}\n\n","// ============================================================================\n// Flexbox Utilities\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n// Display\n.bl-flex {\n display: flex;\n}\n\n.bl-inline-flex {\n display: inline-flex;\n}\n\n// Direction\n.bl-flex-row {\n flex-direction: row;\n}\n\n.bl-flex-row-reverse {\n flex-direction: row-reverse;\n}\n\n.bl-flex-col {\n flex-direction: column;\n}\n\n.bl-flex-col-reverse {\n flex-direction: column-reverse;\n}\n\n// Wrap\n.bl-flex-wrap {\n flex-wrap: wrap;\n}\n\n.bl-flex-nowrap {\n flex-wrap: nowrap;\n}\n\n.bl-flex-wrap-reverse {\n flex-wrap: wrap-reverse;\n}\n\n// Justify Content\n.bl-justify-start {\n justify-content: flex-start;\n}\n\n.bl-justify-end {\n justify-content: flex-end;\n}\n\n.bl-justify-center {\n justify-content: center;\n}\n\n.bl-justify-between {\n justify-content: space-between;\n}\n\n.bl-justify-around {\n justify-content: space-around;\n}\n\n.bl-justify-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items\n.bl-items-start {\n align-items: flex-start;\n}\n\n.bl-items-end {\n align-items: flex-end;\n}\n\n.bl-items-center {\n align-items: center;\n}\n\n.bl-items-baseline {\n align-items: baseline;\n}\n\n.bl-items-stretch {\n align-items: stretch;\n}\n\n// Align Self\n.bl-self-auto {\n align-self: auto;\n}\n\n.bl-self-start {\n align-self: flex-start;\n}\n\n.bl-self-end {\n align-self: flex-end;\n}\n\n.bl-self-center {\n align-self: center;\n}\n\n.bl-self-stretch {\n align-self: stretch;\n}\n\n.bl-self-baseline {\n align-self: baseline;\n}\n\n// Align Content\n.bl-content-start {\n align-content: flex-start;\n}\n\n.bl-content-end {\n align-content: flex-end;\n}\n\n.bl-content-center {\n align-content: center;\n}\n\n.bl-content-between {\n align-content: space-between;\n}\n\n.bl-content-around {\n align-content: space-around;\n}\n\n.bl-content-stretch {\n align-content: stretch;\n}\n\n// Flex Grow/Shrink\n.bl-flex-1 {\n flex: 1 1 0%;\n}\n\n.bl-flex-auto {\n flex: 1 1 auto;\n}\n\n.bl-flex-initial {\n flex: 0 1 auto;\n}\n\n.bl-flex-none {\n flex: none;\n}\n\n.bl-grow {\n flex-grow: 1;\n}\n\n.bl-grow-0 {\n flex-grow: 0;\n}\n\n.bl-shrink {\n flex-shrink: 1;\n}\n\n.bl-shrink-0 {\n flex-shrink: 0;\n}\n\n","// ============================================================================\n// Spacing Utilities\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n// Spacing sizes\n$spacing-sizes: (\n 'xs': var(--spacing-xs),\n 'sm': var(--spacing-sm),\n 'md': var(--spacing-md),\n 'lg': var(--spacing-lg),\n 'xl': var(--spacing-xl),\n '2xl': var(--spacing-2xl),\n '3xl': var(--spacing-3xl),\n '0': 0,\n 'auto': auto\n);\n\n// Margin Utilities\n@each $name, $value in $spacing-sizes {\n .m-#{$name} {\n margin: #{$value};\n }\n\n .mt-#{$name} {\n margin-top: #{$value};\n }\n\n .mr-#{$name} {\n margin-right: #{$value};\n }\n\n .mb-#{$name} {\n margin-bottom: #{$value};\n }\n\n .ml-#{$name} {\n margin-left: #{$value};\n }\n\n .mx-#{$name} {\n margin-left: #{$value};\n margin-right: #{$value};\n }\n\n .my-#{$name} {\n margin-top: #{$value};\n margin-bottom: #{$value};\n }\n}\n\n// Padding Utilities\n@each $name, $value in $spacing-sizes {\n @if $name != 'auto' {\n .p-#{$name} {\n padding: #{$value};\n }\n\n .pt-#{$name} {\n padding-top: #{$value};\n }\n\n .pr-#{$name} {\n padding-right: #{$value};\n }\n\n .pb-#{$name} {\n padding-bottom: #{$value};\n }\n\n .pl-#{$name} {\n padding-left: #{$value};\n }\n\n .px-#{$name} {\n padding-left: #{$value};\n padding-right: #{$value};\n }\n\n .py-#{$name} {\n padding-top: #{$value};\n padding-bottom: #{$value};\n }\n }\n}\n\n","// ============================================================================\n// Display Utilities\n// ============================================================================\n\n.bl-d-none {\n display: none;\n}\n\n.bl-d-inline {\n display: inline;\n}\n\n.bl-d-inline-block {\n display: inline-block;\n}\n\n.bl-d-block {\n display: block;\n}\n\n.bl-d-table {\n display: table;\n}\n\n.bl-d-table-row {\n display: table-row;\n}\n\n.bl-d-table-cell {\n display: table-cell;\n}\n\n.bl-d-flex {\n display: flex;\n}\n\n.bl-d-inline-flex {\n display: inline-flex;\n}\n\n.bl-d-grid {\n display: grid;\n}\n\n.bl-d-inline-grid {\n display: inline-grid;\n}\n\n// Responsive Display Utilities\n@media (min-width: 640px) {\n .bl-d-sm-none { display: none; }\n .bl-d-sm-inline { display: inline; }\n .bl-d-sm-inline-block { display: inline-block; }\n .bl-d-sm-block { display: block; }\n .bl-d-sm-flex { display: flex; }\n .bl-d-sm-inline-flex { display: inline-flex; }\n .bl-d-sm-grid { display: grid; }\n}\n\n@media (min-width: 768px) {\n .bl-d-md-none { display: none; }\n .bl-d-md-inline { display: inline; }\n .bl-d-md-inline-block { display: inline-block; }\n .bl-d-md-block { display: block; }\n .bl-d-md-flex { display: flex; }\n .bl-d-md-inline-flex { display: inline-flex; }\n .bl-d-md-grid { display: grid; }\n}\n\n@media (min-width: 1024px) {\n .bl-d-lg-none { display: none; }\n .bl-d-lg-inline { display: inline; }\n .bl-d-lg-inline-block { display: inline-block; }\n .bl-d-lg-block { display: block; }\n .bl-d-lg-flex { display: flex; }\n .bl-d-lg-inline-flex { display: inline-flex; }\n .bl-d-lg-grid { display: grid; }\n}\n\n@media (min-width: 1280px) {\n .bl-d-xl-none { display: none; }\n .bl-d-xl-inline { display: inline; }\n .bl-d-xl-inline-block { display: inline-block; }\n .bl-d-xl-block { display: block; }\n .bl-d-xl-flex { display: flex; }\n .bl-d-xl-inline-flex { display: inline-flex; }\n .bl-d-xl-grid { display: grid; }\n}\n\n","// ============================================================================\n// Text Utilities\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n// Text Alignment\n.bl-text-left {\n text-align: left;\n}\n\n.bl-text-center {\n text-align: center;\n}\n\n.bl-text-right {\n text-align: right;\n}\n\n.bl-text-justify {\n text-align: justify;\n}\n\n// Text Size\n.bl-text-xs {\n font-size: var(--font-size-xs);\n}\n\n.bl-text-sm {\n font-size: var(--font-size-sm);\n}\n\n.bl-text-base {\n font-size: var(--font-size-base);\n}\n\n.bl-text-lg {\n font-size: var(--font-size-lg);\n}\n\n.bl-text-xl {\n font-size: var(--font-size-xl);\n}\n\n.bl-text-2xl {\n font-size: var(--font-size-2xl);\n}\n\n.bl-text-3xl {\n font-size: var(--font-size-3xl);\n}\n\n.bl-text-4xl {\n font-size: var(--font-size-4xl);\n}\n\n.bl-text-5xl {\n font-size: var(--font-size-5xl);\n}\n\n.bl-text-6xl {\n font-size: var(--font-size-6xl);\n}\n\n// Font Weight\n.bl-font-light {\n font-weight: var(--font-weight-light);\n}\n\n.bl-font-normal {\n font-weight: var(--font-weight-normal);\n}\n\n.bl-font-medium {\n font-weight: var(--font-weight-medium);\n}\n\n.bl-font-semibold {\n font-weight: var(--font-weight-semibold);\n}\n\n.bl-font-bold {\n font-weight: var(--font-weight-bold);\n}\n\n.bl-font-extrabold {\n font-weight: var(--font-weight-extrabold);\n}\n\n// Line Height\n.bl-leading-none {\n line-height: var(--line-height-none);\n}\n\n.bl-leading-tight {\n line-height: var(--line-height-tight);\n}\n\n.bl-leading-snug {\n line-height: var(--line-height-snug);\n}\n\n.bl-leading-base {\n line-height: var(--line-height-base);\n}\n\n.bl-leading-relaxed {\n line-height: var(--line-height-relaxed);\n}\n\n.bl-leading-loose {\n line-height: var(--line-height-loose);\n}\n\n// Text Transform\n.bl-uppercase {\n text-transform: uppercase;\n}\n\n.bl-lowercase {\n text-transform: lowercase;\n}\n\n.bl-capitalize {\n text-transform: capitalize;\n}\n\n.bl-normal-case {\n text-transform: none;\n}\n\n// Text Decoration\n.bl-underline {\n text-decoration: underline;\n}\n\n.bl-line-through {\n text-decoration: line-through;\n}\n\n.bl-no-underline {\n text-decoration: none;\n}\n\n// Letter Spacing\n.bl-tracking-tighter {\n letter-spacing: var(--letter-spacing-tighter);\n}\n\n.bl-tracking-tight {\n letter-spacing: var(--letter-spacing-tight);\n}\n\n.bl-tracking-normal {\n letter-spacing: var(--letter-spacing-normal);\n}\n\n.bl-tracking-wide {\n letter-spacing: var(--letter-spacing-wide);\n}\n\n.bl-tracking-wider {\n letter-spacing: var(--letter-spacing-wider);\n}\n\n.bl-tracking-widest {\n letter-spacing: var(--letter-spacing-widest);\n}\n\n// Text Color\n.bl-text-primary {\n color: var(--color-primary);\n}\n\n.bl-text-secondary {\n color: var(--color-secondary);\n}\n\n.bl-text-success {\n color: var(--color-success);\n}\n\n.bl-text-warning {\n color: var(--color-warning);\n}\n\n.bl-text-error {\n color: var(--color-error);\n}\n\n.bl-text-info {\n color: var(--color-info);\n}\n\n.bl-text-muted {\n color: var(--color-text-muted);\n}\n\n.bl-text-light {\n color: var(--color-text-light);\n}\n\n.bl-text-inverse {\n color: var(--color-text-inverse);\n}\n\n// Font Family\n.bl-font-sans {\n font-family: var(--font-family-base);\n}\n\n.bl-font-mono {\n font-family: var(--font-family-mono);\n}\n\n.bl-font-serif {\n font-family: var(--font-family-serif);\n}\n\n// Text Overflow\n.bl-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.bl-text-ellipsis {\n text-overflow: ellipsis;\n}\n\n.bl-text-clip {\n text-overflow: clip;\n}\n\n// White Space\n.bl-whitespace-normal {\n white-space: normal;\n}\n\n.bl-whitespace-nowrap {\n white-space: nowrap;\n}\n\n.bl-whitespace-pre {\n white-space: pre;\n}\n\n.bl-whitespace-pre-line {\n white-space: pre-line;\n}\n\n.bl-whitespace-pre-wrap {\n white-space: pre-wrap;\n}\n\n","// ============================================================================\n// Visibility Utilities\n// ============================================================================\n\n.bl-visible {\n visibility: visible;\n}\n\n.bl-invisible {\n visibility: hidden;\n}\n\n// Opacity\n.bl-opacity-0 {\n opacity: 0;\n}\n\n.bl-opacity-25 {\n opacity: 0.25;\n}\n\n.bl-opacity-50 {\n opacity: 0.5;\n}\n\n.bl-opacity-75 {\n opacity: 0.75;\n}\n\n.bl-opacity-100 {\n opacity: 1;\n}\n\n// Overflow\n.bl-overflow-auto {\n overflow: auto;\n}\n\n.bl-overflow-hidden {\n overflow: hidden;\n}\n\n.bl-overflow-visible {\n overflow: visible;\n}\n\n.bl-overflow-scroll {\n overflow: scroll;\n}\n\n.bl-overflow-x-auto {\n overflow-x: auto;\n}\n\n.bl-overflow-x-hidden {\n overflow-x: hidden;\n}\n\n.bl-overflow-x-scroll {\n overflow-x: scroll;\n}\n\n.bl-overflow-y-auto {\n overflow-y: auto;\n}\n\n.bl-overflow-y-hidden {\n overflow-y: hidden;\n}\n\n.bl-overflow-y-scroll {\n overflow-y: scroll;\n}\n\n","// ============================================================================\n// Position Utilities\n// ============================================================================\n\n.bl-static {\n position: static;\n}\n\n.bl-fixed {\n position: fixed;\n}\n\n.bl-absolute {\n position: absolute;\n}\n\n.bl-relative {\n position: relative;\n}\n\n.bl-sticky {\n position: sticky;\n}\n\n// Top, Right, Bottom, Left\n.bl-top-0 {\n top: 0;\n}\n\n.bl-right-0 {\n right: 0;\n}\n\n.bl-bottom-0 {\n bottom: 0;\n}\n\n.bl-left-0 {\n left: 0;\n}\n\n.bl-top-auto {\n top: auto;\n}\n\n.bl-right-auto {\n right: auto;\n}\n\n.bl-bottom-auto {\n bottom: auto;\n}\n\n.bl-left-auto {\n left: auto;\n}\n\n// Insets\n.bl-inset-0 {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.bl-inset-auto {\n top: auto;\n right: auto;\n bottom: auto;\n left: auto;\n}\n\n// Z-Index\n.bl-z-0 {\n z-index: var(--z-index-base);\n}\n\n.bl-z-dropdown {\n z-index: var(--z-index-dropdown);\n}\n\n.bl-z-sticky {\n z-index: var(--z-index-sticky);\n}\n\n.bl-z-fixed {\n z-index: var(--z-index-fixed);\n}\n\n.bl-z-modal-backdrop {\n z-index: var(--z-index-modal-backdrop);\n}\n\n.bl-z-modal {\n z-index: var(--z-index-modal);\n}\n\n.bl-z-popover {\n z-index: var(--z-index-popover);\n}\n\n.bl-z-tooltip {\n z-index: var(--z-index-tooltip);\n}\n\n","// ============================================================================\n// Animation Utilities\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n// Transition\n.bl-transition {\n transition: var(--transition-base);\n}\n\n.bl-transition-colors {\n transition: var(--transition-colors);\n}\n\n.bl-transition-opacity {\n transition: var(--transition-opacity);\n}\n\n.bl-transition-transform {\n transition: var(--transition-transform);\n}\n\n.bl-transition-none {\n transition: none;\n}\n\n// Duration\n.bl-duration-fast {\n transition-duration: var(--transition-duration-fast);\n}\n\n.bl-duration-base {\n transition-duration: var(--transition-duration-base);\n}\n\n.bl-duration-slow {\n transition-duration: var(--transition-duration-slow);\n}\n\n.bl-duration-slower {\n transition-duration: var(--transition-duration-slower);\n}\n\n// Easing\n.bl-ease-linear {\n transition-timing-function: var(--transition-ease-linear);\n}\n\n.bl-ease-in {\n transition-timing-function: var(--transition-ease-in);\n}\n\n.bl-ease-out {\n transition-timing-function: var(--transition-ease-out);\n}\n\n.bl-ease-in-out {\n transition-timing-function: var(--transition-ease-in-out);\n}\n\n// Fade Animations\n@keyframes bl-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes bl-fade-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n.bl-fade-in {\n animation: bl-fade-in var(--transition-duration-base) var(--transition-ease-out);\n}\n\n.bl-fade-out {\n animation: bl-fade-out var(--transition-duration-base) var(--transition-ease-out);\n}\n\n// Slide Animations\n@keyframes bl-slide-up {\n from {\n transform: translateY(100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n@keyframes bl-slide-down {\n from {\n transform: translateY(-100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n@keyframes bl-slide-left {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n@keyframes bl-slide-right {\n from {\n transform: translateX(-100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n.bl-slide-up {\n animation: bl-slide-up var(--transition-duration-base) var(--transition-ease-out);\n}\n\n.bl-slide-down {\n animation: bl-slide-down var(--transition-duration-base) var(--transition-ease-out);\n}\n\n.bl-slide-left {\n animation: bl-slide-left var(--transition-duration-base) var(--transition-ease-out);\n}\n\n.bl-slide-right {\n animation: bl-slide-right var(--transition-duration-base) var(--transition-ease-out);\n}\n\n// Spin Animation\n@keyframes bl-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.bl-animate-spin {\n animation: bl-spin 1s linear infinite;\n}\n\n// Pulse Animation\n@keyframes bl-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n.bl-animate-pulse {\n animation: bl-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n","// ============================================================================\n// Accessibility Utilities\n// ============================================================================\n\n// Screen Reader Only\n.bl-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.bl-sr-only-focusable:focus {\n position: static;\n width: auto;\n height: auto;\n padding: inherit;\n margin: inherit;\n overflow: visible;\n clip: auto;\n white-space: normal;\n}\n\n// Skip Link\n.bl-skip-link {\n position: absolute;\n top: -40px;\n left: 0;\n z-index: var(--z-index-tooltip);\n padding: var(--spacing-sm) var(--spacing-md);\n background-color: var(--color-primary);\n color: var(--color-text-inverse);\n text-decoration: none;\n border-radius: var(--border-radius-md);\n\n &:focus {\n top: var(--spacing-sm);\n outline: 2px solid var(--color-border-focus);\n outline-offset: 2px;\n }\n}\n\n// Focus Visible (for keyboard navigation)\n.bl-focus-visible:focus-visible {\n outline: 2px solid var(--color-border-focus);\n outline-offset: 2px;\n}\n\n// High Contrast Mode Support\n@media (prefers-contrast: high) {\n * {\n border-color: currentColor !important;\n }\n\n .bl-skip-link {\n border: 2px solid currentColor;\n }\n}\n\n// Reduced Motion\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\n","// ============================================================================\n// Button Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: var(--spacing-sm) var(--spacing-md);\n font-family: var(--font-family-base);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-base);\n text-align: center;\n text-decoration: none;\n white-space: nowrap;\n vertical-align: middle;\n cursor: pointer;\n user-select: none;\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-sm);\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n transition: var(--transition-base);\n color: var(--color-text);\n\n &:focus {\n outline: 1px solid var(--color-border-focus);\n outline-offset: 2px;\n }\n\n &:disabled,\n &.bl-disabled {\n opacity: 0.6;\n cursor: not-allowed;\n pointer-events: none;\n }\n}\n\n// Button Sizes\n.bl-btn-sm {\n padding: var(--spacing-xs) var(--spacing-sm);\n font-size: var(--font-size-sm);\n}\n\n.bl-btn-lg {\n padding: var(--spacing-md) var(--spacing-lg);\n font-size: var(--font-size-lg);\n}\n\n// Button Variants\n.bl-btn-primary {\n background: var(--color-accent);\n color: var(--color-text-inverse);\n border-color: var(--color-accent);\n\n &:hover:not(:disabled):not(.bl-disabled) {\n background: var(--color-accent-dark);\n border-color: var(--color-accent-dark);\n }\n\n &:active:not(:disabled):not(.bl-disabled) {\n transform: translateY(1px); // Pressed effect\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n}\n\n.bl-btn-secondary {\n background: var(--glass-bg-medium);\n color: var(--color-text);\n border-color: var(--glass-border-medium);\n\n &:hover:not(:disabled):not(.bl-disabled) {\n background: var(--glass-bg-heavy);\n border-color: var(--glass-border-heavy);\n }\n\n &:active:not(:disabled):not(.bl-disabled) {\n transform: translateY(1px);\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n}\n\n.bl-btn-outline {\n background: transparent;\n color: var(--color-accent);\n border-color: var(--color-accent);\n\n &:hover:not(:disabled):not(.bl-disabled) {\n background: var(--glass-bg-light);\n border-color: var(--color-accent-light);\n }\n\n &:active:not(:disabled):not(.bl-disabled) {\n transform: translateY(1px);\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n}\n\n.bl-btn-ghost {\n background: transparent;\n color: var(--color-text);\n border-color: transparent;\n\n &:hover:not(:disabled):not(.bl-disabled) {\n background: var(--glass-bg-light);\n border-color: var(--glass-border-light);\n }\n\n &:active:not(:disabled):not(.bl-disabled) {\n transform: translateY(1px);\n }\n}\n\n.bl-btn-link {\n background: transparent;\n color: var(--color-accent);\n border-color: transparent;\n padding: 0;\n text-decoration: underline;\n\n &:hover:not(:disabled):not(.bl-disabled) {\n color: var(--color-accent-light);\n text-decoration: none;\n }\n}\n\n// Semantic Button Variants\n.bl-btn-success {\n background: var(--color-success);\n color: var(--color-text-inverse);\n border-color: var(--color-success);\n\n &:hover:not(:disabled):not(.bl-disabled) {\n background: var(--color-success-dark);\n border-color: var(--color-success-dark);\n }\n\n &:active:not(:disabled):not(.bl-disabled) {\n transform: translateY(1px);\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n}\n\n.bl-btn-warning {\n background: var(--color-warning);\n color: var(--color-text-inverse);\n border-color: var(--color-warning);\n\n &:hover:not(:disabled):not(.bl-disabled) {\n background: var(--color-warning-dark);\n border-color: var(--color-warning-dark);\n }\n\n &:active:not(:disabled):not(.bl-disabled) {\n transform: translateY(1px);\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n}\n\n.bl-btn-error {\n background: var(--color-error);\n color: var(--color-text-inverse);\n border-color: var(--color-error);\n\n &:hover:not(:disabled):not(.bl-disabled) {\n background: var(--color-error-dark);\n border-color: var(--color-error-dark);\n }\n\n &:active:not(:disabled):not(.bl-disabled) {\n transform: translateY(1px);\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n}\n\n.bl-btn-info {\n background: var(--color-info);\n color: var(--color-text-inverse);\n border-color: var(--color-info);\n\n &:hover:not(:disabled):not(.bl-disabled) {\n background: var(--color-info-dark);\n border-color: var(--color-info-dark);\n }\n\n &:active:not(:disabled):not(.bl-disabled) {\n transform: translateY(1px);\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n}\n\n// Button Block (full width)\n.bl-btn-block {\n display: flex;\n width: 100%;\n}\n","// ============================================================================\n// Form Components (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n// Form Group\n.bl-form-group {\n margin-bottom: var(--form-group-margin-bottom);\n}\n\n.bl-form-label {\n display: block;\n margin-bottom: var(--form-label-margin-bottom);\n font-size: var(--form-label-font-size);\n font-weight: var(--form-label-font-weight);\n color: var(--color-text);\n}\n\n.bl-form-label-required::after {\n content: ' *';\n color: var(--form-error-color);\n}\n\n.bl-form-helper {\n display: block;\n margin-top: var(--form-helper-margin-top);\n font-size: var(--form-helper-font-size);\n color: var(--color-text-muted);\n}\n\n.bl-form-error {\n display: block;\n margin-top: var(--form-helper-margin-top);\n font-size: var(--form-error-font-size);\n color: var(--color-error);\n}\n\n// Input Base (Recessed Glass Windows)\n.bl-input,\n.bl-textarea {\n display: block;\n width: 100%;\n padding: var(--form-input-padding-y) var(--form-input-padding-x);\n font-family: var(--font-family-base);\n font-size: var(--form-input-font-size);\n line-height: var(--form-input-line-height);\n color: var(--color-text);\n background: var(--glass-bg-light);\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-sm);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n transition: var(--transition-base);\n\n &::placeholder {\n color: var(--color-text-muted);\n opacity: 1;\n font-style: normal; // Technical labeling style\n }\n\n &:focus {\n outline: none;\n border-width: 2px; // Sharper border, not brighter\n border-color: var(--color-accent);\n background: var(--glass-bg-medium);\n }\n\n &:disabled {\n opacity: var(--form-input-opacity-disabled);\n cursor: not-allowed;\n background: var(--glass-bg-dark);\n }\n}\n\n// Select (Mechanical Switch, Angular Arrow)\n.bl-select {\n display: block;\n width: 100%;\n padding: var(--form-input-padding-y) var(--form-input-padding-x);\n padding-right: calc(var(--form-input-padding-x) + 1.5rem); // Space for arrow\n font-family: var(--font-family-base);\n font-size: var(--form-input-font-size);\n line-height: var(--form-input-line-height);\n color: var(--color-text);\n background: var(--glass-bg-light);\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-sm);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n transition: var(--transition-base);\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23ffffff' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--form-input-padding-x) center;\n background-size: 0.75rem;\n\n &:focus {\n outline: none;\n border-width: 2px;\n border-color: var(--color-accent);\n background-color: var(--glass-bg-medium);\n }\n\n &:disabled {\n opacity: var(--form-input-opacity-disabled);\n cursor: not-allowed;\n background-color: var(--glass-bg-dark);\n }\n}\n\n// Input States\n.bl-input-error,\n.bl-select-error,\n.bl-textarea-error {\n border-bottom: 2px solid var(--color-error); // Line, not area\n\n &:focus {\n border-width: 2px;\n border-color: var(--color-error);\n border-bottom-width: 2px;\n }\n}\n\n.bl-input-success,\n.bl-select-success,\n.bl-textarea-success {\n border-bottom: 2px solid var(--color-success);\n\n &:focus {\n border-width: 2px;\n border-color: var(--color-success);\n border-bottom-width: 2px;\n }\n}\n\n// Input Sizes\n.bl-input-sm,\n.bl-select-sm {\n padding: var(--form-input-padding-y-sm) var(--form-input-padding-x-sm);\n font-size: var(--form-input-font-size-sm);\n}\n\n.bl-select-sm {\n padding-right: calc(var(--form-input-padding-x-sm) + 1.25rem);\n}\n\n.bl-input-lg,\n.bl-select-lg {\n padding: var(--form-input-padding-y-lg) var(--form-input-padding-x-lg);\n font-size: var(--form-input-font-size-lg);\n}\n\n.bl-select-lg {\n padding-right: calc(var(--form-input-padding-x-lg) + 1.75rem);\n}\n\n// Textarea\n.bl-textarea {\n resize: var(--form-textarea-resize);\n min-height: var(--form-textarea-min-height);\n}\n\n// Checkbox & Radio\n.bl-checkbox,\n.bl-radio {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n\n input[type=\"checkbox\"],\n input[type=\"radio\"] {\n width: var(--form-checkbox-size);\n height: var(--form-checkbox-size);\n margin-right: var(--form-checkbox-margin-right);\n cursor: pointer;\n accent-color: var(--form-checkbox-accent-color);\n }\n\n &:disabled {\n opacity: var(--form-checkbox-opacity-disabled);\n cursor: not-allowed;\n }\n}\n\n// Switch (Toggle)\n.bl-switch {\n position: relative;\n display: inline-block;\n width: var(--form-switch-width);\n height: var(--form-switch-height);\n\n input {\n opacity: 0;\n width: 0;\n height: 0;\n\n &:checked + .bl-switch-slider {\n background-color: var(--form-switch-bg-active);\n\n &::before {\n transform: translateX(var(--form-switch-slider-translate));\n }\n }\n\n &:focus + .bl-switch-slider {\n border-color: var(--color-accent);\n }\n\n &:disabled + .bl-switch-slider {\n opacity: var(--form-switch-opacity-disabled);\n cursor: not-allowed;\n }\n }\n}\n\n.bl-switch-slider {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--glass-bg-medium);\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--border-radius-full);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n transition: var(--transition-base);\n cursor: pointer;\n\n &::before {\n position: absolute;\n content: \"\";\n height: var(--form-switch-slider-size);\n width: var(--form-switch-slider-size);\n left: var(--form-switch-slider-offset);\n bottom: var(--form-switch-slider-offset);\n background: var(--glass-bg-heavy);\n border: 1px solid var(--glass-border-light);\n border-radius: var(--border-radius-full);\n transition: var(--transition-base);\n }\n}\n\n// File Input\n.bl-file-input {\n display: block;\n width: 100%;\n padding: var(--form-file-input-padding);\n font-size: var(--form-file-input-font-size);\n color: var(--color-text);\n border: 1px dashed var(--glass-border-medium);\n border-radius: var(--tech-border-radius-sm);\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n cursor: pointer;\n transition: var(--transition-base);\n\n &:hover {\n border-color: var(--glass-border-heavy);\n background: var(--glass-bg-medium);\n }\n\n input[type=\"file\"] {\n display: none;\n }\n}\n\n// Range Input\n.bl-range {\n width: 100%;\n height: var(--form-range-height);\n border-radius: var(--tech-border-radius-sm);\n background: var(--form-range-bg);\n outline: none;\n -webkit-appearance: none;\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: var(--form-range-thumb-size);\n height: var(--form-range-thumb-size);\n border-radius: var(--tech-border-radius-sm);\n background: var(--form-range-thumb-bg);\n border: 1px solid var(--glass-border-medium);\n cursor: pointer;\n }\n\n &::-moz-range-thumb {\n width: var(--form-range-thumb-size);\n height: var(--form-range-thumb-size);\n border-radius: var(--tech-border-radius-sm);\n background: var(--form-range-thumb-bg);\n border: 1px solid var(--glass-border-medium);\n cursor: pointer;\n }\n}\n\n// Input Group\n.bl-input-group {\n display: flex;\n width: 100%;\n\n .bl-input,\n .bl-select {\n position: relative;\n flex: 1 1 auto;\n width: 1%;\n\n &:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n margin-left: -1px;\n }\n\n &:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n}\n","// ============================================================================\n// Card Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-card {\n display: flex;\n flex-direction: column;\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-md);\n overflow: hidden;\n transition: var(--transition-base);\n position: relative;\n\n // Optional: Vertical accent line at edge\n &.bl-card-accent {\n border-left: 2px solid var(--color-accent);\n }\n}\n\n.bl-card-header {\n padding: var(--spacing-md);\n border-bottom: 1px solid var(--glass-border-light);\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n}\n\n.bl-card-title {\n margin: 0;\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text);\n}\n\n.bl-card-subtitle {\n margin: var(--spacing-xs) 0 0 0;\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n}\n\n.bl-card-body {\n padding: var(--spacing-md);\n flex: 1 1 auto;\n color: var(--color-text);\n}\n\n.bl-card-footer {\n padding: var(--spacing-md);\n border-top: 1px solid var(--glass-border-light);\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n}\n\n// Card Variants\n.bl-card-primary {\n border-color: var(--color-accent);\n\n &.bl-card-accent {\n border-left-color: var(--color-accent);\n }\n}\n\n.bl-card-secondary {\n border-color: var(--glass-border-heavy);\n\n &.bl-card-accent {\n border-left-color: var(--color-secondary);\n }\n}\n\n// Card with Shadow\n.bl-card-shadow {\n box-shadow: var(--glass-shadow-md);\n}\n\n.bl-card-shadow-lg {\n box-shadow: var(--glass-shadow-lg);\n}\n\n// Card Hover Effect (subtle, no movement)\n.bl-card-hover {\n cursor: pointer;\n\n &:hover {\n background: var(--glass-bg-heavy);\n border-color: var(--glass-border-heavy);\n }\n}\n","// ============================================================================\n// Alert Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-alert {\n position: relative;\n padding: var(--spacing-md);\n margin-bottom: var(--spacing-md);\n border: 1px solid var(--glass-border-medium);\n border-left-width: 2px; // Clear border color line\n border-radius: var(--tech-border-radius-md);\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n color: var(--color-text);\n}\n\n.bl-alert-title {\n margin: 0 0 var(--spacing-xs) 0;\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text);\n}\n\n.bl-alert-message {\n margin: 0;\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n}\n\n// Alert Variants (Structure: Line → Title → Text)\n.bl-alert-info {\n border-left-color: var(--color-accent);\n color: var(--color-text);\n\n .bl-alert-title {\n color: var(--color-text);\n }\n}\n\n.bl-alert-success {\n border-left-color: var(--color-success);\n color: var(--color-text);\n\n .bl-alert-title {\n color: var(--color-text);\n }\n}\n\n.bl-alert-warning {\n border-left-color: var(--color-warning);\n color: var(--color-text);\n\n .bl-alert-title {\n color: var(--color-text);\n }\n}\n\n.bl-alert-error {\n border-left-color: var(--color-error);\n color: var(--color-text);\n\n .bl-alert-title {\n color: var(--color-text);\n }\n}\n\n// Dismissible Alert\n.bl-alert-dismissible {\n padding-right: var(--spacing-3xl);\n}\n\n.bl-alert-close {\n position: absolute;\n top: var(--spacing-sm);\n right: var(--spacing-sm);\n padding: var(--spacing-xs);\n background: transparent;\n border: none;\n cursor: pointer;\n opacity: 0.6;\n transition: var(--transition-opacity);\n color: var(--color-text);\n border-radius: var(--tech-border-radius-sm);\n\n &:hover {\n opacity: 1;\n }\n\n &::before {\n content: '×';\n font-size: var(--font-size-xl);\n line-height: 1;\n }\n}\n","// ============================================================================\n// Badge Component (Technical Glass Design - 2-part)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-badge {\n display: inline-flex;\n align-items: stretch;\n overflow: hidden;\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-medium);\n line-height: 1;\n white-space: nowrap;\n vertical-align: baseline;\n border-radius: var(--tech-border-radius-sm);\n border: 1px solid var(--glass-border-medium);\n}\n\n// Badge Label (Left Part - Matte)\n.bl-badge-label {\n display: inline-flex;\n align-items: center;\n padding: var(--spacing-xs) var(--spacing-sm);\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n color: var(--color-text-muted);\n border-right: 1px solid var(--glass-border-medium); // Technical edge\n flex-shrink: 0;\n}\n\n// Badge Value (Right Part - Glassy or Accented)\n.bl-badge-value {\n display: inline-flex;\n align-items: center;\n padding: var(--spacing-xs) var(--spacing-sm);\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n color: var(--color-text);\n flex-shrink: 0;\n}\n\n// Badge Variants\n.bl-badge-primary {\n .bl-badge-value {\n background: var(--color-accent);\n color: var(--color-text-inverse);\n }\n}\n\n.bl-badge-secondary {\n .bl-badge-value {\n background: var(--glass-bg-heavy);\n color: var(--color-text);\n }\n}\n\n.bl-badge-success {\n .bl-badge-value {\n background: var(--color-success);\n color: var(--color-text-inverse);\n }\n}\n\n.bl-badge-warning {\n .bl-badge-value {\n background: var(--color-warning);\n color: var(--color-text-inverse);\n }\n}\n\n.bl-badge-error {\n .bl-badge-value {\n background: var(--color-error);\n color: var(--color-text-inverse);\n }\n}\n\n.bl-badge-info {\n .bl-badge-value {\n background: var(--color-info);\n color: var(--color-text-inverse);\n }\n}\n\n// Badge Sizes\n.bl-badge-sm {\n font-size: 0.625rem;\n\n .bl-badge-label,\n .bl-badge-value {\n padding: 0.125rem var(--spacing-xs);\n }\n}\n\n.bl-badge-lg {\n font-size: var(--font-size-sm);\n\n .bl-badge-label,\n .bl-badge-value {\n padding: var(--spacing-sm) var(--spacing-md);\n }\n}\n","// ============================================================================\n// Modal Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-modal-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--z-index-modal-backdrop);\n width: 100vw;\n height: 100vh;\n background: var(--color-bg-overlay);\n backdrop-filter: blur(var(--glass-blur-lg));\n -webkit-backdrop-filter: blur(var(--glass-blur-lg));\n}\n\n.bl-modal {\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--z-index-modal);\n width: 100%;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n outline: 0;\n}\n\n.bl-modal-dialog {\n position: relative;\n width: auto;\n margin: var(--spacing-md);\n pointer-events: none;\n\n @media (min-width: 576px) {\n max-width: 500px;\n margin: var(--spacing-xl) auto;\n }\n\n @media (min-width: 768px) {\n max-width: 600px;\n }\n\n @media (min-width: 1024px) {\n max-width: 800px;\n }\n}\n\n.bl-modal-content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n pointer-events: auto;\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-xl));\n -webkit-backdrop-filter: blur(var(--glass-blur-xl));\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-md);\n outline: 0;\n}\n\n.bl-modal-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: var(--spacing-md);\n border-bottom: 1px solid var(--glass-border-light); // Clear divider line\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n}\n\n.bl-modal-title {\n margin: 0;\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-text);\n}\n\n.bl-modal-close {\n padding: var(--spacing-xs);\n margin: calc(var(--spacing-xs) * -1) calc(var(--spacing-xs) * -1) calc(var(--spacing-xs) * -1) auto;\n background: transparent;\n border: 0;\n border-radius: var(--tech-border-radius-sm);\n opacity: 0.6;\n cursor: pointer;\n transition: var(--transition-opacity);\n color: var(--color-text);\n font-family: monospace; // Angular, minimal\n\n &:hover {\n opacity: 1;\n }\n\n &::before {\n content: '×';\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-bold);\n line-height: 1;\n }\n}\n\n.bl-modal-body {\n position: relative;\n flex: 1 1 auto;\n padding: var(--spacing-md);\n color: var(--color-text);\n}\n\n.bl-modal-footer {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n padding: var(--spacing-md);\n border-top: 1px solid var(--glass-border-light);\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n\n > * {\n margin: var(--spacing-xs);\n }\n}\n\n// Modal Sizes\n.bl-modal-sm {\n @media (min-width: 576px) {\n max-width: 300px;\n }\n}\n\n.bl-modal-lg {\n @media (min-width: 1024px) {\n max-width: 1000px;\n }\n}\n\n.bl-modal-xl {\n @media (min-width: 1024px) {\n max-width: 1200px;\n }\n}\n\n// Centered Modal\n.bl-modal-centered {\n .bl-modal-dialog {\n display: flex;\n align-items: center;\n min-height: calc(100% - (var(--spacing-xl) * 2));\n }\n}\n","// ============================================================================\n// Dropdown Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-dropdown {\n position: relative;\n display: inline-block;\n}\n\n.bl-dropdown-toggle {\n &::after {\n display: inline-block;\n margin-left: var(--spacing-xs);\n vertical-align: 0.255em;\n content: \"\";\n border-top: 0.3em solid;\n border-right: 0.3em solid transparent;\n border-bottom: 0;\n border-left: 0.3em solid transparent;\n }\n}\n\n.bl-dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: var(--z-index-dropdown);\n display: none;\n min-width: 10rem;\n padding: var(--spacing-xs) 0;\n margin: var(--spacing-xs) 0 0 0;\n font-size: var(--font-size-base);\n color: var(--color-text);\n text-align: left;\n list-style: none;\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-lg));\n -webkit-backdrop-filter: blur(var(--glass-blur-lg));\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-md);\n overflow: hidden;\n\n &.bl-show {\n display: block;\n }\n}\n\n.bl-dropdown-menu-right {\n right: 0;\n left: auto;\n}\n\n.bl-dropdown-item {\n display: block;\n width: 100%;\n padding: var(--spacing-sm) var(--spacing-md);\n clear: both;\n font-weight: var(--font-weight-normal);\n color: var(--color-text);\n text-align: inherit;\n text-decoration: none;\n white-space: nowrap;\n background-color: transparent;\n border: 0;\n cursor: pointer;\n transition: var(--transition-base);\n\n &:hover,\n &:focus {\n color: var(--color-text);\n text-decoration: none;\n background: var(--glass-bg-heavy); // Flat, not floating\n }\n\n &:active {\n color: var(--color-text);\n background: var(--glass-bg-heavy);\n }\n\n &.bl-active {\n background: var(--glass-bg-heavy);\n color: var(--color-accent);\n }\n\n &.bl-disabled,\n &:disabled {\n color: var(--color-text-muted);\n pointer-events: none;\n background-color: transparent;\n opacity: 0.6;\n }\n}\n\n.bl-dropdown-divider {\n height: 0;\n margin: var(--spacing-xs) 0;\n overflow: hidden;\n border-top: 1px solid var(--glass-border-light);\n}\n\n.bl-dropdown-header {\n display: block;\n padding: var(--spacing-sm) var(--spacing-md);\n margin-bottom: 0;\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-muted);\n white-space: nowrap;\n}\n","// ============================================================================\n// Navigation Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n// Base Nav\n.bl-nav {\n display: flex;\n flex-wrap: wrap;\n padding-left: 0;\n margin-bottom: 0;\n list-style: none;\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-sm);\n padding: var(--spacing-xs);\n}\n\n.bl-nav-item {\n display: list-item;\n}\n\n.bl-nav-link {\n display: block;\n padding: var(--spacing-sm) var(--spacing-md);\n color: var(--color-text);\n text-decoration: none;\n border-radius: var(--tech-border-radius-sm);\n transition: var(--transition-base);\n\n &:hover {\n color: var(--color-text);\n text-decoration: none;\n background: var(--glass-bg-medium);\n }\n\n &:focus {\n outline: 1px solid var(--color-border-focus);\n outline-offset: -2px;\n }\n\n &.bl-active {\n color: var(--color-text);\n font-weight: var(--font-weight-semibold);\n background: var(--glass-bg-heavy);\n border-bottom: 2px solid var(--color-accent); // Sharp underline or block marking\n }\n\n &.bl-disabled {\n color: var(--color-text-muted);\n pointer-events: none;\n cursor: default;\n }\n}\n\n// Horizontal Nav\n.bl-nav-horizontal {\n flex-direction: row;\n\n .bl-nav-item {\n margin-right: var(--spacing-xs);\n }\n}\n\n// Vertical Nav\n.bl-nav-vertical {\n flex-direction: column;\n\n .bl-nav-item {\n margin-bottom: var(--spacing-xs);\n }\n}\n\n// Tabs\n.bl-nav-tabs {\n border-bottom: 1px solid var(--glass-border-light);\n background: transparent;\n padding: 0;\n\n .bl-nav-link {\n margin-bottom: calc(1px * -1);\n border: 1px solid transparent;\n border-top-left-radius: var(--tech-border-radius-sm);\n border-top-right-radius: var(--tech-border-radius-sm);\n background: transparent;\n\n &:hover {\n border-color: var(--glass-border-medium);\n background: var(--glass-bg-light);\n isolation: isolate;\n }\n\n &.bl-active {\n color: var(--color-text);\n background: var(--glass-bg-medium);\n border-color: var(--glass-border-medium) var(--glass-border-medium) transparent;\n border-bottom: 2px solid var(--color-accent);\n }\n }\n}\n\n// Pills\n.bl-nav-pills {\n .bl-nav-link {\n border-radius: var(--tech-border-radius-sm);\n\n &.bl-active {\n color: var(--color-text);\n background: var(--glass-bg-heavy);\n border-bottom: 2px solid var(--color-accent);\n }\n }\n}\n\n// Breadcrumb\n.bl-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n padding: var(--spacing-sm) 0;\n margin-bottom: var(--spacing-md);\n list-style: none;\n}\n\n.bl-breadcrumb-item {\n display: flex;\n align-items: center;\n\n + .bl-breadcrumb-item {\n padding-left: var(--spacing-sm);\n\n &::before {\n display: inline-block;\n padding-right: var(--spacing-sm);\n color: var(--color-text-muted);\n content: \"/\";\n }\n }\n\n &.bl-active {\n color: var(--color-text-muted);\n }\n}\n\n// Pagination\n.bl-pagination {\n display: flex;\n padding-left: 0;\n list-style: none;\n}\n\n.bl-page-item {\n display: list-item;\n\n &:first-child .bl-page-link {\n margin-left: 0;\n border-top-left-radius: var(--tech-border-radius-sm);\n border-bottom-left-radius: var(--tech-border-radius-sm);\n }\n\n &:last-child .bl-page-link {\n border-top-right-radius: var(--tech-border-radius-sm);\n border-bottom-right-radius: var(--tech-border-radius-sm);\n }\n\n &.bl-active .bl-page-link {\n z-index: 1;\n color: var(--color-text);\n background: var(--glass-bg-heavy);\n border-color: var(--glass-border-heavy);\n }\n\n &.bl-disabled .bl-page-link {\n color: var(--color-text-muted);\n pointer-events: none;\n cursor: auto;\n background: var(--glass-bg-dark);\n border-color: var(--glass-border-light);\n }\n}\n\n.bl-page-link {\n position: relative;\n display: block;\n padding: var(--spacing-sm) var(--spacing-md);\n margin-left: calc(1px * -1);\n line-height: var(--line-height-base);\n color: var(--color-text);\n text-decoration: none;\n background: var(--glass-bg-light);\n border: 1px solid var(--glass-border-medium);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n transition: var(--transition-base);\n\n &:hover {\n z-index: 2;\n color: var(--color-text);\n text-decoration: none;\n background: var(--glass-bg-medium);\n border-color: var(--glass-border-heavy);\n }\n\n &:focus {\n z-index: 2;\n outline: 1px solid var(--color-border-focus);\n outline-offset: -2px;\n }\n}\n","// ============================================================================\n// Table Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-table {\n width: 100%;\n margin-bottom: var(--spacing-md);\n color: var(--color-text);\n vertical-align: top;\n border-color: var(--glass-border-medium);\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-md);\n overflow: hidden;\n\n > :not(caption) > * > * {\n padding: var(--spacing-sm) var(--spacing-md);\n background-color: transparent;\n border-bottom-width: 1px;\n border-bottom-color: var(--glass-border-light);\n border-right-width: 1px;\n border-right-color: var(--glass-border-light);\n box-shadow: inset 0 0 0 9999px transparent;\n }\n\n > :not(caption) > * > *:last-child {\n border-right-width: 0;\n }\n\n > tbody {\n vertical-align: inherit;\n }\n\n > thead {\n vertical-align: bottom;\n }\n\n > :not(:first-child) {\n border-top: 1px solid var(--glass-border-light);\n }\n}\n\n.bl-table-caption {\n padding-top: var(--spacing-sm);\n padding-bottom: var(--spacing-sm);\n color: var(--color-text-muted);\n text-align: left;\n caption-side: bottom;\n}\n\n.bl-table-head {\n font-weight: var(--font-weight-semibold);\n color: var(--color-text);\n text-align: inherit;\n text-align: -webkit-match-parent;\n background: var(--glass-bg-etched); // Etched glass effect\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n}\n\n// Table Variants\n.bl-table-striped {\n > tbody > tr:nth-of-type(odd) > * {\n --bl-table-accent-bg: var(--glass-bg-light);\n color: var(--color-text);\n box-shadow: inset 0 0 0 9999px var(--bl-table-accent-bg);\n }\n}\n\n.bl-table-bordered {\n border: 1px solid var(--glass-border-medium);\n\n > :not(caption) > * {\n border-width: 1px 0;\n\n > * {\n border-width: 0 1px;\n border-color: var(--glass-border-light);\n }\n }\n}\n\n.bl-table-borderless {\n > :not(caption) > * > * {\n border-bottom-width: 0;\n border-right-width: 0;\n }\n\n > :not(:first-child) {\n border-top-width: 0;\n }\n}\n\n.bl-table-hover {\n > tbody > tr:hover > * {\n --bl-table-accent-bg: var(--glass-bg-heavy);\n color: var(--color-text);\n box-shadow: inset 0 0 0 9999px var(--bl-table-accent-bg);\n transition: var(--transition-base);\n }\n}\n\n// Table Sizes\n.bl-table-sm {\n > :not(caption) > * > * {\n padding: var(--spacing-xs) var(--spacing-sm);\n }\n}\n\n.bl-table-lg {\n > :not(caption) > * > * {\n padding: var(--spacing-md) var(--spacing-lg);\n }\n}\n\n// Responsive Table\n.bl-table-responsive {\n display: block;\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n\n > .bl-table {\n margin-bottom: 0;\n }\n}\n\n@media (max-width: 575.98px) {\n .bl-table-responsive-sm {\n display: block;\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n\n > .bl-table {\n margin-bottom: 0;\n }\n }\n}\n\n@media (max-width: 767.98px) {\n .bl-table-responsive-md {\n display: block;\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n\n > .bl-table {\n margin-bottom: 0;\n }\n }\n}\n\n@media (max-width: 1023.98px) {\n .bl-table-responsive-lg {\n display: block;\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n\n > .bl-table {\n margin-bottom: 0;\n }\n }\n}\n\n@media (max-width: 1279.98px) {\n .bl-table-responsive-xl {\n display: block;\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n\n > .bl-table {\n margin-bottom: 0;\n }\n }\n}\n","// ============================================================================\n// Tooltip Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-tooltip {\n position: relative;\n display: inline-block;\n}\n\n.bl-tooltip-trigger {\n cursor: help;\n}\n\n.bl-tooltip-content {\n position: absolute;\n z-index: var(--z-index-tooltip);\n display: none;\n max-width: 200px;\n padding: var(--spacing-xs) var(--spacing-sm);\n font-size: var(--font-size-xs);\n font-family: var(--font-family-mono); // Precise, monospace possible\n line-height: var(--line-height-base);\n color: var(--color-text);\n text-align: center;\n text-decoration: none;\n word-wrap: break-word;\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-sm);\n opacity: 0;\n transition: var(--transition-opacity);\n\n &.bl-show {\n display: block;\n opacity: 1;\n }\n}\n\n// Tooltip Positions (Angular, Trapezoidal Arrow)\n.bl-tooltip-top {\n .bl-tooltip-content {\n bottom: 100%;\n left: 50%;\n margin-bottom: var(--spacing-xs);\n transform: translateX(-50%);\n\n &::after {\n position: absolute;\n top: 100%;\n left: 50%;\n width: 0;\n height: 0;\n margin-left: -6px;\n content: \"\";\n border-width: 6px 6px 0 6px;\n border-style: solid;\n border-color: var(--glass-bg-medium) transparent transparent transparent;\n clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); // Trapezoidal\n }\n }\n}\n\n.bl-tooltip-bottom {\n .bl-tooltip-content {\n top: 100%;\n left: 50%;\n margin-top: var(--spacing-xs);\n transform: translateX(-50%);\n\n &::after {\n position: absolute;\n bottom: 100%;\n left: 50%;\n width: 0;\n height: 0;\n margin-left: -6px;\n content: \"\";\n border-width: 0 6px 6px 6px;\n border-style: solid;\n border-color: transparent transparent var(--glass-bg-medium) transparent;\n clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); // Trapezoidal\n }\n }\n}\n\n.bl-tooltip-left {\n .bl-tooltip-content {\n top: 50%;\n right: 100%;\n margin-right: var(--spacing-xs);\n transform: translateY(-50%);\n\n &::after {\n position: absolute;\n top: 50%;\n left: 100%;\n width: 0;\n height: 0;\n margin-top: -6px;\n content: \"\";\n border-width: 6px 0 6px 6px;\n border-style: solid;\n border-color: transparent transparent transparent var(--glass-bg-medium);\n clip-path: polygon(0 20%, 0 80%, 100% 100%, 100% 0); // Trapezoidal\n }\n }\n}\n\n.bl-tooltip-right {\n .bl-tooltip-content {\n top: 50%;\n left: 100%;\n margin-left: var(--spacing-xs);\n transform: translateY(-50%);\n\n &::after {\n position: absolute;\n top: 50%;\n right: 100%;\n width: 0;\n height: 0;\n margin-top: -6px;\n content: \"\";\n border-width: 6px 6px 6px 0;\n border-style: solid;\n border-color: transparent var(--glass-bg-medium) transparent transparent;\n clip-path: polygon(0 0, 0 100%, 100% 80%, 100% 20%); // Trapezoidal\n }\n }\n}\n","// ============================================================================\n// Progress Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-progress {\n display: flex;\n height: 1rem;\n overflow: hidden;\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-sm);\n}\n\n.bl-progress-bar {\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n color: var(--color-text-inverse);\n text-align: center;\n white-space: nowrap;\n background: var(--color-accent);\n transition: width var(--transition-duration-slow) var(--transition-ease-linear);\n}\n\n// Progress Variants\n.bl-progress-bar-primary {\n background: var(--color-accent);\n}\n\n.bl-progress-bar-secondary {\n background: var(--glass-bg-heavy);\n}\n\n.bl-progress-bar-success {\n background: var(--color-success);\n}\n\n.bl-progress-bar-warning {\n background: var(--color-warning);\n}\n\n.bl-progress-bar-error {\n background: var(--color-error);\n}\n\n.bl-progress-bar-info {\n background: var(--color-info);\n}\n\n// Progress Sizes\n.bl-progress-sm {\n height: 0.5rem;\n}\n\n.bl-progress-lg {\n height: 1.5rem;\n}\n\n// Striped Progress (removed - no gradients)\n// Animated Progress (removed - only linear growth)\n","// ============================================================================\n// Spinner Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-spinner {\n display: inline-block;\n width: 2rem;\n height: 2rem;\n vertical-align: text-bottom;\n border: var(--border-width-base) solid var(--glass-border-medium);\n border-top-color: var(--color-accent);\n border-radius: var(--tech-border-radius-sm); // Square frame\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n animation: bl-spinner-rotate 0.75s linear infinite;\n position: relative;\n\n // Rotating inner segment\n &::before {\n content: '';\n position: absolute;\n top: 2px;\n left: 2px;\n right: 2px;\n bottom: 2px;\n background: var(--color-accent);\n opacity: 0.3;\n border-radius: var(--tech-border-radius-sm);\n animation: bl-spinner-inner 1.5s linear infinite;\n }\n}\n\n@keyframes bl-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes bl-spinner-inner {\n 0% {\n transform: rotate(0deg);\n opacity: 0.3;\n }\n 50% {\n opacity: 0.6;\n }\n 100% {\n transform: rotate(360deg);\n opacity: 0.3;\n }\n}\n\n// Spinner Variants\n.bl-spinner-primary {\n border-top-color: var(--color-accent);\n \n &::before {\n background: var(--color-accent);\n }\n}\n\n.bl-spinner-secondary {\n border-top-color: var(--color-secondary);\n \n &::before {\n background: var(--color-secondary);\n }\n}\n\n.bl-spinner-success {\n border-top-color: var(--color-success);\n \n &::before {\n background: var(--color-success);\n }\n}\n\n.bl-spinner-warning {\n border-top-color: var(--color-warning);\n \n &::before {\n background: var(--color-warning);\n }\n}\n\n.bl-spinner-error {\n border-top-color: var(--color-error);\n \n &::before {\n background: var(--color-error);\n }\n}\n\n.bl-spinner-info {\n border-top-color: var(--color-info);\n \n &::before {\n background: var(--color-info);\n }\n}\n\n// Spinner Sizes\n.bl-spinner-sm {\n width: 1rem;\n height: 1rem;\n border-width: var(--border-width-thin);\n}\n\n.bl-spinner-lg {\n width: 3rem;\n height: 3rem;\n border-width: var(--border-width-base);\n}\n\n// Spinner Grow (Alternative Style - removed, using square frame only)\n","// ============================================================================\n// Icon Font System\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n// Icon Font Face (to be generated from icon font files)\n@font-face {\n font-family: 'Baseline Icons';\n src: url('../fonts/baseline-icons.woff2') format('woff2'),\n url('../fonts/baseline-icons.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n}\n\n// Base Icon Class\n.bl-icon {\n display: inline-block;\n font-family: 'Baseline Icons';\n font-style: normal;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n speak: never;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n}\n\n// Icon Sizes\n.bl-icon-xs {\n font-size: 0.75rem;\n width: 0.75rem;\n height: 0.75rem;\n}\n\n.bl-icon-sm {\n font-size: 1rem;\n width: 1rem;\n height: 1rem;\n}\n\n.bl-icon-md {\n font-size: 1.25rem;\n width: 1.25rem;\n height: 1.25rem;\n}\n\n.bl-icon-lg {\n font-size: 1.5rem;\n width: 1.5rem;\n height: 1.5rem;\n}\n\n.bl-icon-xl {\n font-size: 2rem;\n width: 2rem;\n height: 2rem;\n}\n\n// Icon Variants (using Unicode/Private Use Area)\n// These would be replaced with actual icon font mappings\n.bl-icon-home::before { content: '\\e900'; }\n.bl-icon-user::before { content: '\\e901'; }\n.bl-icon-search::before { content: '\\e902'; }\n.bl-icon-menu::before { content: '\\e903'; }\n.bl-icon-close::before { content: '\\e904'; }\n.bl-icon-chevron-left::before { content: '\\e905'; }\n.bl-icon-chevron-right::before { content: '\\e906'; }\n.bl-icon-chevron-up::before { content: '\\e907'; }\n.bl-icon-chevron-down::before { content: '\\e908'; }\n.bl-icon-arrow-left::before { content: '\\e909'; }\n.bl-icon-arrow-right::before { content: '\\e90a'; }\n.bl-icon-arrow-up::before { content: '\\e90b'; }\n.bl-icon-arrow-down::before { content: '\\e90c'; }\n.bl-icon-check::before { content: '\\e90d'; }\n.bl-icon-cross::before { content: '\\e90e'; }\n.bl-icon-plus::before { content: '\\e90f'; }\n.bl-icon-minus::before { content: '\\e910'; }\n.bl-icon-info::before { content: '\\e911'; }\n.bl-icon-warning::before { content: '\\e912'; }\n.bl-icon-error::before { content: '\\e913'; }\n.bl-icon-success::before { content: '\\e914'; }\n.bl-icon-heart::before { content: '\\e915'; }\n.bl-icon-star::before { content: '\\e916'; }\n.bl-icon-bookmark::before { content: '\\e917'; }\n.bl-icon-share::before { content: '\\e918'; }\n.bl-icon-download::before { content: '\\e919'; }\n.bl-icon-upload::before { content: '\\e91a'; }\n.bl-icon-edit::before { content: '\\e91b'; }\n.bl-icon-delete::before { content: '\\e91c'; }\n.bl-icon-settings::before { content: '\\e91d'; }\n.bl-icon-bell::before { content: '\\e91e'; }\n.bl-icon-mail::before { content: '\\e91f'; }\n.bl-icon-phone::before { content: '\\e920'; }\n.bl-icon-calendar::before { content: '\\e921'; }\n.bl-icon-clock::before { content: '\\e922'; }\n.bl-icon-image::before { content: '\\e923'; }\n.bl-icon-video::before { content: '\\e924'; }\n.bl-icon-file::before { content: '\\e925'; }\n.bl-icon-folder::before { content: '\\e926'; }\n.bl-icon-lock::before { content: '\\e927'; }\n.bl-icon-unlock::before { content: '\\e928'; }\n.bl-icon-eye::before { content: '\\e929'; }\n.bl-icon-eye-off::before { content: '\\e92a'; }\n.bl-icon-filter::before { content: '\\e92b'; }\n.bl-icon-sort::before { content: '\\e92c'; }\n.bl-icon-grid::before { content: '\\e92d'; }\n.bl-icon-list::before { content: '\\e92e'; }\n.bl-icon-refresh::before { content: '\\e92f'; }\n.bl-icon-loading::before { content: '\\e930'; }\n.bl-icon-play::before { content: '\\e931'; }\n.bl-icon-pause::before { content: '\\e932'; }\n.bl-icon-stop::before { content: '\\e933'; }\n.bl-icon-next::before { content: '\\e934'; }\n.bl-icon-prev::before { content: '\\e935'; }\n.bl-icon-volume::before { content: '\\e936'; }\n.bl-icon-volume-off::before { content: '\\e937'; }\n.bl-icon-fullscreen::before { content: '\\e938'; }\n.bl-icon-fullscreen-exit::before { content: '\\e939'; }\n.bl-icon-link::before { content: '\\e93a'; }\n.bl-icon-external::before { content: '\\e93b'; }\n.bl-icon-copy::before { content: '\\e93c'; }\n.bl-icon-cut::before { content: '\\e93d'; }\n.bl-icon-paste::before { content: '\\e93e'; }\n.bl-icon-undo::before { content: '\\e93f'; }\n.bl-icon-redo::before { content: '\\e940'; }\n.bl-icon-save::before { content: '\\e941'; }\n.bl-icon-print::before { content: '\\e942'; }\n.bl-icon-zoom-in::before { content: '\\e943'; }\n.bl-icon-zoom-out::before { content: '\\e944'; }\n.bl-icon-maximize::before { content: '\\e945'; }\n.bl-icon-minimize::before { content: '\\e946'; }\n\n// Icon in Button\n.bl-btn .bl-icon {\n margin-right: var(--spacing-xs);\n}\n\n.bl-btn .bl-icon:last-child {\n margin-right: 0;\n margin-left: var(--spacing-xs);\n}\n\n.bl-btn .bl-icon:only-child {\n margin: 0;\n}\n\n","// ============================================================================\n// Dark Theme\n// ============================================================================\n\n@media (prefers-color-scheme: dark) {\n :root {\n // Neutral Grayscale (inverted)\n --color-gray-50: #030712;\n --color-gray-100: #111827;\n --color-gray-200: #1f2937;\n --color-gray-300: #374151;\n --color-gray-400: #4b5563;\n --color-gray-500: #6b7280;\n --color-gray-600: #9ca3af;\n --color-gray-700: #d1d5db;\n --color-gray-800: #e5e7eb;\n --color-gray-900: #f3f4f6;\n --color-gray-950: #f9fafb;\n\n // Semantic Colors (adjusted for dark mode)\n --color-primary: #f3f4f6;\n --color-primary-light: #e5e7eb;\n --color-primary-dark: #d1d5db;\n\n --color-secondary: #9ca3af;\n --color-secondary-light: #d1d5db;\n --color-secondary-dark: #6b7280;\n\n --color-success: #34d399;\n --color-success-light: #6ee7b7;\n --color-success-dark: #10b981;\n\n --color-warning: #fbbf24;\n --color-warning-light: #fcd34d;\n --color-warning-dark: #f59e0b;\n\n --color-error: #f87171;\n --color-error-light: #fca5a5;\n --color-error-dark: #ef4444;\n\n --color-info: #60a5fa;\n --color-info-light: #93c5fd;\n --color-info-dark: #3b82f6;\n\n // Text Colors\n --color-text: #f3f4f6;\n --color-text-muted: #9ca3af;\n --color-text-light: #6b7280;\n --color-text-inverse: #111827;\n\n // Background Colors\n --color-bg: #111827;\n --color-bg-alt: #1f2937;\n --color-bg-overlay: rgba(0, 0, 0, 0.7);\n\n // Border Colors\n --color-border: #374151;\n --color-border-light: #1f2937;\n --color-border-dark: #4b5563;\n --color-border-focus: #60a5fa;\n }\n}\n\n// Manual Dark Theme Toggle (via class)\n.bl-theme-dark,\n[data-theme=\"dark\"] {\n // Neutral Grayscale (inverted)\n --color-gray-50: #030712;\n --color-gray-100: #111827;\n --color-gray-200: #1f2937;\n --color-gray-300: #374151;\n --color-gray-400: #4b5563;\n --color-gray-500: #6b7280;\n --color-gray-600: #9ca3af;\n --color-gray-700: #d1d5db;\n --color-gray-800: #e5e7eb;\n --color-gray-900: #f3f4f6;\n --color-gray-950: #f9fafb;\n\n // Semantic Colors (adjusted for dark mode)\n --color-primary: #f3f4f6;\n --color-primary-light: #e5e7eb;\n --color-primary-dark: #d1d5db;\n\n --color-secondary: #9ca3af;\n --color-secondary-light: #d1d5db;\n --color-secondary-dark: #6b7280;\n\n --color-success: #34d399;\n --color-success-light: #6ee7b7;\n --color-success-dark: #10b981;\n\n --color-warning: #fbbf24;\n --color-warning-light: #fcd34d;\n --color-warning-dark: #f59e0b;\n\n --color-error: #f87171;\n --color-error-light: #fca5a5;\n --color-error-dark: #ef4444;\n\n --color-info: #60a5fa;\n --color-info-light: #93c5fd;\n --color-info-dark: #3b82f6;\n\n // Text Colors\n --color-text: #f3f4f6;\n --color-text-muted: #9ca3af;\n --color-text-light: #6b7280;\n --color-text-inverse: #111827;\n\n // Background Colors\n --color-bg: #111827;\n --color-bg-alt: #1f2937;\n --color-bg-overlay: rgba(0, 0, 0, 0.7);\n\n // Border Colors\n --color-border: #374151;\n --color-border-light: #1f2937;\n --color-border-dark: #4b5563;\n --color-border-focus: #60a5fa;\n}\n\n"]}
1
+ {"version":3,"sourceRoot":"","sources":["file:///Volumes/Main/Codes/Baseline/src/tokens/_colors.scss","file:///Volumes/Main/Codes/Baseline/src/tokens/_spacing.scss","file:///Volumes/Main/Codes/Baseline/src/tokens/_typography.scss","file:///Volumes/Main/Codes/Baseline/src/tokens/_borders.scss","file:///Volumes/Main/Codes/Baseline/src/tokens/_shadows.scss","file:///Volumes/Main/Codes/Baseline/src/tokens/_z-index.scss","file:///Volumes/Main/Codes/Baseline/src/tokens/_transitions.scss","file:///Volumes/Main/Codes/Baseline/src/tokens/_forms.scss","file:///Volumes/Main/Codes/Baseline/src/tokens/_glassmorphism.scss","file:///Volumes/Main/Codes/Baseline/src/base/_reset.scss","file:///Volumes/Main/Codes/Baseline/src/base/_normalize.scss","file:///Volumes/Main/Codes/Baseline/src/base/_base.scss","file:///Volumes/Main/Codes/Baseline/src/layout/_container.scss","file:///Volumes/Main/Codes/Baseline/src/layout/_grid.scss","file:///Volumes/Main/Codes/Baseline/src/layout/_grid-modern.scss","file:///Volumes/Main/Codes/Baseline/src/layout/_flex.scss","file:///Volumes/Main/Codes/Baseline/src/utilities/_spacing.scss","file:///Volumes/Main/Codes/Baseline/src/utilities/_display.scss","file:///Volumes/Main/Codes/Baseline/src/utilities/_text.scss","file:///Volumes/Main/Codes/Baseline/src/utilities/_visibility.scss","file:///Volumes/Main/Codes/Baseline/src/utilities/_position.scss","file:///Volumes/Main/Codes/Baseline/src/utilities/_animations.scss","file:///Volumes/Main/Codes/Baseline/src/utilities/_accessibility.scss","file:///Volumes/Main/Codes/Baseline/src/components/_button.scss","file:///Volumes/Main/Codes/Baseline/src/components/_form.scss","file:///Volumes/Main/Codes/Baseline/src/components/_card.scss","file:///Volumes/Main/Codes/Baseline/src/components/_alert.scss","file:///Volumes/Main/Codes/Baseline/src/components/_badge.scss","file:///Volumes/Main/Codes/Baseline/src/components/_modal.scss","file:///Volumes/Main/Codes/Baseline/src/components/_dropdown.scss","file:///Volumes/Main/Codes/Baseline/src/components/_nav.scss","file:///Volumes/Main/Codes/Baseline/src/components/_table.scss","file:///Volumes/Main/Codes/Baseline/src/components/_tooltip.scss","file:///Volumes/Main/Codes/Baseline/src/components/_progress.scss","file:///Volumes/Main/Codes/Baseline/src/components/_spinner.scss","file:///Volumes/Main/Codes/Baseline/src/icons/_icons.scss","file:///Volumes/Main/Codes/Baseline/src/themes/_dark.scss"],"names":[],"mappings":";AAsEA;EAEE;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA;;;ACnHF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACkBF;EAEE;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;;AClEF;EAEE;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACpBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACNF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACAF;EAEE;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;;;ACkDF;EAEE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;;;ACxIF;EAEE;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;;;ACtDF;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AChBF;EACE;EACA;;;AAIF;EACE;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AChLF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;AAAA;AAAA;EAGE;EACA;;;AAIF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AC9KF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;AAIF;EAbF;IAcI;;;AAIF;EAlBF;IAmBI;;;AAIF;EAvBF;IAwBI;;;AAIF;EA5BF;IA6BI;;;;AAIJ;EACE;EACA;EACA;;;AClCF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAKA;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAJF;EACE;EACA;EACA;EACA;;;AAMJ;EACE;IACE;IACA;IACA;;EAIA;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;;AAMN;EACE;IACE;IACA;IACA;;EAIA;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;;AAMN;EACE;IACE;IACA;IACA;;EAIA;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;;AAMN;EACE;IACE;IACA;IACA;;EAIA;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;;AAMN;EACE;IACE;IACA;IACA;;EAIA;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;EAJF;IACE;IACA;IACA;IACA;;;AC/GN;EACE;EACA;;;AAKA;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAMF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAKJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAKA;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAMF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AADF;EACE;;;AAKJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;ACtHF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;ACtJA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAOA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AA3BF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AC9EN;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;IAAgB;;EAChB;IAAkB;;EAClB;IAAwB;;EACxB;IAAiB;;EACjB;IAAgB;;EAChB;IAAuB;;EACvB;IAAgB;;;AAGlB;EACE;IAAgB;;EAChB;IAAkB;;EAClB;IAAwB;;EACxB;IAAiB;;EACjB;IAAgB;;EAChB;IAAuB;;EACvB;IAAgB;;;AAGlB;EACE;IAAgB;;EAChB;IAAkB;;EAClB;IAAwB;;EACxB;IAAiB;;EACjB;IAAgB;;EAChB;IAAuB;;EACvB;IAAgB;;;AAGlB;EACE;IAAgB;;EAChB;IAAkB;;EAClB;IAAwB;;EACxB;IAAiB;;EACjB;IAAgB;;EAChB;IAAuB;;EACvB;IAAgB;;;AC/ElB;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;ACxPF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;ACnEF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AC/FF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAIF;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;;;AAIF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;;;ACzKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;;;AAIF;EACE;IACE;;EAGF;IACE;;;AAKJ;EACE;AAAA;AAAA;IAGE;IACA;IACA;IACA;;;AClEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;EACA;EACA;;;AAKJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAKJ;EACE;EACA;;;AC/LF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAIF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;;;AAKJ;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAIJ;EAEE;EACA;EACA;EACA;;;AAMN;AAAA;AAAA;EAGE;;AAEA;AAAA;AAAA;EACE;EACA;EACA;;;AAIJ;AAAA;AAAA;EAGE;;AAEA;AAAA;AAAA;EACE;EACA;EACA;;;AAKJ;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAIF;AAAA;EAEE;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;;;AAKJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EACE;;AAIJ;EACE;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAKJ;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;EACA;;;ACjdN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAIF;EACE;;AAEA;EACE;EACA;;;ACjFJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAIF;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAKJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;;ACxFJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKA;EACE;EACA;;;AAKF;EACE;EACA;;;AAKF;EACE;EACA;;;AAKF;EACE;EACA;;;AAKF;EACE;EACA;;;AAKF;EACE;EACA;;;AAKJ;EACE;;AAEA;AAAA;EAEE;;;AAIJ;EACE;;AAEA;AAAA;EAEE;;;AChGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EANF;IAOI;IACA;;;AAGF;EAXF;IAYI;;;AAGF;EAfF;IAgBI;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAMF;EADF;IAEI;;;;AAKF;EADF;IAEI;;;;AAKF;EADF;IAEI;;;;AAMF;EACE;EACA;EACA;;;ACpJJ;EACE;EACA;;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EAEE;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAKJ;EACE;;AAEA;EACE;;;AAKJ;EACE;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAOJ;EACE;;AAEA;EACE;EACA;EACA;;;AAMN;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AC1MJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKA;EACE;EACA;EACA;;;AAIJ;EACE;;AAEA;EACE;;AAEA;EACE;EACA;;;AAMJ;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;EACA;EACA;;;AAMF;EACE;;;AAKF;EACE;;;AAKJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;IACE;IACA;IACA;IACA;;EAEA;IACE;;;AAKN;EACE;IACE;IACA;IACA;IACA;;EAEA;IACE;;;AAKN;EACE;IACE;IACA;IACA;IACA;;EAEA;IACE;;;AAKN;EACE;IACE;IACA;IACA;IACA;;EAEA;IACE;;;AC5KN;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAMF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC5HN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;ACtDF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;;EAEF;IACE;IACA;;;AAKJ;EACE;;AAEA;EACE;;;AAIJ;EACE;;AAEA;EACE;;;AAIJ;EACE;;AAEA;EACE;;;AAIJ;EACE;;AAEA;EACE;;;AAIJ;EACE;;AAEA;EACE;;;AAIJ;EACE;;AAEA;EACE;;;AAKJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AC3GF;EACE;EACA;EAEA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAKF;EAAwB;;;AACxB;EAAwB;;;AACxB;EAA0B;;;AAC1B;EAAwB;;;AACxB;EAAyB;;;AACzB;EAAgC;;;AAChC;EAAiC;;;AACjC;EAA8B;;;AAC9B;EAAgC;;;AAChC;EAA8B;;;AAC9B;EAA+B;;;AAC/B;EAA4B;;;AAC5B;EAA8B;;;AAC9B;EAAyB;;;AACzB;EAAyB;;;AACzB;EAAwB;;;AACxB;EAAyB;;;AACzB;EAAwB;;;AACxB;EAA2B;;;AAC3B;EAAyB;;;AACzB;EAA2B;;;AAC3B;EAAyB;;;AACzB;EAAwB;;;AACxB;EAA4B;;;AAC5B;EAAyB;;;AACzB;EAA4B;;;AAC5B;EAA0B;;;AAC1B;EAAwB;;;AACxB;EAA0B;;;AAC1B;EAA4B;;;AAC5B;EAAwB;;;AACxB;EAAwB;;;AACxB;EAAyB;;;AACzB;EAA4B;;;AAC5B;EAAyB;;;AACzB;EAAyB;;;AACzB;EAAyB;;;AACzB;EAAwB;;;AACxB;EAA0B;;;AAC1B;EAAwB;;;AACxB;EAA0B;;;AAC1B;EAAuB;;;AACvB;EAA2B;;;AAC3B;EAA0B;;;AAC1B;EAAwB;;;AACxB;EAAwB;;;AACxB;EAAwB;;;AACxB;EAA2B;;;AAC3B;EAA2B;;;AAC3B;EAAwB;;;AACxB;EAAyB;;;AACzB;EAAwB;;;AACxB;EAAwB;;;AACxB;EAAwB;;;AACxB;EAA0B;;;AAC1B;EAA8B;;;AAC9B;EAA8B;;;AAC9B;EAAmC;;;AACnC;EAAwB;;;AACxB;EAA4B;;;AAC5B;EAAwB;;;AACxB;EAAuB;;;AACvB;EAAyB;;;AACzB;EAAwB;;;AACxB;EAAwB;;;AACxB;EAAwB;;;AACxB;EAAyB;;;AACzB;EAA2B;;;AAC3B;EAA4B;;;AAC5B;EAA4B;;;AAC5B;EAA4B;;;AAG5B;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AC/IF;EACE;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAGA;IACA;IACA;IACA;IAGA;IACA;IACA;IAGA;IACA;IACA;IACA;;;AAKJ;AAAA;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EACA;EACA","sourcesContent":["// ============================================================================\n// Color Tokens (Technical Glass Design)\n// ============================================================================\n\n// Base Tone: Dark Graphite\n$color-base: #1A1A1A;\n$color-base-light: #2A2A2A;\n$color-base-dark: #0F0F0F;\n\n// Accent: Ice Blue\n$color-accent: #4A9EFF;\n$color-accent-light: #6BB0FF;\n$color-accent-dark: #3A8EEF;\n\n// Neutral Grayscale (for glass effects)\n$color-gray-50: #f9fafb;\n$color-gray-100: #f3f4f6;\n$color-gray-200: #e5e7eb;\n$color-gray-300: #d1d5db;\n$color-gray-400: #9ca3af;\n$color-gray-500: #6b7280;\n$color-gray-600: #4b5563;\n$color-gray-700: #374151;\n$color-gray-800: #1f2937;\n$color-gray-900: #111827;\n$color-gray-950: #030712;\n\n// Semantic Colors (using accent for primary)\n$color-primary: $color-accent;\n$color-primary-light: $color-accent-light;\n$color-primary-dark: $color-accent-dark;\n\n$color-secondary: $color-gray-600;\n$color-secondary-light: $color-gray-500;\n$color-secondary-dark: $color-gray-700;\n\n$color-success: #10b981;\n$color-success-light: #34d399;\n$color-success-dark: #059669;\n\n$color-warning: #f59e0b;\n$color-warning-light: #fbbf24;\n$color-warning-dark: #d97706;\n\n$color-error: #ef4444;\n$color-error-light: #f87171;\n$color-error-dark: #dc2626;\n\n$color-info: $color-accent;\n$color-info-light: $color-accent-light;\n$color-info-dark: $color-accent-dark;\n\n// Text Colors (high contrast on dark ground)\n$color-text: #ffffff;\n$color-text-muted: rgba(255, 255, 255, 0.7);\n$color-text-light: rgba(255, 255, 255, 0.5);\n$color-text-inverse: #1A1A1A;\n\n// Background Colors\n$color-bg: $color-base;\n$color-bg-alt: $color-base-light;\n$color-bg-overlay: rgba(0, 0, 0, 0.3); // Desaturated, not darkened\n\n// Border Colors (cool, slightly bright on dark ground)\n$color-border: rgba(255, 255, 255, 0.15);\n$color-border-light: rgba(255, 255, 255, 0.1);\n$color-border-dark: rgba(255, 255, 255, 0.2);\n$color-border-focus: $color-accent;\n\n// Export as CSS Custom Properties\n:root {\n // Base Tone\n --color-base: #{$color-base};\n --color-base-light: #{$color-base-light};\n --color-base-dark: #{$color-base-dark};\n\n // Accent\n --color-accent: #{$color-accent};\n --color-accent-light: #{$color-accent-light};\n --color-accent-dark: #{$color-accent-dark};\n\n // Neutral Grayscale\n --color-gray-50: #{$color-gray-50};\n --color-gray-100: #{$color-gray-100};\n --color-gray-200: #{$color-gray-200};\n --color-gray-300: #{$color-gray-300};\n --color-gray-400: #{$color-gray-400};\n --color-gray-500: #{$color-gray-500};\n --color-gray-600: #{$color-gray-600};\n --color-gray-700: #{$color-gray-700};\n --color-gray-800: #{$color-gray-800};\n --color-gray-900: #{$color-gray-900};\n --color-gray-950: #{$color-gray-950};\n\n // Semantic Colors\n --color-primary: #{$color-primary};\n --color-primary-light: #{$color-primary-light};\n --color-primary-dark: #{$color-primary-dark};\n\n --color-secondary: #{$color-secondary};\n --color-secondary-light: #{$color-secondary-light};\n --color-secondary-dark: #{$color-secondary-dark};\n\n --color-success: #{$color-success};\n --color-success-light: #{$color-success-light};\n --color-success-dark: #{$color-success-dark};\n\n --color-warning: #{$color-warning};\n --color-warning-light: #{$color-warning-light};\n --color-warning-dark: #{$color-warning-dark};\n\n --color-error: #{$color-error};\n --color-error-light: #{$color-error-light};\n --color-error-dark: #{$color-error-dark};\n\n --color-info: #{$color-info};\n --color-info-light: #{$color-info-light};\n --color-info-dark: #{$color-info-dark};\n\n // Text Colors\n --color-text: #{$color-text};\n --color-text-muted: #{$color-text-muted};\n --color-text-light: #{$color-text-light};\n --color-text-inverse: #{$color-text-inverse};\n\n // Background Colors\n --color-bg: #{$color-bg};\n --color-bg-alt: #{$color-bg-alt};\n --color-bg-overlay: #{$color-bg-overlay};\n\n // Border Colors\n --color-border: #{$color-border};\n --color-border-light: #{$color-border-light};\n --color-border-dark: #{$color-border-dark};\n --color-border-focus: #{$color-border-focus};\n}\n","// ============================================================================\n// Spacing Tokens\n// ============================================================================\n\n// Base spacing unit: 4px (0.25rem)\n$spacing-base: 0.25rem; // 4px\n\n// Spacing scale (8px base system)\n$spacing-xs: 0.25rem; // 4px\n$spacing-sm: 0.5rem; // 8px\n$spacing-md: 1rem; // 16px\n$spacing-lg: 1.5rem; // 24px\n$spacing-xl: 2rem; // 32px\n$spacing-2xl: 3rem; // 48px\n$spacing-3xl: 4rem; // 64px\n$spacing-4xl: 6rem; // 96px\n$spacing-5xl: 8rem; // 128px\n\n// Export as CSS Custom Properties\n:root {\n --spacing-xs: #{$spacing-xs};\n --spacing-sm: #{$spacing-sm};\n --spacing-md: #{$spacing-md};\n --spacing-lg: #{$spacing-lg};\n --spacing-xl: #{$spacing-xl};\n --spacing-2xl: #{$spacing-2xl};\n --spacing-3xl: #{$spacing-3xl};\n --spacing-4xl: #{$spacing-4xl};\n --spacing-5xl: #{$spacing-5xl};\n}\n\n","// ============================================================================\n// Typography Tokens\n// ============================================================================\n\n// Font Families\n$font-family-base: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n$font-family-mono: \"SF Mono\", Monaco, \"Cascadia Code\", \"Roboto Mono\", Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n$font-family-serif: Georgia, \"Times New Roman\", Times, serif;\n\n// Font Sizes (Modular Scale: 1.125, 1.25, 1.5, 1.875, 2.25)\n$font-size-xs: 0.75rem; // 12px\n$font-size-sm: 0.875rem; // 14px\n$font-size-base: 1rem; // 16px\n$font-size-lg: 1.125rem; // 18px\n$font-size-xl: 1.25rem; // 20px\n$font-size-2xl: 1.5rem; // 24px\n$font-size-3xl: 1.875rem; // 30px\n$font-size-4xl: 2.25rem; // 36px\n$font-size-5xl: 3rem; // 48px\n$font-size-6xl: 3.75rem; // 60px\n\n// Line Heights\n$line-height-none: 1;\n$line-height-tight: 1.25;\n$line-height-snug: 1.375;\n$line-height-base: 1.5;\n$line-height-relaxed: 1.75;\n$line-height-loose: 2;\n\n// Font Weights\n$font-weight-light: 300;\n$font-weight-normal: 400;\n$font-weight-medium: 500;\n$font-weight-semibold: 600;\n$font-weight-bold: 700;\n$font-weight-extrabold: 800;\n\n// Letter Spacing\n$letter-spacing-tighter: -0.05em;\n$letter-spacing-tight: -0.025em;\n$letter-spacing-normal: 0;\n$letter-spacing-wide: 0.025em;\n$letter-spacing-wider: 0.05em;\n$letter-spacing-widest: 0.1em;\n\n// Export as CSS Custom Properties\n:root {\n // Font Families\n --font-family-base: #{$font-family-base};\n --font-family-mono: #{$font-family-mono};\n --font-family-serif: #{$font-family-serif};\n\n // Font Sizes\n --font-size-xs: #{$font-size-xs};\n --font-size-sm: #{$font-size-sm};\n --font-size-base: #{$font-size-base};\n --font-size-lg: #{$font-size-lg};\n --font-size-xl: #{$font-size-xl};\n --font-size-2xl: #{$font-size-2xl};\n --font-size-3xl: #{$font-size-3xl};\n --font-size-4xl: #{$font-size-4xl};\n --font-size-5xl: #{$font-size-5xl};\n --font-size-6xl: #{$font-size-6xl};\n\n // Line Heights\n --line-height-none: #{$line-height-none};\n --line-height-tight: #{$line-height-tight};\n --line-height-snug: #{$line-height-snug};\n --line-height-base: #{$line-height-base};\n --line-height-relaxed: #{$line-height-relaxed};\n --line-height-loose: #{$line-height-loose};\n\n // Font Weights\n --font-weight-light: #{$font-weight-light};\n --font-weight-normal: #{$font-weight-normal};\n --font-weight-medium: #{$font-weight-medium};\n --font-weight-semibold: #{$font-weight-semibold};\n --font-weight-bold: #{$font-weight-bold};\n --font-weight-extrabold: #{$font-weight-extrabold};\n\n // Letter Spacing\n --letter-spacing-tighter: #{$letter-spacing-tighter};\n --letter-spacing-tight: #{$letter-spacing-tight};\n --letter-spacing-normal: #{$letter-spacing-normal};\n --letter-spacing-wide: #{$letter-spacing-wide};\n --letter-spacing-wider: #{$letter-spacing-wider};\n --letter-spacing-widest: #{$letter-spacing-widest};\n}\n\n","// ============================================================================\n// Border Tokens (Technical Design - Max 4px Radius)\n// ============================================================================\n\n// Border Widths\n$border-width-none: 0;\n$border-width-thin: 1px;\n$border-width-base: 2px;\n$border-width-thick: 4px;\n\n// Border Radius (Technical - Max 4px)\n$border-radius-none: 0;\n$border-radius-sm: 2px;\n$border-radius-md: 4px;\n$border-radius-lg: 4px; // Max 4px\n$border-radius-xl: 4px; // Max 4px\n$border-radius-2xl: 4px; // Max 4px\n$border-radius-full: 9999px; // Keep for special cases like switches\n\n// Export as CSS Custom Properties\n:root {\n // Border Widths\n --border-width-none: #{$border-width-none};\n --border-width-thin: #{$border-width-thin};\n --border-width-base: #{$border-width-base};\n --border-width-thick: #{$border-width-thick};\n\n // Border Radius (Technical)\n --border-radius-none: #{$border-radius-none};\n --border-radius-sm: #{$border-radius-sm};\n --border-radius-md: #{$border-radius-md};\n --border-radius-lg: #{$border-radius-lg};\n --border-radius-xl: #{$border-radius-xl};\n --border-radius-2xl: #{$border-radius-2xl};\n --border-radius-full: #{$border-radius-full};\n}\n","// ============================================================================\n// Shadow Tokens (Elevation System)\n// ============================================================================\n\n// Box Shadows\n$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n$shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);\n$shadow-none: none;\n\n// Export as CSS Custom Properties\n:root {\n --shadow-sm: #{$shadow-sm};\n --shadow-md: #{$shadow-md};\n --shadow-lg: #{$shadow-lg};\n --shadow-xl: #{$shadow-xl};\n --shadow-2xl: #{$shadow-2xl};\n --shadow-inner: #{$shadow-inner};\n --shadow-none: #{$shadow-none};\n}\n\n","// ============================================================================\n// Z-Index Tokens (Layer System)\n// ============================================================================\n\n// Z-Index Layers\n$z-index-base: 0;\n$z-index-dropdown: 9999; // Immer im Vordergrund\n$z-index-sticky: 1020;\n$z-index-fixed: 1030;\n$z-index-modal-backdrop: 1040;\n$z-index-modal: 1050;\n$z-index-popover: 1060;\n$z-index-tooltip: 1070;\n\n// Export as CSS Custom Properties\n:root {\n --z-index-base: #{$z-index-base};\n --z-index-dropdown: #{$z-index-dropdown};\n --z-index-sticky: #{$z-index-sticky};\n --z-index-fixed: #{$z-index-fixed};\n --z-index-modal-backdrop: #{$z-index-modal-backdrop};\n --z-index-modal: #{$z-index-modal};\n --z-index-popover: #{$z-index-popover};\n --z-index-tooltip: #{$z-index-tooltip};\n}\n\n","// ============================================================================\n// Transition Tokens (Mechanical, Linear)\n// ============================================================================\n\n// Transition Durations (shorter, mechanical)\n$transition-duration-fast: 100ms;\n$transition-duration-base: 150ms;\n$transition-duration-slow: 200ms;\n$transition-duration-slower: 300ms;\n\n// Transition Timing Functions (all linear - mechanical)\n$transition-ease-linear: linear;\n$transition-ease-in: linear;\n$transition-ease-out: linear;\n$transition-ease-in-out: linear;\n\n// Common Transitions (all linear)\n$transition-base: all $transition-duration-base $transition-ease-linear;\n$transition-colors: color $transition-duration-base $transition-ease-linear, background-color $transition-duration-base $transition-ease-linear, border-color $transition-duration-base $transition-ease-linear;\n$transition-opacity: opacity $transition-duration-base $transition-ease-linear;\n$transition-transform: transform $transition-duration-base $transition-ease-linear;\n\n// Export as CSS Custom Properties\n:root {\n // Durations\n --transition-duration-fast: #{$transition-duration-fast};\n --transition-duration-base: #{$transition-duration-base};\n --transition-duration-slow: #{$transition-duration-slow};\n --transition-duration-slower: #{$transition-duration-slower};\n\n // Timing Functions (all linear)\n --transition-ease-linear: #{$transition-ease-linear};\n --transition-ease-in: #{$transition-ease-in};\n --transition-ease-out: #{$transition-ease-out};\n --transition-ease-in-out: #{$transition-ease-in-out};\n\n // Common Transitions\n --transition-base: #{$transition-base};\n --transition-colors: #{$transition-colors};\n --transition-opacity: #{$transition-opacity};\n --transition-transform: #{$transition-transform};\n}\n","// ============================================================================\n// Form Tokens\n// ============================================================================\n\n@use 'spacing' as *;\n@use 'colors' as *;\n@use 'typography' as *;\n@use 'borders' as *;\n@use 'transitions' as *;\n\n// Form Input Tokens\n$form-input-padding-x: $spacing-md;\n$form-input-padding-y: $spacing-sm;\n$form-input-padding-x-sm: $spacing-sm;\n$form-input-padding-y-sm: $spacing-xs;\n$form-input-padding-x-lg: $spacing-lg;\n$form-input-padding-y-lg: $spacing-md;\n\n$form-input-border-width: $border-width-thin;\n$form-input-border-radius: $border-radius-md;\n$form-input-font-size: $font-size-base;\n$form-input-font-size-sm: $font-size-sm;\n$form-input-font-size-lg: $font-size-lg;\n$form-input-line-height: $line-height-base;\n\n$form-input-bg: $color-bg;\n$form-input-bg-disabled: $color-bg-alt;\n$form-input-color: $color-text;\n$form-input-border: $color-border;\n$form-input-border-focus: $color-border-focus;\n$form-input-placeholder-color: $color-text-muted;\n\n$form-input-focus-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);\n$form-input-focus-shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.1);\n$form-input-focus-shadow-success: 0 0 0 3px rgba(16, 185, 129, 0.1);\n\n$form-input-opacity-disabled: 0.6;\n\n// Form Label Tokens\n$form-label-font-size: $font-size-sm;\n$form-label-font-weight: $font-weight-medium;\n$form-label-color: $color-text;\n$form-label-margin-bottom: $spacing-xs;\n\n// Form Helper/Error Tokens\n$form-helper-font-size: $font-size-xs;\n$form-helper-color: $color-text-muted;\n$form-error-color: $color-error;\n$form-error-font-size: $font-size-xs;\n$form-helper-margin-top: $spacing-xs;\n\n// Form Group Tokens\n$form-group-margin-bottom: $spacing-md;\n\n// Checkbox & Radio Tokens\n$form-checkbox-size: 1.25rem;\n$form-checkbox-margin-right: $spacing-sm;\n$form-checkbox-accent-color: $color-primary;\n$form-checkbox-opacity-disabled: 0.6;\n\n// Switch Tokens\n$form-switch-width: 3rem;\n$form-switch-height: 1.5rem;\n$form-switch-slider-size: 1.25rem;\n$form-switch-slider-offset: 0.125rem;\n$form-switch-slider-translate: 1.5rem;\n$form-switch-bg: $color-gray-300;\n$form-switch-bg-active: $color-primary;\n$form-switch-slider-bg: #ffffff;\n$form-switch-focus-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);\n$form-switch-opacity-disabled: 0.6;\n\n// Textarea Tokens\n$form-textarea-min-height: 100px;\n$form-textarea-resize: vertical;\n\n// Range Tokens\n$form-range-height: 0.5rem;\n$form-range-thumb-size: 1.25rem;\n$form-range-bg: $color-gray-200;\n$form-range-thumb-bg: $color-primary;\n\n// File Input Tokens\n$form-file-input-padding: $spacing-sm;\n$form-file-input-font-size: $font-size-sm;\n$form-file-input-border-style: dashed;\n$form-file-input-bg: $color-bg-alt;\n$form-file-input-bg-hover: $color-bg;\n\n// Export as CSS Custom Properties\n:root {\n // Form Input\n --form-input-padding-x: #{$form-input-padding-x};\n --form-input-padding-y: #{$form-input-padding-y};\n --form-input-padding-x-sm: #{$form-input-padding-x-sm};\n --form-input-padding-y-sm: #{$form-input-padding-y-sm};\n --form-input-padding-x-lg: #{$form-input-padding-x-lg};\n --form-input-padding-y-lg: #{$form-input-padding-y-lg};\n\n --form-input-border-width: #{$form-input-border-width};\n --form-input-border-radius: #{$form-input-border-radius};\n --form-input-font-size: #{$form-input-font-size};\n --form-input-font-size-sm: #{$form-input-font-size-sm};\n --form-input-font-size-lg: #{$form-input-font-size-lg};\n --form-input-line-height: #{$form-input-line-height};\n\n --form-input-bg: #{$form-input-bg};\n --form-input-bg-disabled: #{$form-input-bg-disabled};\n --form-input-color: #{$form-input-color};\n --form-input-border: #{$form-input-border};\n --form-input-border-focus: #{$form-input-border-focus};\n --form-input-placeholder-color: #{$form-input-placeholder-color};\n\n --form-input-focus-shadow: #{$form-input-focus-shadow};\n --form-input-focus-shadow-error: #{$form-input-focus-shadow-error};\n --form-input-focus-shadow-success: #{$form-input-focus-shadow-success};\n\n --form-input-opacity-disabled: #{$form-input-opacity-disabled};\n\n // Form Label\n --form-label-font-size: #{$form-label-font-size};\n --form-label-font-weight: #{$form-label-font-weight};\n --form-label-color: #{$form-label-color};\n --form-label-margin-bottom: #{$form-label-margin-bottom};\n\n // Form Helper/Error\n --form-helper-font-size: #{$form-helper-font-size};\n --form-helper-color: #{$form-helper-color};\n --form-error-color: #{$form-error-color};\n --form-error-font-size: #{$form-error-font-size};\n --form-helper-margin-top: #{$form-helper-margin-top};\n\n // Form Group\n --form-group-margin-bottom: #{$form-group-margin-bottom};\n\n // Checkbox & Radio\n --form-checkbox-size: #{$form-checkbox-size};\n --form-checkbox-margin-right: #{$form-checkbox-margin-right};\n --form-checkbox-accent-color: #{$form-checkbox-accent-color};\n --form-checkbox-opacity-disabled: #{$form-checkbox-opacity-disabled};\n\n // Switch\n --form-switch-width: #{$form-switch-width};\n --form-switch-height: #{$form-switch-height};\n --form-switch-slider-size: #{$form-switch-slider-size};\n --form-switch-slider-offset: #{$form-switch-slider-offset};\n --form-switch-slider-translate: #{$form-switch-slider-translate};\n --form-switch-bg: #{$form-switch-bg};\n --form-switch-bg-active: #{$form-switch-bg-active};\n --form-switch-slider-bg: #{$form-switch-slider-bg};\n --form-switch-focus-shadow: #{$form-switch-focus-shadow};\n --form-switch-opacity-disabled: #{$form-switch-opacity-disabled};\n\n // Textarea\n --form-textarea-min-height: #{$form-textarea-min-height};\n --form-textarea-resize: #{$form-textarea-resize};\n\n // Range\n --form-range-height: #{$form-range-height};\n --form-range-thumb-size: #{$form-range-thumb-size};\n --form-range-bg: #{$form-range-bg};\n --form-range-thumb-bg: #{$form-range-thumb-bg};\n\n // File Input\n --form-file-input-padding: #{$form-file-input-padding};\n --form-file-input-font-size: #{$form-file-input-font-size};\n --form-file-input-border-style: #{$form-file-input-border-style};\n --form-file-input-bg: #{$form-file-input-bg};\n --form-file-input-bg-hover: #{$form-file-input-bg-hover};\n}\n","// ============================================================================\n// Glassmorphism Tokens (Technical Glass Design)\n// ============================================================================\n\n// Glass Background Colors (milky, desaturated)\n$glass-bg-light: rgba(255, 255, 255, 0.05);\n$glass-bg-medium: rgba(255, 255, 255, 0.08);\n$glass-bg-heavy: rgba(255, 255, 255, 0.12);\n$glass-bg-etched: rgba(255, 255, 255, 0.15); // For table headers (etched glass)\n\n// Backdrop Blur (subtle, reduced)\n$glass-blur-sm: 2px;\n$glass-blur-md: 4px;\n$glass-blur-lg: 6px;\n$glass-blur-xl: 8px;\n\n// Glass Borders (cool, slightly bright on dark ground)\n$glass-border-light: rgba(255, 255, 255, 0.1);\n$glass-border-medium: rgba(255, 255, 255, 0.15);\n$glass-border-heavy: rgba(255, 255, 255, 0.2);\n\n// Glass Shadows (subtle gray, no colorful glows)\n$glass-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);\n$glass-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.15);\n$glass-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.2);\n\n// Technical Border Radius (max 4px)\n$tech-border-radius-none: 0;\n$tech-border-radius-sm: 2px;\n$tech-border-radius-md: 4px;\n\n// Export as CSS Custom Properties\n:root {\n // Glass Backgrounds\n --glass-bg-light: #{$glass-bg-light};\n --glass-bg-medium: #{$glass-bg-medium};\n --glass-bg-heavy: #{$glass-bg-heavy};\n --glass-bg-etched: #{$glass-bg-etched};\n\n // Backdrop Blur\n --glass-blur-sm: #{$glass-blur-sm};\n --glass-blur-md: #{$glass-blur-md};\n --glass-blur-lg: #{$glass-blur-lg};\n --glass-blur-xl: #{$glass-blur-xl};\n\n // Glass Borders\n --glass-border-light: #{$glass-border-light};\n --glass-border-medium: #{$glass-border-medium};\n --glass-border-heavy: #{$glass-border-heavy};\n\n // Glass Shadows\n --glass-shadow-sm: #{$glass-shadow-sm};\n --glass-shadow-md: #{$glass-shadow-md};\n --glass-shadow-lg: #{$glass-shadow-lg};\n\n // Technical Border Radius\n --tech-border-radius-none: #{$tech-border-radius-none};\n --tech-border-radius-sm: #{$tech-border-radius-sm};\n --tech-border-radius-md: #{$tech-border-radius-md};\n}\n","// ============================================================================\n// CSS Reset\n// ============================================================================\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nhtml {\n -webkit-text-size-adjust: 100%;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n}\n\nbody {\n margin: 0;\n padding: 0;\n}\n\n","// ============================================================================\n// Normalize.css-inspired Browser Normalization\n// ============================================================================\n\n// Document\nhtml {\n line-height: 1.15;\n -webkit-text-size-adjust: 100%;\n}\n\n// Sections\nbody {\n margin: 0;\n}\n\n// Grouping content\nhr {\n box-sizing: content-box;\n height: 0;\n overflow: visible;\n}\n\npre {\n font-family: monospace, monospace;\n font-size: 1em;\n}\n\n// Text-level semantics\nabbr[title] {\n border-bottom: none;\n text-decoration: underline;\n text-decoration: underline dotted;\n}\n\nb,\nstrong {\n font-weight: bolder;\n}\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace;\n font-size: 1em;\n}\n\nsmall {\n font-size: 80%;\n}\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n// Embedded content\nimg {\n border-style: none;\n max-width: 100%;\n height: auto;\n display: block;\n}\n\nsvg:not(:root) {\n overflow: hidden;\n}\n\n// Forms\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit;\n font-size: 100%;\n line-height: 1.15;\n margin: 0;\n}\n\nbutton,\ninput {\n overflow: visible;\n}\n\nbutton,\nselect {\n text-transform: none;\n}\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\nlegend {\n box-sizing: border-box;\n color: inherit;\n display: table;\n max-width: 100%;\n padding: 0;\n white-space: normal;\n}\n\nprogress {\n vertical-align: baseline;\n}\n\ntextarea {\n overflow: auto;\n}\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box;\n padding: 0;\n}\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n[type=\"search\"] {\n -webkit-appearance: textfield;\n outline-offset: -2px;\n}\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n font: inherit;\n}\n\n// Interactive\ndetails {\n display: block;\n}\n\nsummary {\n display: list-item;\n}\n\n// Misc\ntemplate {\n display: none;\n}\n\n[hidden] {\n display: none;\n}\n\n","// ============================================================================\n// Base Styles (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n// Root Element\n:root {\n font-size: 16px; // Base font size for rem calculations\n}\n\n// Body (Dark Graphite, Desaturated)\nbody {\n font-family: var(--font-family-base);\n font-size: var(--font-size-base);\n line-height: var(--line-height-base);\n color: var(--color-text);\n background-color: var(--color-bg);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n min-height: 100vh;\n}\n\n// Headings (High Contrast)\nh1, h2, h3, h4, h5, h6 {\n margin: 0;\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-text);\n}\n\nh1 {\n font-size: var(--font-size-4xl);\n}\n\nh2 {\n font-size: var(--font-size-3xl);\n}\n\nh3 {\n font-size: var(--font-size-2xl);\n}\n\nh4 {\n font-size: var(--font-size-xl);\n}\n\nh5 {\n font-size: var(--font-size-lg);\n}\n\nh6 {\n font-size: var(--font-size-base);\n}\n\n// Paragraphs\np {\n margin: 0;\n line-height: var(--line-height-base);\n color: var(--color-text);\n}\n\n// Links\na {\n color: var(--color-accent);\n text-decoration: none;\n transition: var(--transition-colors);\n\n &:hover {\n color: var(--color-accent-light);\n }\n\n &:focus {\n outline: 1px solid var(--color-border-focus);\n outline-offset: 2px;\n }\n}\n\n// Lists\nul, ol {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n// Images\nimg {\n max-width: 100%;\n height: auto;\n display: block;\n}\n\n// Horizontal Rule\nhr {\n border: 0;\n border-top: 1px solid var(--color-border);\n margin: var(--spacing-lg) 0;\n}\n\n// Code (Technical Style, Monospace)\ncode {\n font-family: var(--font-family-mono);\n font-size: 0.875em;\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n border: 1px solid var(--glass-border-light);\n padding: 0.125em 0.25em;\n border-radius: var(--tech-border-radius-sm);\n color: var(--color-text);\n}\n\npre {\n font-family: var(--font-family-mono);\n font-size: var(--font-size-sm);\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n border: 1px solid var(--glass-border-medium);\n padding: var(--spacing-md);\n border-radius: var(--tech-border-radius-md);\n overflow-x: auto;\n color: var(--color-text);\n\n code {\n background-color: transparent;\n padding: 0;\n border: none;\n }\n}\n\n// Blockquote\nblockquote {\n margin: 0;\n padding-left: var(--spacing-lg);\n border-left: var(--border-width-base) solid var(--color-border);\n color: var(--color-text-muted);\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n padding: var(--spacing-md);\n border-radius: var(--tech-border-radius-md);\n}\n\n// Tables (basic)\ntable {\n width: 100%;\n border-collapse: collapse;\n}\n\n// Buttons (reset)\nbutton {\n background: none;\n border: none;\n padding: 0;\n font: inherit;\n cursor: pointer;\n color: inherit;\n}\n\n// Inputs (reset)\ninput,\nselect,\ntextarea {\n font: inherit;\n color: inherit;\n}\n\n// Focus styles (accessibility)\n*:focus {\n outline: 1px solid var(--color-border-focus);\n outline-offset: 2px;\n}\n\n*:focus:not(:focus-visible) {\n outline: none;\n}\n\n*:focus-visible {\n outline: 1px solid var(--color-border-focus);\n outline-offset: 2px;\n}\n","// ============================================================================\n// Container\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-container {\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n\n // Small devices (landscape phones, 640px and up)\n @media (min-width: 640px) {\n max-width: 640px;\n }\n\n // Medium devices (tablets, 768px and up)\n @media (min-width: 768px) {\n max-width: 768px;\n }\n\n // Large devices (desktops, 1024px and up)\n @media (min-width: 1024px) {\n max-width: 1024px;\n }\n\n // Extra large devices (large desktops, 1280px and up)\n @media (min-width: 1280px) {\n max-width: 1280px;\n }\n\n // 2X Large devices (larger desktops, 1536px and up)\n @media (min-width: 1536px) {\n max-width: 1536px;\n }\n}\n\n.bl-container-fluid {\n width: 100%;\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n}\n\n","// ============================================================================\n// Flexbox 12-Column Grid System\n// ============================================================================\n\n@use 'sass:math';\n@use '../tokens/tokens' as *;\n\n// Row\n.bl-row {\n display: flex;\n flex-wrap: wrap;\n margin-left: calc(var(--spacing-md) * -1);\n margin-right: calc(var(--spacing-md) * -1);\n}\n\n// Column Base\n.bl-col {\n flex: 1 0 0%;\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n}\n\n// Column Sizes (1-12)\n@for $i from 1 through 12 {\n .bl-col-#{$i} {\n flex: 0 0 auto;\n width: math.percentage(math.div($i, 12));\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n}\n\n// Responsive Breakpoints\n// Small (sm: 640px)\n@media (min-width: 640px) {\n .bl-col-sm {\n flex: 1 0 0%;\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n\n @for $i from 1 through 12 {\n .bl-col-sm-#{$i} {\n flex: 0 0 auto;\n width: math.percentage(math.div($i, 12));\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n }\n}\n\n// Medium (md: 768px)\n@media (min-width: 768px) {\n .bl-col-md {\n flex: 1 0 0%;\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n\n @for $i from 1 through 12 {\n .bl-col-md-#{$i} {\n flex: 0 0 auto;\n width: math.percentage(math.div($i, 12));\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n }\n}\n\n// Large (lg: 1024px)\n@media (min-width: 1024px) {\n .bl-col-lg {\n flex: 1 0 0%;\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n\n @for $i from 1 through 12 {\n .bl-col-lg-#{$i} {\n flex: 0 0 auto;\n width: math.percentage(math.div($i, 12));\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n }\n}\n\n// Extra Large (xl: 1280px)\n@media (min-width: 1280px) {\n .bl-col-xl {\n flex: 1 0 0%;\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n\n @for $i from 1 through 12 {\n .bl-col-xl-#{$i} {\n flex: 0 0 auto;\n width: math.percentage(math.div($i, 12));\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n }\n}\n\n// 2X Large (2xl: 1536px)\n@media (min-width: 1536px) {\n .bl-col-2xl {\n flex: 1 0 0%;\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n\n @for $i from 1 through 12 {\n .bl-col-2xl-#{$i} {\n flex: 0 0 auto;\n width: math.percentage(math.div($i, 12));\n padding-left: var(--spacing-md);\n padding-right: var(--spacing-md);\n }\n }\n}\n\n","// ============================================================================\n// CSS Grid Utilities\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n// Base Grid\n.bl-grid {\n display: grid;\n gap: var(--spacing-md);\n}\n\n// Grid Columns (1-12)\n@for $i from 1 through 12 {\n .bl-grid-cols-#{$i} {\n grid-template-columns: repeat(#{$i}, minmax(0, 1fr));\n }\n}\n\n// Grid Rows (1-12)\n@for $i from 1 through 12 {\n .bl-grid-rows-#{$i} {\n grid-template-rows: repeat(#{$i}, minmax(0, 1fr));\n }\n}\n\n// Gap Utilities\n.bl-gap-xs {\n gap: var(--spacing-xs);\n}\n\n.bl-gap-sm {\n gap: var(--spacing-sm);\n}\n\n.bl-gap-md {\n gap: var(--spacing-md);\n}\n\n.bl-gap-lg {\n gap: var(--spacing-lg);\n}\n\n.bl-gap-xl {\n gap: var(--spacing-xl);\n}\n\n.bl-gap-2xl {\n gap: var(--spacing-2xl);\n}\n\n// Column Gap\n.bl-gap-x-xs {\n column-gap: var(--spacing-xs);\n}\n\n.bl-gap-x-sm {\n column-gap: var(--spacing-sm);\n}\n\n.bl-gap-x-md {\n column-gap: var(--spacing-md);\n}\n\n.bl-gap-x-lg {\n column-gap: var(--spacing-lg);\n}\n\n.bl-gap-x-xl {\n column-gap: var(--spacing-xl);\n}\n\n.bl-gap-x-2xl {\n column-gap: var(--spacing-2xl);\n}\n\n// Row Gap\n.bl-gap-y-xs {\n row-gap: var(--spacing-xs);\n}\n\n.bl-gap-y-sm {\n row-gap: var(--spacing-sm);\n}\n\n.bl-gap-y-md {\n row-gap: var(--spacing-md);\n}\n\n.bl-gap-y-lg {\n row-gap: var(--spacing-lg);\n}\n\n.bl-gap-y-xl {\n row-gap: var(--spacing-xl);\n}\n\n.bl-gap-y-2xl {\n row-gap: var(--spacing-2xl);\n}\n\n// Grid Column Span\n@for $i from 1 through 12 {\n .bl-col-span-#{$i} {\n grid-column: span #{$i} / span #{$i};\n }\n}\n\n// Grid Row Span\n@for $i from 1 through 12 {\n .bl-row-span-#{$i} {\n grid-row: span #{$i} / span #{$i};\n }\n}\n\n// Auto Flow\n.bl-grid-flow-row {\n grid-auto-flow: row;\n}\n\n.bl-grid-flow-col {\n grid-auto-flow: column;\n}\n\n.bl-grid-flow-dense {\n grid-auto-flow: dense;\n}\n\n","// ============================================================================\n// Flexbox Utilities\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n// Display\n.bl-flex {\n display: flex;\n}\n\n.bl-inline-flex {\n display: inline-flex;\n}\n\n// Direction\n.bl-flex-row {\n flex-direction: row;\n}\n\n.bl-flex-row-reverse {\n flex-direction: row-reverse;\n}\n\n.bl-flex-col {\n flex-direction: column;\n}\n\n.bl-flex-col-reverse {\n flex-direction: column-reverse;\n}\n\n// Wrap\n.bl-flex-wrap {\n flex-wrap: wrap;\n}\n\n.bl-flex-nowrap {\n flex-wrap: nowrap;\n}\n\n.bl-flex-wrap-reverse {\n flex-wrap: wrap-reverse;\n}\n\n// Justify Content\n.bl-justify-start {\n justify-content: flex-start;\n}\n\n.bl-justify-end {\n justify-content: flex-end;\n}\n\n.bl-justify-center {\n justify-content: center;\n}\n\n.bl-justify-between {\n justify-content: space-between;\n}\n\n.bl-justify-around {\n justify-content: space-around;\n}\n\n.bl-justify-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items\n.bl-items-start {\n align-items: flex-start;\n}\n\n.bl-items-end {\n align-items: flex-end;\n}\n\n.bl-items-center {\n align-items: center;\n}\n\n.bl-items-baseline {\n align-items: baseline;\n}\n\n.bl-items-stretch {\n align-items: stretch;\n}\n\n// Align Self\n.bl-self-auto {\n align-self: auto;\n}\n\n.bl-self-start {\n align-self: flex-start;\n}\n\n.bl-self-end {\n align-self: flex-end;\n}\n\n.bl-self-center {\n align-self: center;\n}\n\n.bl-self-stretch {\n align-self: stretch;\n}\n\n.bl-self-baseline {\n align-self: baseline;\n}\n\n// Align Content\n.bl-content-start {\n align-content: flex-start;\n}\n\n.bl-content-end {\n align-content: flex-end;\n}\n\n.bl-content-center {\n align-content: center;\n}\n\n.bl-content-between {\n align-content: space-between;\n}\n\n.bl-content-around {\n align-content: space-around;\n}\n\n.bl-content-stretch {\n align-content: stretch;\n}\n\n// Flex Grow/Shrink\n.bl-flex-1 {\n flex: 1 1 0%;\n}\n\n.bl-flex-auto {\n flex: 1 1 auto;\n}\n\n.bl-flex-initial {\n flex: 0 1 auto;\n}\n\n.bl-flex-none {\n flex: none;\n}\n\n.bl-grow {\n flex-grow: 1;\n}\n\n.bl-grow-0 {\n flex-grow: 0;\n}\n\n.bl-shrink {\n flex-shrink: 1;\n}\n\n.bl-shrink-0 {\n flex-shrink: 0;\n}\n\n","// ============================================================================\n// Spacing Utilities\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n// Spacing sizes\n$spacing-sizes: (\n 'xs': var(--spacing-xs),\n 'sm': var(--spacing-sm),\n 'md': var(--spacing-md),\n 'lg': var(--spacing-lg),\n 'xl': var(--spacing-xl),\n '2xl': var(--spacing-2xl),\n '3xl': var(--spacing-3xl),\n '0': 0,\n 'auto': auto\n);\n\n// Margin Utilities\n@each $name, $value in $spacing-sizes {\n .m-#{$name} {\n margin: #{$value};\n }\n\n .mt-#{$name} {\n margin-top: #{$value};\n }\n\n .mr-#{$name} {\n margin-right: #{$value};\n }\n\n .mb-#{$name} {\n margin-bottom: #{$value};\n }\n\n .ml-#{$name} {\n margin-left: #{$value};\n }\n\n .mx-#{$name} {\n margin-left: #{$value};\n margin-right: #{$value};\n }\n\n .my-#{$name} {\n margin-top: #{$value};\n margin-bottom: #{$value};\n }\n}\n\n// Padding Utilities\n@each $name, $value in $spacing-sizes {\n @if $name != 'auto' {\n .p-#{$name} {\n padding: #{$value};\n }\n\n .pt-#{$name} {\n padding-top: #{$value};\n }\n\n .pr-#{$name} {\n padding-right: #{$value};\n }\n\n .pb-#{$name} {\n padding-bottom: #{$value};\n }\n\n .pl-#{$name} {\n padding-left: #{$value};\n }\n\n .px-#{$name} {\n padding-left: #{$value};\n padding-right: #{$value};\n }\n\n .py-#{$name} {\n padding-top: #{$value};\n padding-bottom: #{$value};\n }\n }\n}\n\n","// ============================================================================\n// Display Utilities\n// ============================================================================\n\n.bl-d-none {\n display: none;\n}\n\n.bl-d-inline {\n display: inline;\n}\n\n.bl-d-inline-block {\n display: inline-block;\n}\n\n.bl-d-block {\n display: block;\n}\n\n.bl-d-table {\n display: table;\n}\n\n.bl-d-table-row {\n display: table-row;\n}\n\n.bl-d-table-cell {\n display: table-cell;\n}\n\n.bl-d-flex {\n display: flex;\n}\n\n.bl-d-inline-flex {\n display: inline-flex;\n}\n\n.bl-d-grid {\n display: grid;\n}\n\n.bl-d-inline-grid {\n display: inline-grid;\n}\n\n// Responsive Display Utilities\n@media (min-width: 640px) {\n .bl-d-sm-none { display: none; }\n .bl-d-sm-inline { display: inline; }\n .bl-d-sm-inline-block { display: inline-block; }\n .bl-d-sm-block { display: block; }\n .bl-d-sm-flex { display: flex; }\n .bl-d-sm-inline-flex { display: inline-flex; }\n .bl-d-sm-grid { display: grid; }\n}\n\n@media (min-width: 768px) {\n .bl-d-md-none { display: none; }\n .bl-d-md-inline { display: inline; }\n .bl-d-md-inline-block { display: inline-block; }\n .bl-d-md-block { display: block; }\n .bl-d-md-flex { display: flex; }\n .bl-d-md-inline-flex { display: inline-flex; }\n .bl-d-md-grid { display: grid; }\n}\n\n@media (min-width: 1024px) {\n .bl-d-lg-none { display: none; }\n .bl-d-lg-inline { display: inline; }\n .bl-d-lg-inline-block { display: inline-block; }\n .bl-d-lg-block { display: block; }\n .bl-d-lg-flex { display: flex; }\n .bl-d-lg-inline-flex { display: inline-flex; }\n .bl-d-lg-grid { display: grid; }\n}\n\n@media (min-width: 1280px) {\n .bl-d-xl-none { display: none; }\n .bl-d-xl-inline { display: inline; }\n .bl-d-xl-inline-block { display: inline-block; }\n .bl-d-xl-block { display: block; }\n .bl-d-xl-flex { display: flex; }\n .bl-d-xl-inline-flex { display: inline-flex; }\n .bl-d-xl-grid { display: grid; }\n}\n\n","// ============================================================================\n// Text Utilities\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n// Text Alignment\n.bl-text-left {\n text-align: left;\n}\n\n.bl-text-center {\n text-align: center;\n}\n\n.bl-text-right {\n text-align: right;\n}\n\n.bl-text-justify {\n text-align: justify;\n}\n\n// Text Size\n.bl-text-xs {\n font-size: var(--font-size-xs);\n}\n\n.bl-text-sm {\n font-size: var(--font-size-sm);\n}\n\n.bl-text-base {\n font-size: var(--font-size-base);\n}\n\n.bl-text-lg {\n font-size: var(--font-size-lg);\n}\n\n.bl-text-xl {\n font-size: var(--font-size-xl);\n}\n\n.bl-text-2xl {\n font-size: var(--font-size-2xl);\n}\n\n.bl-text-3xl {\n font-size: var(--font-size-3xl);\n}\n\n.bl-text-4xl {\n font-size: var(--font-size-4xl);\n}\n\n.bl-text-5xl {\n font-size: var(--font-size-5xl);\n}\n\n.bl-text-6xl {\n font-size: var(--font-size-6xl);\n}\n\n// Font Weight\n.bl-font-light {\n font-weight: var(--font-weight-light);\n}\n\n.bl-font-normal {\n font-weight: var(--font-weight-normal);\n}\n\n.bl-font-medium {\n font-weight: var(--font-weight-medium);\n}\n\n.bl-font-semibold {\n font-weight: var(--font-weight-semibold);\n}\n\n.bl-font-bold {\n font-weight: var(--font-weight-bold);\n}\n\n.bl-font-extrabold {\n font-weight: var(--font-weight-extrabold);\n}\n\n// Line Height\n.bl-leading-none {\n line-height: var(--line-height-none);\n}\n\n.bl-leading-tight {\n line-height: var(--line-height-tight);\n}\n\n.bl-leading-snug {\n line-height: var(--line-height-snug);\n}\n\n.bl-leading-base {\n line-height: var(--line-height-base);\n}\n\n.bl-leading-relaxed {\n line-height: var(--line-height-relaxed);\n}\n\n.bl-leading-loose {\n line-height: var(--line-height-loose);\n}\n\n// Text Transform\n.bl-uppercase {\n text-transform: uppercase;\n}\n\n.bl-lowercase {\n text-transform: lowercase;\n}\n\n.bl-capitalize {\n text-transform: capitalize;\n}\n\n.bl-normal-case {\n text-transform: none;\n}\n\n// Text Decoration\n.bl-underline {\n text-decoration: underline;\n}\n\n.bl-line-through {\n text-decoration: line-through;\n}\n\n.bl-no-underline {\n text-decoration: none;\n}\n\n// Letter Spacing\n.bl-tracking-tighter {\n letter-spacing: var(--letter-spacing-tighter);\n}\n\n.bl-tracking-tight {\n letter-spacing: var(--letter-spacing-tight);\n}\n\n.bl-tracking-normal {\n letter-spacing: var(--letter-spacing-normal);\n}\n\n.bl-tracking-wide {\n letter-spacing: var(--letter-spacing-wide);\n}\n\n.bl-tracking-wider {\n letter-spacing: var(--letter-spacing-wider);\n}\n\n.bl-tracking-widest {\n letter-spacing: var(--letter-spacing-widest);\n}\n\n// Text Color\n.bl-text-primary {\n color: var(--color-primary);\n}\n\n.bl-text-secondary {\n color: var(--color-secondary);\n}\n\n.bl-text-success {\n color: var(--color-success);\n}\n\n.bl-text-warning {\n color: var(--color-warning);\n}\n\n.bl-text-error {\n color: var(--color-error);\n}\n\n.bl-text-info {\n color: var(--color-info);\n}\n\n.bl-text-muted {\n color: var(--color-text-muted);\n}\n\n.bl-text-light {\n color: var(--color-text-light);\n}\n\n.bl-text-inverse {\n color: var(--color-text-inverse);\n}\n\n// Font Family\n.bl-font-sans {\n font-family: var(--font-family-base);\n}\n\n.bl-font-mono {\n font-family: var(--font-family-mono);\n}\n\n.bl-font-serif {\n font-family: var(--font-family-serif);\n}\n\n// Text Overflow\n.bl-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.bl-text-ellipsis {\n text-overflow: ellipsis;\n}\n\n.bl-text-clip {\n text-overflow: clip;\n}\n\n// White Space\n.bl-whitespace-normal {\n white-space: normal;\n}\n\n.bl-whitespace-nowrap {\n white-space: nowrap;\n}\n\n.bl-whitespace-pre {\n white-space: pre;\n}\n\n.bl-whitespace-pre-line {\n white-space: pre-line;\n}\n\n.bl-whitespace-pre-wrap {\n white-space: pre-wrap;\n}\n\n","// ============================================================================\n// Visibility Utilities\n// ============================================================================\n\n.bl-visible {\n visibility: visible;\n}\n\n.bl-invisible {\n visibility: hidden;\n}\n\n// Opacity\n.bl-opacity-0 {\n opacity: 0;\n}\n\n.bl-opacity-25 {\n opacity: 0.25;\n}\n\n.bl-opacity-50 {\n opacity: 0.5;\n}\n\n.bl-opacity-75 {\n opacity: 0.75;\n}\n\n.bl-opacity-100 {\n opacity: 1;\n}\n\n// Overflow\n.bl-overflow-auto {\n overflow: auto;\n}\n\n.bl-overflow-hidden {\n overflow: hidden;\n}\n\n.bl-overflow-visible {\n overflow: visible;\n}\n\n.bl-overflow-scroll {\n overflow: scroll;\n}\n\n.bl-overflow-x-auto {\n overflow-x: auto;\n}\n\n.bl-overflow-x-hidden {\n overflow-x: hidden;\n}\n\n.bl-overflow-x-scroll {\n overflow-x: scroll;\n}\n\n.bl-overflow-y-auto {\n overflow-y: auto;\n}\n\n.bl-overflow-y-hidden {\n overflow-y: hidden;\n}\n\n.bl-overflow-y-scroll {\n overflow-y: scroll;\n}\n\n","// ============================================================================\n// Position Utilities\n// ============================================================================\n\n.bl-static {\n position: static;\n}\n\n.bl-fixed {\n position: fixed;\n}\n\n.bl-absolute {\n position: absolute;\n}\n\n.bl-relative {\n position: relative;\n}\n\n.bl-sticky {\n position: sticky;\n}\n\n// Top, Right, Bottom, Left\n.bl-top-0 {\n top: 0;\n}\n\n.bl-right-0 {\n right: 0;\n}\n\n.bl-bottom-0 {\n bottom: 0;\n}\n\n.bl-left-0 {\n left: 0;\n}\n\n.bl-top-auto {\n top: auto;\n}\n\n.bl-right-auto {\n right: auto;\n}\n\n.bl-bottom-auto {\n bottom: auto;\n}\n\n.bl-left-auto {\n left: auto;\n}\n\n// Insets\n.bl-inset-0 {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.bl-inset-auto {\n top: auto;\n right: auto;\n bottom: auto;\n left: auto;\n}\n\n// Z-Index\n.bl-z-0 {\n z-index: var(--z-index-base);\n}\n\n.bl-z-dropdown {\n z-index: var(--z-index-dropdown);\n}\n\n.bl-z-sticky {\n z-index: var(--z-index-sticky);\n}\n\n.bl-z-fixed {\n z-index: var(--z-index-fixed);\n}\n\n.bl-z-modal-backdrop {\n z-index: var(--z-index-modal-backdrop);\n}\n\n.bl-z-modal {\n z-index: var(--z-index-modal);\n}\n\n.bl-z-popover {\n z-index: var(--z-index-popover);\n}\n\n.bl-z-tooltip {\n z-index: var(--z-index-tooltip);\n}\n\n","// ============================================================================\n// Animation Utilities\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n// Transition\n.bl-transition {\n transition: var(--transition-base);\n}\n\n.bl-transition-colors {\n transition: var(--transition-colors);\n}\n\n.bl-transition-opacity {\n transition: var(--transition-opacity);\n}\n\n.bl-transition-transform {\n transition: var(--transition-transform);\n}\n\n.bl-transition-none {\n transition: none;\n}\n\n// Duration\n.bl-duration-fast {\n transition-duration: var(--transition-duration-fast);\n}\n\n.bl-duration-base {\n transition-duration: var(--transition-duration-base);\n}\n\n.bl-duration-slow {\n transition-duration: var(--transition-duration-slow);\n}\n\n.bl-duration-slower {\n transition-duration: var(--transition-duration-slower);\n}\n\n// Easing\n.bl-ease-linear {\n transition-timing-function: var(--transition-ease-linear);\n}\n\n.bl-ease-in {\n transition-timing-function: var(--transition-ease-in);\n}\n\n.bl-ease-out {\n transition-timing-function: var(--transition-ease-out);\n}\n\n.bl-ease-in-out {\n transition-timing-function: var(--transition-ease-in-out);\n}\n\n// Fade Animations\n@keyframes bl-fade-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes bl-fade-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n}\n\n.bl-fade-in {\n animation: bl-fade-in var(--transition-duration-base) var(--transition-ease-out);\n}\n\n.bl-fade-out {\n animation: bl-fade-out var(--transition-duration-base) var(--transition-ease-out);\n}\n\n// Slide Animations\n@keyframes bl-slide-up {\n from {\n transform: translateY(100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n@keyframes bl-slide-down {\n from {\n transform: translateY(-100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n@keyframes bl-slide-left {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n@keyframes bl-slide-right {\n from {\n transform: translateX(-100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n.bl-slide-up {\n animation: bl-slide-up var(--transition-duration-base) var(--transition-ease-out);\n}\n\n.bl-slide-down {\n animation: bl-slide-down var(--transition-duration-base) var(--transition-ease-out);\n}\n\n.bl-slide-left {\n animation: bl-slide-left var(--transition-duration-base) var(--transition-ease-out);\n}\n\n.bl-slide-right {\n animation: bl-slide-right var(--transition-duration-base) var(--transition-ease-out);\n}\n\n// Spin Animation\n@keyframes bl-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.bl-animate-spin {\n animation: bl-spin 1s linear infinite;\n}\n\n// Pulse Animation\n@keyframes bl-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n.bl-animate-pulse {\n animation: bl-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n","// ============================================================================\n// Accessibility Utilities\n// ============================================================================\n\n// Screen Reader Only\n.bl-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n\n.bl-sr-only-focusable:focus {\n position: static;\n width: auto;\n height: auto;\n padding: inherit;\n margin: inherit;\n overflow: visible;\n clip: auto;\n white-space: normal;\n}\n\n// Skip Link\n.bl-skip-link {\n position: absolute;\n top: -40px;\n left: 0;\n z-index: var(--z-index-tooltip);\n padding: var(--spacing-sm) var(--spacing-md);\n background-color: var(--color-primary);\n color: var(--color-text-inverse);\n text-decoration: none;\n border-radius: var(--border-radius-md);\n\n &:focus {\n top: var(--spacing-sm);\n outline: 2px solid var(--color-border-focus);\n outline-offset: 2px;\n }\n}\n\n// Focus Visible (for keyboard navigation)\n.bl-focus-visible:focus-visible {\n outline: 2px solid var(--color-border-focus);\n outline-offset: 2px;\n}\n\n// High Contrast Mode Support\n@media (prefers-contrast: high) {\n * {\n border-color: currentColor !important;\n }\n\n .bl-skip-link {\n border: 2px solid currentColor;\n }\n}\n\n// Reduced Motion\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\n","// ============================================================================\n// Button Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: var(--spacing-sm) var(--spacing-md);\n font-family: var(--font-family-base);\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-medium);\n line-height: var(--line-height-base);\n text-align: center;\n text-decoration: none;\n white-space: nowrap;\n vertical-align: middle;\n cursor: pointer;\n user-select: none;\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-sm);\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n transition: var(--transition-base);\n color: var(--color-text);\n\n &:focus {\n outline: 1px solid var(--color-border-focus);\n outline-offset: 2px;\n }\n\n &:disabled,\n &.bl-disabled {\n opacity: 0.6;\n cursor: not-allowed;\n pointer-events: none;\n }\n}\n\n// Button Sizes\n.bl-btn-sm {\n padding: var(--spacing-xs) var(--spacing-sm);\n font-size: var(--font-size-sm);\n}\n\n.bl-btn-lg {\n padding: var(--spacing-md) var(--spacing-lg);\n font-size: var(--font-size-lg);\n}\n\n// Button Variants\n.bl-btn-primary {\n background: var(--color-accent);\n color: var(--color-text-inverse);\n border-color: var(--color-accent);\n\n &:hover:not(:disabled):not(.bl-disabled) {\n background: var(--color-accent-dark);\n border-color: var(--color-accent-dark);\n }\n\n &:active:not(:disabled):not(.bl-disabled) {\n transform: translateY(1px); // Pressed effect\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n}\n\n.bl-btn-secondary {\n background: var(--glass-bg-medium);\n color: var(--color-text);\n border-color: var(--glass-border-medium);\n\n &:hover:not(:disabled):not(.bl-disabled) {\n background: var(--glass-bg-heavy);\n border-color: var(--glass-border-heavy);\n }\n\n &:active:not(:disabled):not(.bl-disabled) {\n transform: translateY(1px);\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n}\n\n.bl-btn-outline {\n background: transparent;\n color: var(--color-accent);\n border-color: var(--color-accent);\n\n &:hover:not(:disabled):not(.bl-disabled) {\n background: var(--glass-bg-light);\n border-color: var(--color-accent-light);\n }\n\n &:active:not(:disabled):not(.bl-disabled) {\n transform: translateY(1px);\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n}\n\n.bl-btn-ghost {\n background: transparent;\n color: var(--color-text);\n border-color: transparent;\n\n &:hover:not(:disabled):not(.bl-disabled) {\n background: var(--glass-bg-light);\n border-color: var(--glass-border-light);\n }\n\n &:active:not(:disabled):not(.bl-disabled) {\n transform: translateY(1px);\n }\n}\n\n.bl-btn-link {\n background: transparent;\n color: var(--color-accent);\n border-color: transparent;\n padding: 0;\n text-decoration: underline;\n\n &:hover:not(:disabled):not(.bl-disabled) {\n color: var(--color-accent-light);\n text-decoration: none;\n }\n}\n\n// Semantic Button Variants\n.bl-btn-success {\n background: var(--color-success);\n color: var(--color-text-inverse);\n border-color: var(--color-success);\n\n &:hover:not(:disabled):not(.bl-disabled) {\n background: var(--color-success-dark);\n border-color: var(--color-success-dark);\n }\n\n &:active:not(:disabled):not(.bl-disabled) {\n transform: translateY(1px);\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n}\n\n.bl-btn-warning {\n background: var(--color-warning);\n color: var(--color-text-inverse);\n border-color: var(--color-warning);\n\n &:hover:not(:disabled):not(.bl-disabled) {\n background: var(--color-warning-dark);\n border-color: var(--color-warning-dark);\n }\n\n &:active:not(:disabled):not(.bl-disabled) {\n transform: translateY(1px);\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n}\n\n.bl-btn-error {\n background: var(--color-error);\n color: var(--color-text-inverse);\n border-color: var(--color-error);\n\n &:hover:not(:disabled):not(.bl-disabled) {\n background: var(--color-error-dark);\n border-color: var(--color-error-dark);\n }\n\n &:active:not(:disabled):not(.bl-disabled) {\n transform: translateY(1px);\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n}\n\n.bl-btn-info {\n background: var(--color-info);\n color: var(--color-text-inverse);\n border-color: var(--color-info);\n\n &:hover:not(:disabled):not(.bl-disabled) {\n background: var(--color-info-dark);\n border-color: var(--color-info-dark);\n }\n\n &:active:not(:disabled):not(.bl-disabled) {\n transform: translateY(1px);\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n }\n}\n\n// Button Block (full width)\n.bl-btn-block {\n display: flex;\n width: 100%;\n}\n","// ============================================================================\n// Form Components (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n// Form Group\n.bl-form-group {\n margin-bottom: var(--form-group-margin-bottom);\n}\n\n.bl-form-label {\n display: block;\n margin-bottom: var(--form-label-margin-bottom);\n font-size: var(--form-label-font-size);\n font-weight: var(--form-label-font-weight);\n color: var(--color-text);\n}\n\n.bl-form-label-required::after {\n content: ' *';\n color: var(--form-error-color);\n}\n\n.bl-form-helper {\n display: block;\n margin-top: var(--form-helper-margin-top);\n font-size: var(--form-helper-font-size);\n color: var(--color-text-muted);\n}\n\n.bl-form-error {\n display: block;\n margin-top: var(--form-helper-margin-top);\n font-size: var(--form-error-font-size);\n color: var(--color-error);\n}\n\n// Input Base (Recessed Glass Windows)\n.bl-input,\n.bl-textarea {\n display: block;\n width: 100%;\n padding: var(--form-input-padding-y) var(--form-input-padding-x);\n font-family: var(--font-family-base);\n font-size: var(--form-input-font-size);\n line-height: var(--form-input-line-height);\n color: var(--color-text);\n background: var(--glass-bg-light);\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-sm);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n transition: var(--transition-base);\n\n &::placeholder {\n color: var(--color-text-muted);\n opacity: 1;\n font-style: normal; // Technical labeling style\n }\n\n &:focus {\n outline: none;\n border-width: 2px; // Sharper border, not brighter\n border-color: var(--color-accent);\n background: var(--glass-bg-medium);\n }\n\n &:disabled {\n opacity: var(--form-input-opacity-disabled);\n cursor: not-allowed;\n background: var(--glass-bg-dark);\n }\n}\n\n// Select (wird automatisch zu Dropdown umgewandelt)\n.bl-select {\n // Wird durch JavaScript in .bl-select-dropdown umgewandelt\n // Fallback-Styling für den Fall, dass JS nicht lädt\n display: block;\n width: 100%;\n padding: var(--form-input-padding-y) var(--form-input-padding-x);\n padding-right: calc(var(--form-input-padding-x) + 1.5rem);\n font-family: var(--font-family-base);\n font-size: var(--form-input-font-size);\n line-height: var(--form-input-line-height);\n color: var(--color-text);\n background: var(--glass-bg-medium);\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-md);\n backdrop-filter: blur(var(--glass-blur-lg));\n -webkit-backdrop-filter: blur(var(--glass-blur-lg));\n transition: var(--transition-base);\n cursor: pointer;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23ffffff' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right var(--form-input-padding-x) center;\n background-size: 0.75rem;\n box-shadow: var(--glass-shadow-sm);\n\n &:focus {\n outline: none;\n border-width: 2px;\n border-color: var(--color-accent);\n background-color: var(--glass-bg-medium);\n box-shadow: var(--glass-shadow-md), 0 0 0 1px var(--color-accent);\n }\n\n &:hover {\n background-color: var(--glass-bg-heavy);\n border-color: var(--glass-border-heavy);\n }\n\n &:disabled {\n opacity: var(--form-input-opacity-disabled);\n cursor: not-allowed;\n background-color: var(--glass-bg-dark);\n box-shadow: none;\n }\n\n // Wenn Select in Dropdown umgewandelt wurde, verstecken\n &.bl-select-converted {\n display: none;\n }\n}\n\n// Select Dropdown (automatisch generiert aus .bl-select)\n.bl-select-dropdown {\n position: relative;\n display: block;\n width: 100%;\n\n .bl-select-toggle {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: var(--form-input-padding-y) var(--form-input-padding-x);\n font-family: var(--font-family-base);\n font-size: var(--form-input-font-size);\n line-height: var(--form-input-line-height);\n color: var(--color-text);\n background: var(--glass-bg-medium);\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-md);\n backdrop-filter: blur(var(--glass-blur-lg));\n -webkit-backdrop-filter: blur(var(--glass-blur-lg));\n transition: var(--transition-base);\n cursor: pointer;\n box-shadow: var(--glass-shadow-sm);\n text-align: left;\n border: none; // Reset button border\n\n &::after {\n display: inline-block;\n margin-left: var(--spacing-xs);\n vertical-align: 0.255em;\n content: \"\";\n border-top: 0.3em solid var(--color-text);\n border-right: 0.3em solid transparent;\n border-bottom: 0;\n border-left: 0.3em solid transparent;\n flex-shrink: 0;\n }\n\n &:focus {\n outline: none;\n border-width: 2px;\n border-color: var(--color-accent);\n box-shadow: var(--glass-shadow-md), 0 0 0 1px var(--color-accent);\n }\n\n &:hover {\n background-color: var(--glass-bg-heavy);\n border-color: var(--glass-border-heavy);\n }\n\n &:disabled {\n opacity: var(--form-input-opacity-disabled);\n cursor: not-allowed;\n background-color: var(--glass-bg-dark);\n }\n }\n\n .bl-select-menu {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 999999 !important; // Immer ganz oben\n display: none;\n width: 100%;\n min-width: 100%;\n padding: var(--spacing-xs) 0;\n margin: var(--spacing-xs) 0 0 0;\n font-size: var(--font-size-base);\n color: var(--color-text);\n text-align: left;\n list-style: none;\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-lg));\n -webkit-backdrop-filter: blur(var(--glass-blur-lg));\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-md);\n overflow: hidden;\n overflow-y: auto;\n max-height: 300px;\n box-shadow: var(--glass-shadow-lg);\n\n &.bl-show {\n display: block;\n }\n }\n\n .bl-select-item {\n display: block;\n width: 100%;\n padding: var(--spacing-sm) var(--spacing-md);\n clear: both;\n font-weight: var(--font-weight-normal);\n color: var(--color-text);\n text-align: inherit;\n text-decoration: none;\n white-space: nowrap;\n background-color: transparent;\n border: 0;\n cursor: pointer;\n transition: var(--transition-base);\n\n &:hover,\n &:focus {\n color: var(--color-text);\n text-decoration: none;\n background: var(--glass-bg-heavy);\n }\n\n &:active {\n color: var(--color-text);\n background: var(--glass-bg-heavy);\n }\n\n &.bl-selected {\n background: var(--glass-bg-heavy);\n color: var(--color-accent);\n\n &::before {\n content: \"✓ \";\n margin-right: var(--spacing-xs);\n }\n }\n\n &.bl-disabled,\n &:disabled {\n color: var(--color-text-muted);\n pointer-events: none;\n background-color: transparent;\n opacity: 0.6;\n }\n }\n}\n\n// Input States\n.bl-input-error,\n.bl-select-error,\n.bl-textarea-error {\n border-bottom: 2px solid var(--color-error); // Line, not area\n\n &:focus {\n border-width: 2px;\n border-color: var(--color-error);\n border-bottom-width: 2px;\n }\n}\n\n.bl-input-success,\n.bl-select-success,\n.bl-textarea-success {\n border-bottom: 2px solid var(--color-success);\n\n &:focus {\n border-width: 2px;\n border-color: var(--color-success);\n border-bottom-width: 2px;\n }\n}\n\n// Input Sizes\n.bl-input-sm,\n.bl-select-sm {\n padding: var(--form-input-padding-y-sm) var(--form-input-padding-x-sm);\n font-size: var(--form-input-font-size-sm);\n}\n\n.bl-select-sm {\n padding-right: calc(var(--form-input-padding-x-sm) + 1.25rem);\n}\n\n.bl-input-lg,\n.bl-select-lg {\n padding: var(--form-input-padding-y-lg) var(--form-input-padding-x-lg);\n font-size: var(--form-input-font-size-lg);\n}\n\n.bl-select-lg {\n padding-right: calc(var(--form-input-padding-x-lg) + 1.75rem);\n}\n\n// Textarea\n.bl-textarea {\n resize: var(--form-textarea-resize);\n min-height: var(--form-textarea-min-height);\n}\n\n// Checkbox & Radio\n.bl-checkbox,\n.bl-radio {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: none;\n\n input[type=\"checkbox\"],\n input[type=\"radio\"] {\n width: var(--form-checkbox-size);\n height: var(--form-checkbox-size);\n margin-right: var(--form-checkbox-margin-right);\n cursor: pointer;\n accent-color: var(--form-checkbox-accent-color);\n }\n\n &:disabled {\n opacity: var(--form-checkbox-opacity-disabled);\n cursor: not-allowed;\n }\n}\n\n// Switch (Toggle)\n.bl-switch {\n position: relative;\n display: inline-block;\n width: var(--form-switch-width);\n height: var(--form-switch-height);\n\n input {\n opacity: 0;\n width: 0;\n height: 0;\n\n &:checked + .bl-switch-slider {\n background-color: var(--form-switch-bg-active);\n\n &::before {\n transform: translateX(var(--form-switch-slider-translate));\n }\n }\n\n &:focus + .bl-switch-slider {\n border-color: var(--color-accent);\n }\n\n &:disabled + .bl-switch-slider {\n opacity: var(--form-switch-opacity-disabled);\n cursor: not-allowed;\n }\n }\n}\n\n.bl-switch-slider {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--glass-bg-medium);\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--border-radius-full);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n transition: var(--transition-base);\n cursor: pointer;\n\n &::before {\n position: absolute;\n content: \"\";\n height: var(--form-switch-slider-size);\n width: var(--form-switch-slider-size);\n left: var(--form-switch-slider-offset);\n bottom: var(--form-switch-slider-offset);\n background: var(--glass-bg-heavy);\n border: 1px solid var(--glass-border-light);\n border-radius: var(--border-radius-full);\n transition: var(--transition-base);\n }\n}\n\n// File Input\n.bl-file-input {\n display: block;\n width: 100%;\n padding: var(--form-file-input-padding);\n font-size: var(--form-file-input-font-size);\n color: var(--color-text);\n border: 1px dashed var(--glass-border-medium);\n border-radius: var(--tech-border-radius-sm);\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n cursor: pointer;\n transition: var(--transition-base);\n\n &:hover {\n border-color: var(--glass-border-heavy);\n background: var(--glass-bg-medium);\n }\n\n input[type=\"file\"] {\n display: none;\n }\n}\n\n// Range Input\n.bl-range {\n width: 100%;\n height: var(--form-range-height);\n border-radius: var(--tech-border-radius-sm);\n background: var(--form-range-bg);\n outline: none;\n -webkit-appearance: none;\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: var(--form-range-thumb-size);\n height: var(--form-range-thumb-size);\n border-radius: var(--tech-border-radius-sm);\n background: var(--form-range-thumb-bg);\n border: 1px solid var(--glass-border-medium);\n cursor: pointer;\n }\n\n &::-moz-range-thumb {\n width: var(--form-range-thumb-size);\n height: var(--form-range-thumb-size);\n border-radius: var(--tech-border-radius-sm);\n background: var(--form-range-thumb-bg);\n border: 1px solid var(--glass-border-medium);\n cursor: pointer;\n }\n}\n\n// Input Group\n.bl-input-group {\n display: flex;\n width: 100%;\n\n .bl-input,\n .bl-select {\n position: relative;\n flex: 1 1 auto;\n width: 1%;\n\n &:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n margin-left: -1px;\n }\n\n &:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n }\n}\n","// ============================================================================\n// Card Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-card {\n display: flex;\n flex-direction: column;\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-md);\n overflow: hidden;\n transition: var(--transition-base);\n position: relative;\n\n // Optional: Vertical accent line at edge\n &.bl-card-accent-left {\n border-left: 4px solid var(--color-accent);\n }\n\n &.bl-card-accent-right {\n border-right: 4px solid var(--color-accent);\n }\n}\n\n.bl-card-header {\n padding: var(--spacing-md);\n border-bottom: 1px solid var(--glass-border-light);\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n}\n\n.bl-card-title {\n margin: 0;\n font-size: var(--font-size-lg);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text);\n}\n\n.bl-card-subtitle {\n margin: var(--spacing-xs) 0 0 0;\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n}\n\n.bl-card-body {\n padding: var(--spacing-md);\n flex: 1 1 auto;\n color: var(--color-text);\n}\n\n.bl-card-footer {\n padding: var(--spacing-md);\n border-top: 1px solid var(--glass-border-light);\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n}\n\n// Card Variants\n.bl-card-primary {\n border-color: var(--color-accent);\n}\n\n.bl-card-secondary {\n border-color: var(--glass-border-heavy);\n}\n\n// Card with Shadow\n.bl-card-shadow {\n box-shadow: var(--glass-shadow-md);\n}\n\n.bl-card-shadow-lg {\n box-shadow: var(--glass-shadow-lg);\n}\n\n// Card Hover Effect (subtle, no movement)\n.bl-card-hover {\n cursor: pointer;\n\n &:hover {\n background: var(--glass-bg-heavy);\n border-color: var(--glass-border-heavy);\n }\n}\n","// ============================================================================\n// Alert Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-alert {\n position: relative;\n padding: var(--spacing-md);\n margin-bottom: var(--spacing-md);\n border: 1px solid var(--glass-border-medium);\n border-left-width: 2px; // Clear border color line\n border-radius: var(--tech-border-radius-md);\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n color: var(--color-text);\n}\n\n.bl-alert-title {\n margin: 0 0 var(--spacing-xs) 0;\n font-size: var(--font-size-base);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text);\n}\n\n.bl-alert-message {\n margin: 0;\n font-size: var(--font-size-sm);\n color: var(--color-text-muted);\n}\n\n// Alert Variants (Structure: Line → Title → Text)\n.bl-alert-info {\n border-left-color: var(--color-accent);\n color: var(--color-text);\n\n .bl-alert-title {\n color: var(--color-text);\n }\n}\n\n.bl-alert-success {\n border-left-color: var(--color-success);\n color: var(--color-text);\n\n .bl-alert-title {\n color: var(--color-text);\n }\n}\n\n.bl-alert-warning {\n border-left-color: var(--color-warning);\n color: var(--color-text);\n\n .bl-alert-title {\n color: var(--color-text);\n }\n}\n\n.bl-alert-error {\n border-left-color: var(--color-error);\n color: var(--color-text);\n\n .bl-alert-title {\n color: var(--color-text);\n }\n}\n\n// Dismissible Alert\n.bl-alert-dismissible {\n padding-right: var(--spacing-3xl);\n}\n\n.bl-alert-close {\n position: absolute;\n top: var(--spacing-sm);\n right: var(--spacing-sm);\n padding: var(--spacing-xs);\n background: transparent;\n border: none;\n cursor: pointer;\n opacity: 0.6;\n transition: var(--transition-opacity);\n color: var(--color-text);\n border-radius: var(--tech-border-radius-sm);\n\n &:hover {\n opacity: 1;\n }\n\n &::before {\n content: '×';\n font-size: var(--font-size-xl);\n line-height: 1;\n }\n}\n","// ============================================================================\n// Badge Component (Technical Glass Design - 2-part)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-badge {\n display: inline-flex;\n align-items: stretch;\n overflow: hidden;\n font-size: var(--font-size-xs);\n font-weight: var(--font-weight-medium);\n line-height: 1;\n white-space: nowrap;\n vertical-align: baseline;\n border-radius: var(--tech-border-radius-sm);\n border: 1px solid var(--glass-border-medium);\n}\n\n// Badge Label (Left Part - Matte)\n.bl-badge-label {\n display: inline-flex;\n align-items: center;\n padding: var(--spacing-xs) var(--spacing-sm);\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n color: var(--color-text-muted);\n border-right: 1px solid var(--glass-border-medium); // Technical edge\n flex-shrink: 0;\n}\n\n// Badge Value (Right Part - Glassy or Accented)\n.bl-badge-value {\n display: inline-flex;\n align-items: center;\n padding: var(--spacing-xs) var(--spacing-sm);\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n color: var(--color-text);\n flex-shrink: 0;\n}\n\n// Badge Variants\n.bl-badge-primary {\n .bl-badge-value {\n background: var(--color-accent);\n color: var(--color-text-inverse);\n }\n}\n\n.bl-badge-secondary {\n .bl-badge-value {\n background: var(--glass-bg-heavy);\n color: var(--color-text);\n }\n}\n\n.bl-badge-success {\n .bl-badge-value {\n background: var(--color-success);\n color: var(--color-text-inverse);\n }\n}\n\n.bl-badge-warning {\n .bl-badge-value {\n background: var(--color-warning);\n color: var(--color-text-inverse);\n }\n}\n\n.bl-badge-error {\n .bl-badge-value {\n background: var(--color-error);\n color: var(--color-text-inverse);\n }\n}\n\n.bl-badge-info {\n .bl-badge-value {\n background: var(--color-info);\n color: var(--color-text-inverse);\n }\n}\n\n// Badge Sizes\n.bl-badge-sm {\n font-size: 0.625rem;\n\n .bl-badge-label,\n .bl-badge-value {\n padding: 0.125rem var(--spacing-xs);\n }\n}\n\n.bl-badge-lg {\n font-size: var(--font-size-sm);\n\n .bl-badge-label,\n .bl-badge-value {\n padding: var(--spacing-sm) var(--spacing-md);\n }\n}\n","// ============================================================================\n// Modal Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-modal-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--z-index-modal-backdrop);\n width: 100vw;\n height: 100vh;\n background: var(--color-bg-overlay);\n backdrop-filter: blur(var(--glass-blur-lg));\n -webkit-backdrop-filter: blur(var(--glass-blur-lg));\n}\n\n.bl-modal {\n position: fixed;\n top: 0;\n left: 0;\n z-index: var(--z-index-modal);\n width: 100%;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n outline: 0;\n}\n\n.bl-modal-dialog {\n position: relative;\n width: auto;\n margin: var(--spacing-md);\n pointer-events: none;\n\n @media (min-width: 576px) {\n max-width: 500px;\n margin: var(--spacing-xl) auto;\n }\n\n @media (min-width: 768px) {\n max-width: 600px;\n }\n\n @media (min-width: 1024px) {\n max-width: 800px;\n }\n}\n\n.bl-modal-content {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n pointer-events: auto;\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-xl));\n -webkit-backdrop-filter: blur(var(--glass-blur-xl));\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-md);\n outline: 0;\n}\n\n.bl-modal-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: var(--spacing-md);\n border-bottom: 1px solid var(--glass-border-light); // Clear divider line\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n}\n\n.bl-modal-title {\n margin: 0;\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n line-height: var(--line-height-tight);\n color: var(--color-text);\n}\n\n.bl-modal-close {\n padding: var(--spacing-xs);\n margin: calc(var(--spacing-xs) * -1) calc(var(--spacing-xs) * -1) calc(var(--spacing-xs) * -1) auto;\n background: transparent;\n border: 0;\n border-radius: var(--tech-border-radius-sm);\n opacity: 0.6;\n cursor: pointer;\n transition: var(--transition-opacity);\n color: var(--color-text);\n font-family: monospace; // Angular, minimal\n\n &:hover {\n opacity: 1;\n }\n\n &::before {\n content: '×';\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-bold);\n line-height: 1;\n }\n}\n\n.bl-modal-body {\n position: relative;\n flex: 1 1 auto;\n padding: var(--spacing-md);\n color: var(--color-text);\n}\n\n.bl-modal-footer {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n padding: var(--spacing-md);\n border-top: 1px solid var(--glass-border-light);\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n\n > * {\n margin: var(--spacing-xs);\n }\n}\n\n// Modal Sizes\n.bl-modal-sm {\n @media (min-width: 576px) {\n max-width: 300px;\n }\n}\n\n.bl-modal-lg {\n @media (min-width: 1024px) {\n max-width: 1000px;\n }\n}\n\n.bl-modal-xl {\n @media (min-width: 1024px) {\n max-width: 1200px;\n }\n}\n\n// Centered Modal\n.bl-modal-centered {\n .bl-modal-dialog {\n display: flex;\n align-items: center;\n min-height: calc(100% - (var(--spacing-xl) * 2));\n }\n}\n","// ============================================================================\n// Dropdown Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-dropdown {\n position: relative;\n display: inline-block;\n}\n\n.bl-dropdown-toggle {\n &::after {\n display: inline-block;\n margin-left: var(--spacing-xs);\n vertical-align: 0.255em;\n content: \"\";\n border-top: 0.3em solid;\n border-right: 0.3em solid transparent;\n border-bottom: 0;\n border-left: 0.3em solid transparent;\n }\n}\n\n.bl-dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 99999 !important; // Immer ganz oben\n display: none;\n min-width: 10rem;\n padding: var(--spacing-xs) 0;\n margin: var(--spacing-xs) 0 0 0;\n font-size: var(--font-size-base);\n color: var(--color-text);\n text-align: left;\n list-style: none;\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-lg));\n -webkit-backdrop-filter: blur(var(--glass-blur-lg));\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-md);\n overflow: hidden;\n overflow-y: auto;\n max-height: 300px;\n box-shadow: var(--glass-shadow-lg);\n\n &.bl-show {\n display: block;\n }\n}\n\n.bl-dropdown-menu-right {\n right: 0;\n left: auto;\n}\n\n.bl-dropdown-item {\n display: block;\n width: 100%;\n padding: var(--spacing-sm) var(--spacing-md);\n clear: both;\n font-weight: var(--font-weight-normal);\n color: var(--color-text);\n text-align: inherit;\n text-decoration: none;\n white-space: nowrap;\n background-color: transparent;\n border: 0;\n cursor: pointer;\n transition: var(--transition-base);\n\n &:hover,\n &:focus {\n color: var(--color-text);\n text-decoration: none;\n background: var(--glass-bg-heavy); // Flat, not floating\n }\n\n &:active {\n color: var(--color-text);\n background: var(--glass-bg-heavy);\n }\n\n &.bl-active {\n background: var(--glass-bg-heavy);\n color: var(--color-accent);\n }\n\n &.bl-disabled,\n &:disabled {\n color: var(--color-text-muted);\n pointer-events: none;\n background-color: transparent;\n opacity: 0.6;\n }\n}\n\n.bl-dropdown-divider {\n height: 0;\n margin: var(--spacing-xs) 0;\n overflow: hidden;\n border-top: 1px solid var(--glass-border-light);\n}\n\n.bl-dropdown-header {\n display: block;\n padding: var(--spacing-sm) var(--spacing-md);\n margin-bottom: 0;\n font-size: var(--font-size-sm);\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-muted);\n white-space: nowrap;\n}\n","// ============================================================================\n// Navigation Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n// Base Nav\n.bl-nav {\n display: flex;\n flex-wrap: wrap;\n padding-left: 0;\n margin-bottom: 0;\n list-style: none;\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-sm);\n padding: var(--spacing-xs);\n}\n\n.bl-nav-item {\n display: list-item;\n}\n\n.bl-nav-link {\n display: block;\n padding: var(--spacing-sm) var(--spacing-md);\n color: var(--color-text);\n text-decoration: none;\n border-radius: var(--tech-border-radius-sm);\n transition: var(--transition-base);\n\n &:hover {\n color: var(--color-text);\n text-decoration: none;\n background: var(--glass-bg-medium);\n }\n\n &:focus {\n outline: 1px solid var(--color-border-focus);\n outline-offset: -2px;\n }\n\n &.bl-active {\n color: var(--color-text);\n font-weight: var(--font-weight-semibold);\n background: var(--glass-bg-heavy);\n border-bottom: 2px solid var(--color-accent); // Sharp underline or block marking\n }\n\n &.bl-disabled {\n color: var(--color-text-muted);\n pointer-events: none;\n cursor: default;\n }\n}\n\n// Horizontal Nav\n.bl-nav-horizontal {\n flex-direction: row;\n\n .bl-nav-item {\n margin-right: var(--spacing-xs);\n }\n}\n\n// Vertical Nav\n.bl-nav-vertical {\n flex-direction: column;\n\n .bl-nav-item {\n margin-bottom: var(--spacing-xs);\n }\n}\n\n// Tabs\n.bl-nav-tabs {\n border-bottom: 1px solid var(--glass-border-light);\n background: transparent;\n padding: 0;\n\n .bl-nav-link {\n margin-bottom: calc(1px * -1);\n border: 1px solid transparent;\n border-top-left-radius: var(--tech-border-radius-sm);\n border-top-right-radius: var(--tech-border-radius-sm);\n background: transparent;\n\n &:hover {\n border-color: var(--glass-border-medium);\n background: var(--glass-bg-light);\n isolation: isolate;\n }\n\n &.bl-active {\n color: var(--color-text);\n background: var(--glass-bg-medium);\n border-color: var(--glass-border-medium) var(--glass-border-medium) transparent;\n border-bottom: 2px solid var(--color-accent);\n }\n }\n}\n\n// Pills\n.bl-nav-pills {\n .bl-nav-link {\n border-radius: var(--tech-border-radius-sm);\n\n &.bl-active {\n color: var(--color-text);\n background: var(--glass-bg-heavy);\n border-bottom: 2px solid var(--color-accent);\n }\n }\n}\n\n// Breadcrumb\n.bl-breadcrumb {\n display: flex;\n flex-wrap: wrap;\n padding: var(--spacing-sm) 0;\n margin-bottom: var(--spacing-md);\n list-style: none;\n}\n\n.bl-breadcrumb-item {\n display: flex;\n align-items: center;\n\n + .bl-breadcrumb-item {\n padding-left: var(--spacing-sm);\n\n &::before {\n display: inline-block;\n padding-right: var(--spacing-sm);\n color: var(--color-text-muted);\n content: \"/\";\n }\n }\n\n &.bl-active {\n color: var(--color-text-muted);\n }\n}\n\n// Pagination\n.bl-pagination {\n display: flex;\n padding-left: 0;\n list-style: none;\n}\n\n.bl-page-item {\n display: list-item;\n\n &:first-child .bl-page-link {\n margin-left: 0;\n border-top-left-radius: var(--tech-border-radius-sm);\n border-bottom-left-radius: var(--tech-border-radius-sm);\n }\n\n &:last-child .bl-page-link {\n border-top-right-radius: var(--tech-border-radius-sm);\n border-bottom-right-radius: var(--tech-border-radius-sm);\n }\n\n &.bl-active .bl-page-link {\n z-index: 1;\n color: var(--color-text);\n background: var(--glass-bg-heavy);\n border-color: var(--glass-border-heavy);\n }\n\n &.bl-disabled .bl-page-link {\n color: var(--color-text-muted);\n pointer-events: none;\n cursor: auto;\n background: var(--glass-bg-dark);\n border-color: var(--glass-border-light);\n }\n}\n\n.bl-page-link {\n position: relative;\n display: block;\n padding: var(--spacing-sm) var(--spacing-md);\n margin-left: calc(1px * -1);\n line-height: var(--line-height-base);\n color: var(--color-text);\n text-decoration: none;\n background: var(--glass-bg-light);\n border: 1px solid var(--glass-border-medium);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n transition: var(--transition-base);\n\n &:hover {\n z-index: 2;\n color: var(--color-text);\n text-decoration: none;\n background: var(--glass-bg-medium);\n border-color: var(--glass-border-heavy);\n }\n\n &:focus {\n z-index: 2;\n outline: 1px solid var(--color-border-focus);\n outline-offset: -2px;\n }\n}\n","// ============================================================================\n// Table Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-table {\n width: 100%;\n margin-bottom: var(--spacing-md);\n color: var(--color-text);\n vertical-align: top;\n border-color: var(--glass-border-medium);\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-md);\n overflow: hidden;\n\n > :not(caption) > * > * {\n padding: var(--spacing-sm) var(--spacing-md);\n background-color: transparent;\n border-bottom-width: 1px;\n border-bottom-color: var(--glass-border-light);\n border-right-width: 1px;\n border-right-color: var(--glass-border-light);\n box-shadow: inset 0 0 0 9999px transparent;\n }\n\n > :not(caption) > * > *:last-child {\n border-right-width: 0;\n }\n\n > tbody {\n vertical-align: inherit;\n }\n\n > thead {\n vertical-align: bottom;\n }\n\n > :not(:first-child) {\n border-top: 1px solid var(--glass-border-light);\n }\n}\n\n.bl-table-caption {\n padding-top: var(--spacing-sm);\n padding-bottom: var(--spacing-sm);\n color: var(--color-text-muted);\n text-align: left;\n caption-side: bottom;\n}\n\n.bl-table-head {\n font-weight: var(--font-weight-semibold);\n color: var(--color-text);\n text-align: inherit;\n text-align: -webkit-match-parent;\n background: var(--glass-bg-etched); // Etched glass effect\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n}\n\n// Table Variants\n.bl-table-striped {\n > tbody > tr:nth-of-type(odd) > * {\n --bl-table-accent-bg: var(--glass-bg-light);\n color: var(--color-text);\n box-shadow: inset 0 0 0 9999px var(--bl-table-accent-bg);\n }\n}\n\n.bl-table-bordered {\n border: 1px solid var(--glass-border-medium);\n\n > :not(caption) > * {\n border-width: 1px 0;\n\n > * {\n border-width: 0 1px;\n border-color: var(--glass-border-light);\n }\n }\n}\n\n.bl-table-borderless {\n > :not(caption) > * > * {\n border-bottom-width: 0;\n border-right-width: 0;\n }\n\n > :not(:first-child) {\n border-top-width: 0;\n }\n}\n\n.bl-table-hover {\n > tbody > tr:hover > * {\n --bl-table-accent-bg: var(--glass-bg-heavy);\n color: var(--color-text);\n box-shadow: inset 0 0 0 9999px var(--bl-table-accent-bg);\n transition: var(--transition-base);\n }\n}\n\n// Table Sizes\n.bl-table-sm {\n > :not(caption) > * > * {\n padding: var(--spacing-xs) var(--spacing-sm);\n }\n}\n\n.bl-table-lg {\n > :not(caption) > * > * {\n padding: var(--spacing-md) var(--spacing-lg);\n }\n}\n\n// Responsive Table\n.bl-table-responsive {\n display: block;\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n\n > .bl-table {\n margin-bottom: 0;\n }\n}\n\n@media (max-width: 575.98px) {\n .bl-table-responsive-sm {\n display: block;\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n\n > .bl-table {\n margin-bottom: 0;\n }\n }\n}\n\n@media (max-width: 767.98px) {\n .bl-table-responsive-md {\n display: block;\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n\n > .bl-table {\n margin-bottom: 0;\n }\n }\n}\n\n@media (max-width: 1023.98px) {\n .bl-table-responsive-lg {\n display: block;\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n\n > .bl-table {\n margin-bottom: 0;\n }\n }\n}\n\n@media (max-width: 1279.98px) {\n .bl-table-responsive-xl {\n display: block;\n width: 100%;\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n\n > .bl-table {\n margin-bottom: 0;\n }\n }\n}\n","// ============================================================================\n// Tooltip Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-tooltip {\n position: relative;\n display: inline-block;\n}\n\n.bl-tooltip-trigger {\n cursor: help;\n}\n\n.bl-tooltip-content {\n position: absolute;\n z-index: var(--z-index-tooltip);\n display: none;\n max-width: 200px;\n padding: var(--spacing-xs) var(--spacing-sm);\n font-size: var(--font-size-xs);\n font-family: var(--font-family-mono); // Precise, monospace possible\n line-height: var(--line-height-base);\n color: var(--color-text);\n text-align: center;\n text-decoration: none;\n word-wrap: break-word;\n background: var(--glass-bg-medium);\n backdrop-filter: blur(var(--glass-blur-md));\n -webkit-backdrop-filter: blur(var(--glass-blur-md));\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-sm);\n opacity: 0;\n transition: var(--transition-opacity);\n\n &.bl-show {\n display: block;\n opacity: 1;\n }\n}\n\n// Tooltip Positions (Angular, Trapezoidal Arrow)\n.bl-tooltip-top {\n .bl-tooltip-content {\n bottom: 100%;\n left: 50%;\n margin-bottom: var(--spacing-xs);\n transform: translateX(-50%);\n\n &::after {\n position: absolute;\n top: 100%;\n left: 50%;\n width: 0;\n height: 0;\n margin-left: -6px;\n content: \"\";\n border-width: 6px 6px 0 6px;\n border-style: solid;\n border-color: var(--glass-bg-medium) transparent transparent transparent;\n clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); // Trapezoidal\n }\n }\n}\n\n.bl-tooltip-bottom {\n .bl-tooltip-content {\n top: 100%;\n left: 50%;\n margin-top: var(--spacing-xs);\n transform: translateX(-50%);\n\n &::after {\n position: absolute;\n bottom: 100%;\n left: 50%;\n width: 0;\n height: 0;\n margin-left: -6px;\n content: \"\";\n border-width: 0 6px 6px 6px;\n border-style: solid;\n border-color: transparent transparent var(--glass-bg-medium) transparent;\n clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); // Trapezoidal\n }\n }\n}\n\n.bl-tooltip-left {\n .bl-tooltip-content {\n top: 50%;\n right: 100%;\n margin-right: var(--spacing-xs);\n transform: translateY(-50%);\n\n &::after {\n position: absolute;\n top: 50%;\n left: 100%;\n width: 0;\n height: 0;\n margin-top: -6px;\n content: \"\";\n border-width: 6px 0 6px 6px;\n border-style: solid;\n border-color: transparent transparent transparent var(--glass-bg-medium);\n clip-path: polygon(0 20%, 0 80%, 100% 100%, 100% 0); // Trapezoidal\n }\n }\n}\n\n.bl-tooltip-right {\n .bl-tooltip-content {\n top: 50%;\n left: 100%;\n margin-left: var(--spacing-xs);\n transform: translateY(-50%);\n\n &::after {\n position: absolute;\n top: 50%;\n right: 100%;\n width: 0;\n height: 0;\n margin-top: -6px;\n content: \"\";\n border-width: 6px 6px 6px 0;\n border-style: solid;\n border-color: transparent var(--glass-bg-medium) transparent transparent;\n clip-path: polygon(0 0, 0 100%, 100% 80%, 100% 20%); // Trapezoidal\n }\n }\n}\n","// ============================================================================\n// Progress Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-progress {\n display: flex;\n height: 1rem;\n overflow: hidden;\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n border: 1px solid var(--glass-border-medium);\n border-radius: var(--tech-border-radius-sm);\n}\n\n.bl-progress-bar {\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n color: var(--color-text-inverse);\n text-align: center;\n white-space: nowrap;\n background: var(--color-accent);\n transition: width var(--transition-duration-slow) var(--transition-ease-linear);\n}\n\n// Progress Variants\n.bl-progress-bar-primary {\n background: var(--color-accent);\n}\n\n.bl-progress-bar-secondary {\n background: var(--glass-bg-heavy);\n}\n\n.bl-progress-bar-success {\n background: var(--color-success);\n}\n\n.bl-progress-bar-warning {\n background: var(--color-warning);\n}\n\n.bl-progress-bar-error {\n background: var(--color-error);\n}\n\n.bl-progress-bar-info {\n background: var(--color-info);\n}\n\n// Progress Sizes\n.bl-progress-sm {\n height: 0.5rem;\n}\n\n.bl-progress-lg {\n height: 1.5rem;\n}\n\n// Striped Progress (removed - no gradients)\n// Animated Progress (removed - only linear growth)\n","// ============================================================================\n// Spinner Component (Technical Glass Design)\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n.bl-spinner {\n display: inline-block;\n width: 2rem;\n height: 2rem;\n vertical-align: text-bottom;\n border: var(--border-width-base) solid var(--glass-border-medium);\n border-top-color: var(--color-accent);\n border-radius: var(--tech-border-radius-sm); // Square frame\n background: var(--glass-bg-light);\n backdrop-filter: blur(var(--glass-blur-sm));\n -webkit-backdrop-filter: blur(var(--glass-blur-sm));\n animation: bl-spinner-rotate 0.75s linear infinite;\n position: relative;\n\n // Rotating inner segment\n &::before {\n content: '';\n position: absolute;\n top: 2px;\n left: 2px;\n right: 2px;\n bottom: 2px;\n background: var(--color-accent);\n opacity: 0.3;\n border-radius: var(--tech-border-radius-sm);\n animation: bl-spinner-inner 1.5s linear infinite;\n }\n}\n\n@keyframes bl-spinner-rotate {\n to {\n transform: rotate(360deg);\n }\n}\n\n@keyframes bl-spinner-inner {\n 0% {\n transform: rotate(0deg);\n opacity: 0.3;\n }\n 50% {\n opacity: 0.6;\n }\n 100% {\n transform: rotate(360deg);\n opacity: 0.3;\n }\n}\n\n// Spinner Variants\n.bl-spinner-primary {\n border-top-color: var(--color-accent);\n \n &::before {\n background: var(--color-accent);\n }\n}\n\n.bl-spinner-secondary {\n border-top-color: var(--color-secondary);\n \n &::before {\n background: var(--color-secondary);\n }\n}\n\n.bl-spinner-success {\n border-top-color: var(--color-success);\n \n &::before {\n background: var(--color-success);\n }\n}\n\n.bl-spinner-warning {\n border-top-color: var(--color-warning);\n \n &::before {\n background: var(--color-warning);\n }\n}\n\n.bl-spinner-error {\n border-top-color: var(--color-error);\n \n &::before {\n background: var(--color-error);\n }\n}\n\n.bl-spinner-info {\n border-top-color: var(--color-info);\n \n &::before {\n background: var(--color-info);\n }\n}\n\n// Spinner Sizes\n.bl-spinner-sm {\n width: 1rem;\n height: 1rem;\n border-width: var(--border-width-thin);\n}\n\n.bl-spinner-lg {\n width: 3rem;\n height: 3rem;\n border-width: var(--border-width-base);\n}\n\n// Spinner Grow (Alternative Style - removed, using square frame only)\n","// ============================================================================\n// Icon Font System\n// ============================================================================\n\n@use '../tokens/tokens' as *;\n\n// Icon Font Face (to be generated from icon font files)\n@font-face {\n font-family: 'Baseline Icons';\n src: url('../fonts/baseline-icons.woff2') format('woff2'),\n url('../fonts/baseline-icons.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n}\n\n// Base Icon Class\n.bl-icon {\n display: inline-block;\n font-family: 'Baseline Icons';\n font-style: normal;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n speak: never;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n}\n\n// Icon Sizes\n.bl-icon-xs {\n font-size: 0.75rem;\n width: 0.75rem;\n height: 0.75rem;\n}\n\n.bl-icon-sm {\n font-size: 1rem;\n width: 1rem;\n height: 1rem;\n}\n\n.bl-icon-md {\n font-size: 1.25rem;\n width: 1.25rem;\n height: 1.25rem;\n}\n\n.bl-icon-lg {\n font-size: 1.5rem;\n width: 1.5rem;\n height: 1.5rem;\n}\n\n.bl-icon-xl {\n font-size: 2rem;\n width: 2rem;\n height: 2rem;\n}\n\n// Icon Variants (using Unicode/Private Use Area)\n// These would be replaced with actual icon font mappings\n.bl-icon-home::before { content: '\\e900'; }\n.bl-icon-user::before { content: '\\e901'; }\n.bl-icon-search::before { content: '\\e902'; }\n.bl-icon-menu::before { content: '\\e903'; }\n.bl-icon-close::before { content: '\\e904'; }\n.bl-icon-chevron-left::before { content: '\\e905'; }\n.bl-icon-chevron-right::before { content: '\\e906'; }\n.bl-icon-chevron-up::before { content: '\\e907'; }\n.bl-icon-chevron-down::before { content: '\\e908'; }\n.bl-icon-arrow-left::before { content: '\\e909'; }\n.bl-icon-arrow-right::before { content: '\\e90a'; }\n.bl-icon-arrow-up::before { content: '\\e90b'; }\n.bl-icon-arrow-down::before { content: '\\e90c'; }\n.bl-icon-check::before { content: '\\e90d'; }\n.bl-icon-cross::before { content: '\\e90e'; }\n.bl-icon-plus::before { content: '\\e90f'; }\n.bl-icon-minus::before { content: '\\e910'; }\n.bl-icon-info::before { content: '\\e911'; }\n.bl-icon-warning::before { content: '\\e912'; }\n.bl-icon-error::before { content: '\\e913'; }\n.bl-icon-success::before { content: '\\e914'; }\n.bl-icon-heart::before { content: '\\e915'; }\n.bl-icon-star::before { content: '\\e916'; }\n.bl-icon-bookmark::before { content: '\\e917'; }\n.bl-icon-share::before { content: '\\e918'; }\n.bl-icon-download::before { content: '\\e919'; }\n.bl-icon-upload::before { content: '\\e91a'; }\n.bl-icon-edit::before { content: '\\e91b'; }\n.bl-icon-delete::before { content: '\\e91c'; }\n.bl-icon-settings::before { content: '\\e91d'; }\n.bl-icon-bell::before { content: '\\e91e'; }\n.bl-icon-mail::before { content: '\\e91f'; }\n.bl-icon-phone::before { content: '\\e920'; }\n.bl-icon-calendar::before { content: '\\e921'; }\n.bl-icon-clock::before { content: '\\e922'; }\n.bl-icon-image::before { content: '\\e923'; }\n.bl-icon-video::before { content: '\\e924'; }\n.bl-icon-file::before { content: '\\e925'; }\n.bl-icon-folder::before { content: '\\e926'; }\n.bl-icon-lock::before { content: '\\e927'; }\n.bl-icon-unlock::before { content: '\\e928'; }\n.bl-icon-eye::before { content: '\\e929'; }\n.bl-icon-eye-off::before { content: '\\e92a'; }\n.bl-icon-filter::before { content: '\\e92b'; }\n.bl-icon-sort::before { content: '\\e92c'; }\n.bl-icon-grid::before { content: '\\e92d'; }\n.bl-icon-list::before { content: '\\e92e'; }\n.bl-icon-refresh::before { content: '\\e92f'; }\n.bl-icon-loading::before { content: '\\e930'; }\n.bl-icon-play::before { content: '\\e931'; }\n.bl-icon-pause::before { content: '\\e932'; }\n.bl-icon-stop::before { content: '\\e933'; }\n.bl-icon-next::before { content: '\\e934'; }\n.bl-icon-prev::before { content: '\\e935'; }\n.bl-icon-volume::before { content: '\\e936'; }\n.bl-icon-volume-off::before { content: '\\e937'; }\n.bl-icon-fullscreen::before { content: '\\e938'; }\n.bl-icon-fullscreen-exit::before { content: '\\e939'; }\n.bl-icon-link::before { content: '\\e93a'; }\n.bl-icon-external::before { content: '\\e93b'; }\n.bl-icon-copy::before { content: '\\e93c'; }\n.bl-icon-cut::before { content: '\\e93d'; }\n.bl-icon-paste::before { content: '\\e93e'; }\n.bl-icon-undo::before { content: '\\e93f'; }\n.bl-icon-redo::before { content: '\\e940'; }\n.bl-icon-save::before { content: '\\e941'; }\n.bl-icon-print::before { content: '\\e942'; }\n.bl-icon-zoom-in::before { content: '\\e943'; }\n.bl-icon-zoom-out::before { content: '\\e944'; }\n.bl-icon-maximize::before { content: '\\e945'; }\n.bl-icon-minimize::before { content: '\\e946'; }\n\n// Icon in Button\n.bl-btn .bl-icon {\n margin-right: var(--spacing-xs);\n}\n\n.bl-btn .bl-icon:last-child {\n margin-right: 0;\n margin-left: var(--spacing-xs);\n}\n\n.bl-btn .bl-icon:only-child {\n margin: 0;\n}\n\n","// ============================================================================\n// Dark Theme\n// ============================================================================\n\n@media (prefers-color-scheme: dark) {\n :root {\n // Neutral Grayscale (inverted)\n --color-gray-50: #030712;\n --color-gray-100: #111827;\n --color-gray-200: #1f2937;\n --color-gray-300: #374151;\n --color-gray-400: #4b5563;\n --color-gray-500: #6b7280;\n --color-gray-600: #9ca3af;\n --color-gray-700: #d1d5db;\n --color-gray-800: #e5e7eb;\n --color-gray-900: #f3f4f6;\n --color-gray-950: #f9fafb;\n\n // Semantic Colors (adjusted for dark mode)\n --color-primary: #f3f4f6;\n --color-primary-light: #e5e7eb;\n --color-primary-dark: #d1d5db;\n\n --color-secondary: #9ca3af;\n --color-secondary-light: #d1d5db;\n --color-secondary-dark: #6b7280;\n\n --color-success: #34d399;\n --color-success-light: #6ee7b7;\n --color-success-dark: #10b981;\n\n --color-warning: #fbbf24;\n --color-warning-light: #fcd34d;\n --color-warning-dark: #f59e0b;\n\n --color-error: #f87171;\n --color-error-light: #fca5a5;\n --color-error-dark: #ef4444;\n\n --color-info: #60a5fa;\n --color-info-light: #93c5fd;\n --color-info-dark: #3b82f6;\n\n // Text Colors\n --color-text: #f3f4f6;\n --color-text-muted: #9ca3af;\n --color-text-light: #6b7280;\n --color-text-inverse: #111827;\n\n // Background Colors\n --color-bg: #111827;\n --color-bg-alt: #1f2937;\n --color-bg-overlay: rgba(0, 0, 0, 0.7);\n\n // Border Colors\n --color-border: #374151;\n --color-border-light: #1f2937;\n --color-border-dark: #4b5563;\n --color-border-focus: #60a5fa;\n }\n}\n\n// Manual Dark Theme Toggle (via class)\n.bl-theme-dark,\n[data-theme=\"dark\"] {\n // Neutral Grayscale (inverted)\n --color-gray-50: #030712;\n --color-gray-100: #111827;\n --color-gray-200: #1f2937;\n --color-gray-300: #374151;\n --color-gray-400: #4b5563;\n --color-gray-500: #6b7280;\n --color-gray-600: #9ca3af;\n --color-gray-700: #d1d5db;\n --color-gray-800: #e5e7eb;\n --color-gray-900: #f3f4f6;\n --color-gray-950: #f9fafb;\n\n // Semantic Colors (adjusted for dark mode)\n --color-primary: #f3f4f6;\n --color-primary-light: #e5e7eb;\n --color-primary-dark: #d1d5db;\n\n --color-secondary: #9ca3af;\n --color-secondary-light: #d1d5db;\n --color-secondary-dark: #6b7280;\n\n --color-success: #34d399;\n --color-success-light: #6ee7b7;\n --color-success-dark: #10b981;\n\n --color-warning: #fbbf24;\n --color-warning-light: #fcd34d;\n --color-warning-dark: #f59e0b;\n\n --color-error: #f87171;\n --color-error-light: #fca5a5;\n --color-error-dark: #ef4444;\n\n --color-info: #60a5fa;\n --color-info-light: #93c5fd;\n --color-info-dark: #3b82f6;\n\n // Text Colors\n --color-text: #f3f4f6;\n --color-text-muted: #9ca3af;\n --color-text-light: #6b7280;\n --color-text-inverse: #111827;\n\n // Background Colors\n --color-bg: #111827;\n --color-bg-alt: #1f2937;\n --color-bg-overlay: rgba(0, 0, 0, 0.7);\n\n // Border Colors\n --color-border: #374151;\n --color-border-light: #1f2937;\n --color-border-dark: #4b5563;\n --color-border-focus: #60a5fa;\n}\n\n"]}