@tangle-network/sandbox-ui 1.1.8 → 1.1.10

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 (21) hide show
  1. package/README.md +1 -1
  2. package/dist/{dashboard-ClKA3opr.js → dashboard-DZ6FcC_Z.js} +3 -3
  3. package/dist/dashboard.js +1 -1
  4. package/dist/globals.css +1957 -1556
  5. package/dist/index-CFJ1iJhu.d.ts +26 -0
  6. package/dist/index.d.ts +3 -4
  7. package/dist/index.js +5 -289
  8. package/dist/integrations.d.ts +2 -1
  9. package/dist/integrations.js +6 -1
  10. package/dist/primitives-B-76QdOU.js +23 -0
  11. package/dist/primitives.d.ts +2 -3
  12. package/dist/primitives.js +1 -2
  13. package/dist/styles.css +1957 -1556
  14. package/dist/tailwind.css +4 -17
  15. package/dist/tokens.css +452 -851
  16. package/dist/{workbench-DOgYO3Zg.js → workbench-Ca6ZqAs5.js} +1 -1
  17. package/dist/workbench.js +1 -1
  18. package/package.json +3 -3
  19. package/dist/index-BAEvGqrn.d.ts +0 -26
  20. package/dist/primitives-CiwDp4-0.js +0 -32
  21. package/dist/rolldown-runtime-782esTHO.js +0 -26
package/dist/styles.css CHANGED
@@ -94,8 +94,8 @@
94
94
  --text-section--letter-spacing: -0.01em;
95
95
  --text-section--font-weight: 600;
96
96
  --radius-full: 999px;
97
- --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
98
- --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
97
+ --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.3);
98
+ --shadow-dropdown: 0 8px 30px hsl(var(--shadow-color) / 0.45);
99
99
  --shadow-glow: none;
100
100
  --color-background: hsl(var(--background));
101
101
  --color-muted: hsl(var(--muted));
@@ -6589,1572 +6589,1973 @@
6589
6589
  color: hsl(var(--muted-foreground));
6590
6590
  }
6591
6591
  }
6592
- :root, [data-sandbox-ui], [data-sandbox-theme="vault"], [data-sandbox-theme="dawn"], [data-theme="dark"], [data-theme="light"], [data-theme="aubergine"], [data-theme="aubergine-light"], [data-theme="arena"], [data-theme="arena-light"], [data-theme="super"], [data-theme="super-light"], [data-theme="tangle-dark"], [data-theme="tangle-light"], [data-theme="hospitality"], [data-theme="agents"], [data-theme="agents-light"], [data-theme="website"], .light, .dark {
6593
- color-scheme: dark;
6594
- --hsl-background: 240 33% 6%;
6595
- --hsl-input: 244 29% 9%;
6596
- --hsl-card: 244 23% 12%;
6597
- --hsl-secondary: 249 24% 17.5%;
6598
- --hsl-popover: 247 21% 23%;
6599
- --hsl-muted: var(--hsl-secondary);
6600
- --hsl-accent: var(--hsl-secondary);
6601
- --md3-surface-dim: #040408;
6602
- --md3-surface-container-lowest: var(--md3-surface-dim);
6603
- --md3-surface-bright: #232238;
6604
- --md3-surface: hsl(var(--hsl-background));
6605
- --md3-surface-container-low: hsl(var(--hsl-input));
6606
- --md3-surface-container: hsl(var(--hsl-card));
6607
- --md3-surface-container-high: hsl(var(--hsl-secondary));
6608
- --md3-surface-container-highest: hsl(var(--hsl-popover));
6609
- --md3-surface-variant: var(--md3-surface-container-high);
6610
- --depth-1: var(--md3-surface);
6611
- --depth-2: var(--md3-surface-container);
6612
- --depth-3: var(--md3-surface-container-high);
6613
- --depth-4: var(--md3-surface-container-highest);
6614
- --bg-root: var(--md3-surface);
6615
- --bg-dark: var(--depth-1);
6616
- --bg-card: var(--depth-2);
6617
- --bg-elevated: var(--depth-4);
6618
- --bg-section: var(--depth-1);
6619
- --bg-input: hsl(var(--hsl-input));
6620
- --sidebar-background: var(--hsl-input);
6621
- --sidebar-accent: var(--hsl-secondary);
6622
- --md3-inverse-surface: #fdfdfd;
6623
- --md3-inverse-on-surface: #000000;
6624
- --hsl-foreground: 0 0% 90.1961%;
6625
- --hsl-muted-foreground: 240 5% 68%;
6626
- --text-primary: hsl(var(--hsl-foreground));
6627
- --text-secondary: #c7c7c7;
6628
- --text-muted: #b5b5b5;
6629
- --text-dim: #a5a5a5;
6630
- --hsl-card-foreground: var(--hsl-foreground);
6631
- --hsl-popover-foreground: var(--hsl-foreground);
6632
- --hsl-secondary-foreground: var(--hsl-foreground);
6633
- --hsl-accent-foreground: var(--hsl-foreground);
6634
- --sidebar-foreground: var(--hsl-foreground);
6635
- --sidebar-accent-foreground: var(--hsl-foreground);
6636
- --md3-on-surface: var(--text-primary);
6637
- --md3-on-surface-variant: var(--text-muted);
6638
- --md3-outline: #8e8e8e;
6639
- --hsl-border: 244 16% 25%;
6640
- --md3-outline-variant: hsl(var(--hsl-border));
6641
- --sidebar-border: var(--hsl-border);
6642
- --border-subtle: hsl(var(--hsl-border));
6643
- --border-default: hsl(var(--hsl-border));
6644
- --border-hover: rgba(255, 255, 255, 0.28);
6645
- --hsl-primary: 246 54% 51%;
6646
- --hsl-primary-foreground: 0 0% 100%;
6647
- --hsl-ring: 233 100% 87%;
6648
- --brand-primary: #7C6CF6;
6649
- --brand-cool: #818CF8;
6650
- --accent-text: #A5B4FC;
6651
- --brand-purple: #C7D2FE;
6652
- --brand-strong: #2E2A5E;
6653
- --brand-strong-text: #ffffff;
6654
- --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
6655
- --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
6656
- --brand-glow: var(--accent-text);
6657
- --brand-vibrant: var(--brand-primary);
6658
- --btn-primary-bg: hsl(var(--hsl-primary));
6659
- --btn-primary-hover: #5a50d6;
6660
- --btn-primary-text: #ffffff;
6661
- --btn-cta-bg: var(--btn-primary-bg);
6662
- --btn-cta-text: var(--btn-primary-text);
6663
- --sidebar-primary: var(--hsl-primary);
6664
- --sidebar-primary-foreground: var(--hsl-primary-foreground);
6665
- --sidebar-ring: var(--hsl-ring);
6666
- --md3-primary: var(--accent-text);
6667
- --md3-primary-dim: var(--brand-primary);
6668
- --md3-primary-container: var(--btn-primary-bg);
6669
- --md3-on-primary: #ffffff;
6670
- --md3-on-primary-container: var(--brand-purple);
6671
- --md3-primary-fixed: var(--accent-text);
6672
- --md3-primary-fixed-dim: var(--brand-cool);
6673
- --md3-secondary: var(--brand-purple);
6674
- --md3-secondary-dim: var(--accent-text);
6675
- --md3-secondary-container: var(--brand-strong);
6676
- --md3-on-secondary: var(--brand-purple);
6677
- --md3-on-secondary-container: var(--brand-purple);
6678
- --md3-inverse-primary: var(--btn-primary-bg);
6679
- --md3-surface-tint: var(--accent-text);
6680
- --accent-surface-soft: var(--accent-text);
6681
- @supports (color: color-mix(in lab, red, red)) {
6682
- --accent-surface-soft: color-mix(in srgb, var(--accent-text) 7%, transparent);
6683
- }
6684
- --accent-surface-strong: var(--btn-primary-bg);
6685
- @supports (color: color-mix(in lab, red, red)) {
6686
- --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
6687
- }
6688
- --bg-hover: var(--accent-surface-soft);
6689
- --bg-selection: var(--brand-primary);
6690
- @supports (color: color-mix(in lab, red, red)) {
6691
- --bg-selection: color-mix(in srgb, var(--brand-primary) 28%, transparent);
6692
- }
6693
- --border-accent: var(--brand-cool);
6694
- @supports (color: color-mix(in lab, red, red)) {
6695
- --border-accent: color-mix(in srgb, var(--brand-cool) 35%, transparent);
6696
- }
6697
- --border-accent-hover: var(--brand-cool);
6698
- @supports (color: color-mix(in lab, red, red)) {
6699
- --border-accent-hover: color-mix(in srgb, var(--brand-cool) 50%, transparent);
6700
- }
6701
- --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--accent-text));
6702
- --tangle-gradient-text: linear-gradient(135deg, var(--brand-purple), var(--accent-text));
6703
- --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--brand-primary));
6704
- --hsl-success: 154.7 60.2% 60.6%;
6705
- --hsl-warning: 41.5 88.2% 63.3%;
6706
- --hsl-destructive: 2.8 100% 83.1%;
6707
- --hsl-destructive-foreground: 0 60% 10%;
6708
- --hsl-info: 199.7 100% 70.2%;
6709
- --surface-success-text: hsl(var(--hsl-success));
6710
- --surface-success-bg: #2f5146;
6711
- --surface-success-border: #3c7760;
6712
- --surface-warning-text: hsl(var(--hsl-warning));
6713
- --surface-warning-bg: #4b4232;
6714
- --surface-warning-border: #7a6236;
6715
- --surface-danger-text: hsl(var(--hsl-destructive));
6716
- --surface-danger-bg: #5a3b40;
6717
- --surface-danger-border: #7d4d53;
6718
- --surface-info-text: hsl(var(--hsl-info));
6719
- --surface-info-bg: #2d4e67;
6720
- --surface-info-border: #3d7292;
6721
- --status-running: var(--surface-success-text);
6722
- --status-creating: var(--accent-text);
6723
- --status-stopped: var(--surface-warning-text);
6724
- --status-warm: var(--surface-orange-text);
6725
- --status-cold: var(--surface-info-text);
6726
- --status-error: var(--surface-danger-text);
6727
- --status-deleted: var(--text-dim);
6728
- --brand-emerald: var(--surface-success-text);
6729
- --md3-tertiary: var(--surface-success-text);
6730
- --md3-tertiary-container: var(--surface-success-bg);
6731
- --md3-error: var(--surface-danger-text);
6732
- --md3-error-dim: var(--md3-error);
6733
- @supports (color: color-mix(in lab, red, red)) {
6734
- --md3-error-dim: color-mix(in srgb, var(--md3-error) 85%, black);
6735
- }
6736
- --md3-error-container: var(--surface-danger-bg);
6737
- --md3-on-error: hsl(var(--hsl-destructive-foreground));
6738
- --md3-on-error-container: var(--surface-danger-text);
6739
- --background: var(--hsl-background);
6740
- --foreground: var(--hsl-foreground);
6741
- --card: var(--hsl-card);
6742
- --card-foreground: var(--hsl-card-foreground);
6743
- --popover: var(--hsl-popover);
6744
- --popover-foreground: var(--hsl-popover-foreground);
6745
- --primary: var(--hsl-primary);
6746
- --primary-foreground: var(--hsl-primary-foreground);
6747
- --secondary: var(--hsl-secondary);
6748
- --secondary-foreground: var(--hsl-secondary-foreground);
6749
- --muted: var(--hsl-muted);
6750
- --muted-foreground: var(--hsl-muted-foreground);
6751
- --accent: var(--hsl-accent);
6752
- --accent-foreground: var(--hsl-accent-foreground);
6753
- --destructive: var(--hsl-destructive);
6754
- --destructive-foreground: var(--hsl-destructive-foreground);
6755
- --border: var(--hsl-border);
6756
- --input: var(--hsl-muted-foreground);
6757
- --ring: var(--hsl-ring);
6758
- --success: var(--hsl-success);
6759
- --warning: var(--hsl-warning);
6760
- --error: var(--hsl-destructive);
6761
- --info: var(--hsl-info);
6762
- --tone-violet-bg: #392751;
6763
- --tone-violet-bg-hover: #432b60;
6764
- --tone-violet-bg-selected: #4c306c;
6765
- --tone-violet-border: #8457aa;
6766
- --tone-violet-border-selected: #d19dff;
6767
- --tone-violet-text: #ecd9fa;
6768
- --tone-violet-icon: #d19dff;
6769
- --tone-orange-bg: #432823;
6770
- --tone-orange-bg-hover: #512d22;
6771
- --tone-orange-bg-selected: #5e3221;
6772
- --tone-orange-border: #a35829;
6773
- --tone-orange-border-selected: #f76b15;
6774
- --tone-orange-text: #ffe0c2;
6775
- --tone-orange-icon: #f76b15;
6776
- --tone-teal-bg: #18333b;
6777
- --tone-teal-bg-hover: #173b42;
6778
- --tone-teal-bg-selected: #174448;
6779
- --tone-teal-border: #207e73;
6780
- --tone-teal-border-selected: #12a594;
6781
- --tone-teal-text: #adf0dd;
6782
- --tone-teal-icon: #12a594;
6783
- --tone-blue-bg: #143051;
6784
- --tone-blue-bg-hover: #123861;
6785
- --tone-blue-bg-selected: #113e6b;
6786
- --tone-blue-border: #2870bd;
6787
- --tone-blue-border-selected: #0090ff;
6788
- --tone-blue-text: #c2e6ff;
6789
- --tone-blue-icon: #0090ff;
6790
- --tone-pink-bg: #462243;
6791
- --tone-pink-bg-hover: #55254d;
6792
- --tone-pink-bg-selected: #612754;
6793
- --tone-pink-border: #a84885;
6794
- --tone-pink-border-selected: #de51a8;
6795
- --tone-pink-text: #fdd1ea;
6796
- --tone-pink-icon: #de51a8;
6797
- --tone-brown-bg: #372d30;
6798
- --tone-brown-bg-hover: #413434;
6799
- --tone-brown-bg-selected: #4a3a37;
6800
- --tone-brown-border: #7c5f46;
6801
- --tone-brown-border-selected: #ad7f58;
6802
- --tone-brown-text: #f2e1ca;
6803
- --tone-brown-icon: #ad7f58;
6804
- --tone-cyan-bg: #143245;
6805
- --tone-cyan-bg-hover: #133b4e;
6806
- --tone-cyan-bg-selected: #114358;
6807
- --tone-cyan-border: #11809c;
6808
- --tone-cyan-border-selected: #00a2c7;
6809
- --tone-cyan-text: #b6ecf7;
6810
- --tone-cyan-icon: #00a2c7;
6811
- --tone-lime-bg: #2b302d;
6812
- --tone-lime-bg-hover: #32382f;
6813
- --tone-lime-bg-selected: #384132;
6814
- --tone-lime-border: #577538;
6815
- --tone-lime-border-selected: #bdee63;
6816
- --tone-lime-text: #e3f7ba;
6817
- --tone-lime-icon: #bdee63;
6818
- --surface-violet-bg: #392751;
6819
- --surface-violet-border: #8457aa;
6820
- --surface-violet-text: #d19dff;
6821
- --surface-orange-bg: #432823;
6822
- --surface-orange-border: #a35829;
6823
- --surface-orange-text: #ffa057;
6824
- --surface-teal-bg: #18333b;
6825
- --surface-teal-border: #207e73;
6826
- --surface-teal-text: #0bd8b6;
6827
- --run-mix-succeeded: #76edb9;
6828
- --run-mix-waiting: #e9b642;
6829
- --run-mix-failed: #e1918e;
6830
- --run-mix-in-flight: #2d9bca;
6831
- --run-mix-cancelled: #767d90;
6832
- --surface-neutral-bg: var(--depth-3);
6833
- --surface-neutral-border: var(--border-subtle);
6834
- --surface-neutral-text: var(--text-muted);
6835
- --glass-bg: var(--depth-2);
6836
- --glass-bg-strong: var(--depth-3);
6837
- --glass-border: var(--border-subtle);
6838
- --glass-border-hover: var(--border-hover);
6839
- --glass-blur: 0px;
6840
- --mesh-teal: transparent;
6841
- --mesh-violet: transparent;
6842
- --mesh-blue: transparent;
6843
- --code-header-bg: hsl(var(--hsl-background));
6844
- --syntax-foreground: var(--text-primary);
6845
- --syntax-variable: var(--text-secondary);
6846
- --syntax-comment: var(--text-dim);
6847
- --syntax-keyword: var(--tone-violet-icon);
6848
- --syntax-meta: var(--accent-text);
6849
- --syntax-function: var(--surface-info-text);
6850
- --syntax-string: var(--surface-success-text);
6851
- --syntax-number: var(--surface-warning-text);
6852
- --syntax-error: var(--surface-danger-text);
6853
- --code-keyword: var(--syntax-keyword);
6854
- --code-string: var(--syntax-string);
6855
- --code-function: var(--syntax-function);
6856
- --code-number: var(--syntax-number);
6857
- --code-success: var(--surface-success-text);
6858
- --code-comment: var(--syntax-comment);
6859
- --code-error: var(--syntax-error);
6860
- --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
6861
- --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
6862
- --shadow-glow: none;
6863
- --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.3);
6864
- --shadow-overlay: 0 2px 6px hsl(var(--hsl-foreground) / 0.1),
6865
- 0 16px 40px hsl(var(--hsl-foreground) / 0.16);
6866
- --scrim: rgb(0 0 0 / 0.4);
6867
- --scrim-strong: rgb(0 0 0 / 0.72);
6868
- --on-media: #ffffff;
6869
- --shadow-status-running: none;
6870
- --shadow-status-creating: none;
6871
- --shadow-status-error: none;
6872
- --radius-sm: 6px;
6873
- --radius-md: 8px;
6874
- --radius-lg: 10px;
6875
- --radius-xl: 12px;
6876
- --radius-pill: 999px;
6877
- --radius-full: 999px;
6878
- --radius-composer: 26px;
6879
- --radius-tag: 4px;
6880
- --radius-chip: 8px;
6881
- --radius-field: 12px;
6882
- --radius-panel: 16px;
6883
- --radius-cover: 20px;
6884
- --radius-sheet: 24px;
6885
- --radius: 0.5rem;
6886
- --control-height: 2.25rem;
6887
- --control-height-sm: 2rem;
6888
- --control-height-lg: 2.75rem;
6889
- --control-text-sm: 0.75rem;
6890
- --control-text-md: 0.875rem;
6891
- --control-text-lg: 1rem;
6892
- --font-size-label: 0.875rem;
6893
- --font-size-help: 0.75rem;
6894
- --panel-padding: 1rem;
6895
- --content-max-width: 80rem;
6896
- --shell-header-height: 3.5rem;
6897
- --shell-inset-gutter: 0.5rem;
6898
- --transcript-font-size: 1rem;
6899
- --transcript-line-height: var(--line-height-base);
6900
- --font-size-xs: 0.75rem;
6901
- --font-size-sm: 0.875rem;
6902
- --font-size-base: 1rem;
6903
- --font-size-lg: 1.125rem;
6904
- --font-size-xl: 1.25rem;
6905
- --font-size-2xl: 1.5rem;
6906
- --font-size-3xl: 1.875rem;
6907
- --font-size-4xl: 2.25rem;
6908
- --font-size-hero: clamp(2rem, 1.2rem + 3.2vw, 3rem);
6909
- --font-size-display: clamp(2.5rem, 1.1rem + 5vw, 4rem);
6910
- --line-height-tight: 1.3;
6911
- --line-height-base: 1.6;
6912
- --line-height-relaxed: 1.75;
6913
- --line-height-display: 1.05;
6914
- --line-height-heading: 1.15;
6915
- --tracking-tight: -0.02em;
6916
- --tracking-snug: -0.01em;
6917
- --tracking-wide: 0.08em;
6918
- --tracking-display: -0.03em;
6919
- --hero-gutter: 1.5rem;
6920
- --hero-padding-top: clamp(5rem, 3rem + 5vw, 7rem);
6921
- --hero-padding-bottom: clamp(4rem, 2rem + 5vw, 6rem);
6922
- --display-max-width: 56rem;
6923
- --reading-max-width: 42rem;
6924
- --hero-action-gap: 0.75rem;
6925
- --hero-content-gap: 1.5rem;
6926
- --display-control-height: 2.875rem;
6927
- --display-control-radius: 0.625rem;
6928
- --display-control-font-size: 0.9375rem;
6929
- --display-control-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 4px 16px hsl(var(--primary) / 0.2);
6930
- --display-gradient: linear-gradient(135deg, hsl(var(--foreground)) 10%, var(--accent-text) 70%);
6931
- --hero-grid-pitch: 3.5rem;
6932
- --hero-atmosphere-opacity: 0.16;
6933
- --hero-knot-opacity: 0.07;
6934
- --duration-expressive-entrance: 300ms;
6935
- --duration-expressive-ambient: 14s;
6936
- --ease-expressive: cubic-bezier(0.16, 1, 0.3, 1);
6937
- --avatar-size: 2rem;
6938
- --timeline-dot-size: 0.625rem;
6939
- --indicator-dot-size: 0.25rem;
6940
- --code-padding-x: 0.75rem;
6941
- --code-padding-y: 0.625rem;
6942
- --code-font-size: 0.8125rem;
6943
- --code-line-height: 1.5;
6944
- --chat-message-px: 0.875rem;
6945
- --chat-message-py: 0.5rem;
6946
- --chat-input-py: 0.625rem;
6947
- --card-padding: 1.25rem;
6948
- --tool-card-px: 0.75rem;
6949
- --tool-card-py: 0.5rem;
6950
- --tool-icon-size: 1.75rem;
6951
- --duration-instant: 90ms;
6952
- --duration-fast: 150ms;
6953
- --duration-base: 240ms;
6954
- --duration-slow: 360ms;
6955
- --duration-stream: 420ms;
6956
- --duration-arrive: 600ms;
6957
- --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
6958
- --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
6959
- --ease-exit: cubic-bezier(0.4, 0, 1, 1);
6960
- --ease-expo: cubic-bezier(0.23, 1, 0.32, 1);
6961
- --motion-control: var(--duration-fast) var(--ease-standard);
6962
- --motion-surface: var(--duration-base) var(--ease-entrance);
6963
- --motion-dismiss: var(--duration-instant) var(--ease-exit);
6964
- --motion-stream: var(--duration-stream) var(--ease-expo);
6965
- --motion-arrive: var(--duration-arrive) var(--ease-expo);
6966
- --interaction-feedback-budget: 100ms;
6967
- --interaction-pending-delay: 200ms;
6968
- --interaction-long-work-delay: 1000ms;
6969
- --interaction-mutation-budget: 500ms;
6970
- --stagger-step: 50ms;
6971
- --stagger-index: 0;
6972
- --arrive-distance: 8px;
6973
- --stream-blur: 4px;
6974
- --transition-fast: 0.1s ease;
6975
- --transition-default: 0.16s ease;
6976
- --transition-medium: 0.24s ease;
6977
- --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
6978
- --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
6979
- --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
6980
- }
6981
- [data-sandbox-theme="vault"]:where(:not(.dark)), [data-sandbox-theme="dawn"]:where(:not(.dark)), [data-theme="hospitality"]:where(:not(.dark)), [data-theme="website"]:where(:not(.dark)), [data-theme="light"], [data-theme="aubergine-light"], [data-theme="arena-light"], [data-theme="super-light"], [data-theme="tangle-light"], [data-theme="agents-light"], .light {
6982
- color-scheme: light;
6983
- --hsl-background: 223 23% 94%;
6984
- --hsl-input: 225 29% 97%;
6985
- --hsl-card: 0 0% 100%;
6986
- --hsl-secondary: 228 25% 94.5%;
6987
- --hsl-popover: var(--hsl-card);
6988
- --md3-surface-dim: #dcdee6;
6989
- --md3-surface-container-lowest: hsl(var(--hsl-card));
6990
- --md3-surface-bright: #ffffff;
6991
- --sidebar-background: var(--hsl-card);
6992
- --md3-inverse-surface: #2e2e3e;
6993
- --md3-inverse-on-surface: #f0f1f4;
6994
- --hsl-foreground: 0 0% 17.6471%;
6995
- --hsl-muted-foreground: 0 0% 29.8039%;
6996
- --text-secondary: #3f3f3f;
6997
- --text-muted: #4c4c4c;
6998
- --text-dim: #686868;
6999
- --md3-outline: #787878;
7000
- --hsl-border: 244 16% 81%;
7001
- --border-hover: rgba(0, 0, 0, 0.24);
7002
- --hsl-ring: var(--hsl-primary);
7003
- --brand-primary: #6366F1;
7004
- --brand-purple: var(--brand-primary);
7005
- --accent-text: #3c32e9;
7006
- --md3-primary: var(--accent-text);
7007
- --md3-primary-dim: var(--btn-primary-bg);
7008
- --md3-on-primary-container: #ffffff;
7009
- --md3-primary-fixed: #E8E5FF;
7010
- --md3-primary-fixed-dim: var(--md3-primary-fixed);
7011
- @supports (color: color-mix(in lab, red, red)) {
7012
- --md3-primary-fixed-dim: color-mix(in srgb, var(--md3-primary-fixed) 85%, var(--accent-text));
7013
- }
7014
- --md3-secondary: var(--accent-text);
7015
- --md3-secondary-dim: var(--btn-primary-bg);
7016
- --md3-secondary-container: var(--md3-primary-fixed);
7017
- --md3-on-secondary: #ffffff;
7018
- --md3-on-secondary-container: var(--accent-text);
7019
- --md3-inverse-primary: #A5B4FC;
7020
- --md3-surface-tint: var(--brand-primary);
7021
- --accent-surface-soft: var(--btn-primary-bg);
7022
- @supports (color: color-mix(in lab, red, red)) {
7023
- --accent-surface-soft: color-mix(in srgb, var(--btn-primary-bg) 5%, transparent);
6592
+ @layer theme.brand {
6593
+ :root, [data-sandbox-ui], [data-sandbox-theme="vault"], [data-sandbox-theme="dawn"], [data-theme="dark"], [data-theme="light"], [data-theme="aubergine"], [data-theme="aubergine-light"], [data-theme="arena"], [data-theme="arena-light"], [data-theme="super"], [data-theme="super-light"], [data-theme="tangle-dark"], [data-theme="tangle-light"], [data-theme="hospitality"], [data-theme="agents"], [data-theme="agents-light"], [data-theme="website"], .light, .dark {
6594
+ color-scheme: dark;
6595
+ --hsl-background: 246.6667 31.0345% 5.6863%;
6596
+ --hsl-input: 245 26.087% 9.0196%;
6597
+ --hsl-card: 244.2857 22.5806% 12.1569%;
6598
+ --hsl-secondary: 243.3333 20.4545% 17.2549%;
6599
+ --hsl-popover: 242.7273 18.9655% 22.7451%;
6600
+ --hsl-muted: var(--hsl-secondary);
6601
+ --hsl-accent: var(--hsl-secondary);
6602
+ --md3-surface-dim: hsl(240 33.3333% 2.3529%);
6603
+ --md3-surface-container-lowest: var(--md3-surface-dim);
6604
+ --md3-surface-bright: hsl(var(--hsl-popover));
6605
+ --md3-surface: hsl(var(--hsl-background));
6606
+ --md3-surface-container-low: hsl(var(--hsl-input));
6607
+ --md3-surface-container: hsl(var(--hsl-card));
6608
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
6609
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
6610
+ --md3-surface-variant: var(--md3-surface-container-high);
6611
+ --depth-1: var(--md3-surface);
6612
+ --depth-2: var(--md3-surface-container);
6613
+ --depth-3: var(--md3-surface-container-high);
6614
+ --depth-4: var(--md3-surface-container-highest);
6615
+ --bg-root: var(--depth-1);
6616
+ --bg-dark: var(--depth-1);
6617
+ --bg-card: var(--depth-2);
6618
+ --bg-elevated: var(--depth-4);
6619
+ --bg-section: var(--depth-1);
6620
+ --bg-input: hsl(var(--hsl-input));
6621
+ --sidebar-background: var(--hsl-input);
6622
+ --sidebar-accent: var(--hsl-secondary);
6623
+ --md3-inverse-surface: hsl(0 0% 100%);
6624
+ --md3-inverse-on-surface: hsl(0 0% 0%);
6625
+ --hsl-foreground: 0 0% 84.3137%;
6626
+ --hsl-muted-foreground: 0 0% 67.0588%;
6627
+ --text-primary: hsl(var(--hsl-foreground));
6628
+ --text-secondary: hsl(0 0% 74.1176%);
6629
+ --text-muted: hsl(0 0% 67.0588%);
6630
+ --text-dim: hsl(0 0% 60.3922%);
6631
+ --hsl-card-foreground: var(--hsl-foreground);
6632
+ --hsl-popover-foreground: var(--hsl-foreground);
6633
+ --hsl-secondary-foreground: var(--hsl-foreground);
6634
+ --hsl-accent-foreground: var(--hsl-foreground);
6635
+ --sidebar-foreground: var(--hsl-foreground);
6636
+ --sidebar-accent-foreground: var(--hsl-foreground);
6637
+ --md3-on-surface: var(--text-primary);
6638
+ --md3-on-surface-variant: var(--text-muted);
6639
+ --md3-outline: hsl(var(--hsl-muted-foreground));
6640
+ --hsl-border: 245 18.4615% 25.4902%;
6641
+ --md3-outline-variant: hsl(var(--hsl-border));
6642
+ --sidebar-border: var(--hsl-border);
6643
+ --border-subtle: hsl(var(--hsl-border));
6644
+ --border-default: hsl(var(--hsl-border));
6645
+ --border-hover: rgb(215 215 215 / 0.28);
6646
+ --hsl-primary: 245.9504 54.2601% 56.2745%;
6647
+ --hsl-primary-foreground: 0 0% 100%;
6648
+ --hsl-ring: 245.5556 93.1034% 88.6275%;
6649
+ --brand-primary: hsl(245.5102 65.3333% 70.5882%);
6650
+ --brand-cool: hsl(246.0465 85.4305% 70.3922%);
6651
+ --accent-text: hsl(245.5556 93.1034% 88.6275%);
6652
+ --brand-purple: hsl(245.1429 94.5946% 92.7451%);
6653
+ --brand-strong: hsl(246 41.6667% 28.2353%);
6654
+ --brand-strong-text: hsl(0 0% 100%);
6655
+ --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
6656
+ --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
6657
+ --brand-glow: var(--accent-text);
6658
+ --brand-vibrant: var(--brand-primary);
6659
+ --btn-primary-bg: hsl(var(--hsl-primary));
6660
+ --btn-primary-hover: hsl(246.055 54.2289% 60.5882%);
6661
+ --btn-primary-text: hsl(0 0% 100%);
6662
+ --btn-cta-bg: var(--btn-primary-bg);
6663
+ --btn-cta-text: var(--btn-primary-text);
6664
+ --sidebar-primary: var(--hsl-primary);
6665
+ --sidebar-primary-foreground: var(--hsl-primary-foreground);
6666
+ --sidebar-ring: var(--hsl-ring);
6667
+ --md3-primary: var(--accent-text);
6668
+ --md3-primary-dim: var(--btn-primary-bg);
6669
+ --md3-primary-container: var(--btn-primary-bg);
6670
+ --md3-on-primary: hsl(0 0% 100%);
6671
+ --md3-on-primary-container: var(--brand-purple);
6672
+ --md3-primary-fixed: var(--accent-text);
6673
+ --md3-primary-fixed-dim: var(--brand-cool);
6674
+ --md3-secondary: var(--brand-purple);
6675
+ --md3-secondary-dim: var(--accent-text);
6676
+ --md3-secondary-container: var(--brand-strong);
6677
+ --md3-on-secondary: var(--brand-purple);
6678
+ --md3-on-secondary-container: var(--brand-purple);
6679
+ --md3-inverse-primary: var(--btn-primary-bg);
6680
+ --md3-surface-tint: var(--accent-text);
6681
+ --accent-surface-soft: var(--accent-text);
6682
+ @supports (color: color-mix(in lab, red, red)) {
6683
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 7%, transparent);
6684
+ }
6685
+ --accent-surface-strong: var(--btn-primary-bg);
6686
+ @supports (color: color-mix(in lab, red, red)) {
6687
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
6688
+ }
6689
+ --bg-hover: var(--accent-text);
6690
+ @supports (color: color-mix(in lab, red, red)) {
6691
+ --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent);
6692
+ }
6693
+ --bg-selection: var(--btn-primary-bg);
6694
+ @supports (color: color-mix(in lab, red, red)) {
6695
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 28%, transparent);
6696
+ }
6697
+ --border-accent: var(--brand-cool);
6698
+ @supports (color: color-mix(in lab, red, red)) {
6699
+ --border-accent: color-mix(in srgb, var(--brand-cool) 35%, transparent);
6700
+ }
6701
+ --border-accent-hover: var(--brand-cool);
6702
+ @supports (color: color-mix(in lab, red, red)) {
6703
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 50%, transparent);
6704
+ }
6705
+ --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
6706
+ --tangle-gradient-text: linear-gradient(135deg, var(--brand-purple), var(--accent-text));
6707
+ --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
6708
+ --hsl-success: 155.1429 64.8148% 78.8235%;
6709
+ --hsl-warning: 38.5714 65.1163% 83.1373%;
6710
+ --hsl-destructive: 0 74.4681% 90.7843%;
6711
+ --hsl-destructive-foreground: 0 0% 0%;
6712
+ --hsl-info: 201.7021 66.1972% 86.0784%;
6713
+ --surface-success-text: hsl(var(--hsl-success));
6714
+ --surface-success-bg: #21342c;
6715
+ --surface-success-border: #496b5d;
6716
+ --surface-warning-text: hsl(var(--hsl-warning));
6717
+ --surface-warning-bg: #362f22;
6718
+ --surface-warning-border: #6e634f;
6719
+ --surface-danger-text: hsl(var(--hsl-destructive));
6720
+ --surface-danger-bg: #412a2a;
6721
+ --surface-danger-border: #785e5e;
6722
+ --surface-info-text: hsl(var(--hsl-info));
6723
+ --surface-info-bg: #243239;
6724
+ --surface-info-border: #546771;
6725
+ --status-running: var(--surface-success-text);
6726
+ --status-creating: var(--accent-text);
6727
+ --status-stopped: var(--surface-warning-text);
6728
+ --status-warm: var(--surface-orange-text);
6729
+ --status-cold: var(--surface-info-text);
6730
+ --status-error: var(--surface-danger-text);
6731
+ --status-deleted: var(--text-dim);
6732
+ --brand-emerald: var(--surface-success-text);
6733
+ --md3-tertiary: var(--surface-success-text);
6734
+ --md3-tertiary-container: var(--surface-success-bg);
6735
+ --md3-error: var(--surface-danger-text);
6736
+ --md3-error-dim: var(--md3-error);
6737
+ @supports (color: color-mix(in lab, red, red)) {
6738
+ --md3-error-dim: color-mix(in srgb, var(--md3-error) 85%, black);
6739
+ }
6740
+ --md3-error-container: var(--surface-danger-bg);
6741
+ --md3-on-error: hsl(var(--hsl-destructive-foreground));
6742
+ --md3-on-error-container: var(--surface-danger-text);
6743
+ --background: var(--hsl-background);
6744
+ --foreground: var(--hsl-foreground);
6745
+ --card: var(--hsl-card);
6746
+ --card-foreground: var(--hsl-card-foreground);
6747
+ --popover: var(--hsl-popover);
6748
+ --popover-foreground: var(--hsl-popover-foreground);
6749
+ --primary: var(--hsl-primary);
6750
+ --primary-foreground: var(--hsl-primary-foreground);
6751
+ --secondary: var(--hsl-secondary);
6752
+ --secondary-foreground: var(--hsl-secondary-foreground);
6753
+ --muted: var(--hsl-muted);
6754
+ --muted-foreground: var(--hsl-muted-foreground);
6755
+ --accent: var(--hsl-accent);
6756
+ --accent-foreground: var(--hsl-accent-foreground);
6757
+ --destructive: var(--hsl-destructive);
6758
+ --destructive-foreground: var(--hsl-destructive-foreground);
6759
+ --border: var(--hsl-border);
6760
+ --input: var(--hsl-muted-foreground);
6761
+ --ring: var(--hsl-ring);
6762
+ --success: var(--hsl-success);
6763
+ --warning: var(--hsl-warning);
6764
+ --error: var(--hsl-destructive);
6765
+ --info: var(--hsl-info);
6766
+ --tone-violet-bg: hsl(270.8108 31.6239% 22.9412%);
6767
+ --tone-violet-bg-hover: hsl(271.4286 31.3433% 26.2745%);
6768
+ --tone-violet-bg-selected: hsl(271.9149 31.5436% 29.2157%);
6769
+ --tone-violet-border: hsl(272.1739 27.49% 49.2157%);
6770
+ --tone-violet-border-selected: hsl(272.4 79.3651% 75.2941%);
6771
+ --tone-violet-text: hsl(272 81.0811% 85.4902%);
6772
+ --tone-violet-icon: hsl(272.4 79.3651% 75.2941%);
6773
+ --tone-violet-fill: 272.1081 80.0866% 54.7059%;
6774
+ --tone-violet-ring: 272.5424 80.8219% 85.6863%;
6775
+ --tone-violet-mark: hsl(272.4 79.3651% 75.2941%);
6776
+ --tone-violet-line: hsl(272.4 79.3651% 75.2941%);
6777
+ --tone-violet-ink: hsl(272.5424 80.8219% 85.6863%);
6778
+ --tone-orange-bg: hsl(23.2258 32.6316% 18.6275%);
6779
+ --tone-orange-bg-hover: hsl(21.6667 32.7273% 21.5686%);
6780
+ --tone-orange-bg-selected: hsl(22.5 32.7869% 23.9216%);
6781
+ --tone-orange-border: hsl(22.4176 43.5407% 40.9804%);
6782
+ --tone-orange-border-selected: hsl(22.2517 79.8942% 62.9412%);
6783
+ --tone-orange-text: hsl(22.5 80% 78.4314%);
6784
+ --tone-orange-icon: hsl(22.2517 79.8942% 62.9412%);
6785
+ --tone-orange-fill: 22 79.7872% 36.8627%;
6786
+ --tone-orange-ring: 22.1429 80.7692% 79.6078%;
6787
+ --tone-orange-mark: hsl(22.2517 79.8942% 62.9412%);
6788
+ --tone-orange-line: hsl(22.2517 79.8942% 62.9412%);
6789
+ --tone-orange-ink: hsl(22.1429 80.7692% 79.6078%);
6790
+ --tone-teal-bg: hsl(170.7692 32.5% 15.6863%);
6791
+ --tone-teal-bg-hover: hsl(172 32.6087% 18.0392%);
6792
+ --tone-teal-bg-selected: hsl(172.5 31.3725% 20%);
6793
+ --tone-teal-border: hsl(171.7895 66.4336% 28.0392%);
6794
+ --tone-teal-border-selected: hsl(171.9512 79.6117% 40.3922%);
6795
+ --tone-teal-text: hsl(171.9 80% 49.0196%);
6796
+ --tone-teal-icon: hsl(171.9512 79.6117% 40.3922%);
6797
+ --tone-teal-fill: 172.2772 79.5276% 24.902%;
6798
+ --tone-teal-ring: 171.7647 80.315% 49.8039%;
6799
+ --tone-teal-mark: hsl(171.9512 79.6117% 40.3922%);
6800
+ --tone-teal-line: hsl(171.9512 79.6117% 40.3922%);
6801
+ --tone-teal-ink: hsl(171.7647 80.315% 49.8039%);
6802
+ --tone-blue-bg: hsl(208.125 32.6531% 19.2157%);
6803
+ --tone-blue-bg-hover: hsl(208.3333 32.1429% 21.9608%);
6804
+ --tone-blue-bg-selected: hsl(208.5 31.746% 24.7059%);
6805
+ --tone-blue-border: hsl(209.3023 39.4495% 42.7451%);
6806
+ --tone-blue-border-selected: hsl(209.1429 80.4598% 65.8824%);
6807
+ --tone-blue-text: hsl(208.9157 80.5825% 79.8039%);
6808
+ --tone-blue-icon: hsl(209.1429 80.4598% 65.8824%);
6809
+ --tone-blue-fill: 209.0683 80.0995% 39.4118%;
6810
+ --tone-blue-ring: 208.4211 79.1667% 81.1765%;
6811
+ --tone-blue-mark: hsl(209.1429 80.4598% 65.8824%);
6812
+ --tone-blue-line: hsl(209.1429 80.4598% 65.8824%);
6813
+ --tone-blue-ink: hsl(208.4211 79.1667% 81.1765%);
6814
+ --tone-pink-bg: hsl(322.9412 31.4815% 21.1765%);
6815
+ --tone-pink-bg-hover: hsl(322.5 32.2581% 24.3137%);
6816
+ --tone-pink-bg-selected: hsl(323.1818 31.8841% 27.0588%);
6817
+ --tone-pink-border: hsl(322.7027 31.0924% 46.6667%);
6818
+ --tone-pink-border-selected: hsl(322.4348 80.4196% 71.9608%);
6819
+ --tone-pink-text: hsl(322.7273 80.4878% 83.9216%);
6820
+ --tone-pink-icon: hsl(322.4348 80.4196% 71.9608%);
6821
+ --tone-pink-fill: 322 80.3571% 43.9216%;
6822
+ --tone-pink-ring: 322.7273 80.4878% 83.9216%;
6823
+ --tone-pink-mark: hsl(322.4348 80.4196% 71.9608%);
6824
+ --tone-pink-line: hsl(322.4348 80.4196% 71.9608%);
6825
+ --tone-pink-ink: hsl(322.7273 80.4878% 83.9216%);
6826
+ --tone-brown-bg: hsl(24 31.9149% 18.4314%);
6827
+ --tone-brown-bg-hover: hsl(24.7059 31.4815% 21.1765%);
6828
+ --tone-brown-bg-selected: hsl(24.6154 32.2314% 23.7255%);
6829
+ --tone-brown-border: hsl(24.2553 22.2749% 41.3725%);
6830
+ --tone-brown-border-selected: hsl(24 35.5191% 64.1176%);
6831
+ --tone-brown-text: hsl(24.6154 35.1351% 78.2353%);
6832
+ --tone-brown-icon: hsl(24 35.5191% 64.1176%);
6833
+ --tone-brown-fill: 23.662 36.0406% 38.6275%;
6834
+ --tone-brown-ring: 25 35.2941% 80%;
6835
+ --tone-brown-mark: hsl(24 35.5191% 64.1176%);
6836
+ --tone-brown-line: hsl(24 35.5191% 64.1176%);
6837
+ --tone-brown-ink: hsl(25 35.2941% 80%);
6838
+ --tone-cyan-bg: hsl(192.8571 32.5581% 16.8627%);
6839
+ --tone-cyan-bg-hover: hsl(191.25 32.6531% 19.2157%);
6840
+ --tone-cyan-bg-selected: hsl(191.6667 32.7273% 21.5686%);
6841
+ --tone-cyan-border: hsl(192.3214 68.2927% 32.1569%);
6842
+ --tone-cyan-border-selected: hsl(192.0619 80.1653% 47.451%);
6843
+ --tone-cyan-text: hsl(191.7188 80% 68.6275%);
6844
+ --tone-cyan-icon: hsl(192.0619 80.1653% 47.451%);
6845
+ --tone-cyan-fill: 192.3967 80.1325% 29.6078%;
6846
+ --tone-cyan-ring: 191.8966 79.4521% 71.3725%;
6847
+ --tone-cyan-mark: hsl(192.0619 80.1653% 47.451%);
6848
+ --tone-cyan-line: hsl(192.0619 80.1653% 47.451%);
6849
+ --tone-cyan-ink: hsl(191.8966 79.4521% 71.3725%);
6850
+ --tone-lime-bg: hsl(82.5 30.7692% 15.2941%);
6851
+ --tone-lime-bg-hover: hsl(84.8276 32.5843% 17.451%);
6852
+ --tone-lime-bg-selected: hsl(84.375 32% 19.6078%);
6853
+ --tone-lime-border: hsl(84 52.6316% 29.8039%);
6854
+ --tone-lime-border-selected: hsl(84.2647 60.177% 44.3137%);
6855
+ --tone-lime-text: hsl(83.6975 59.799% 60.9804%);
6856
+ --tone-lime-icon: hsl(84.2647 60.177% 44.3137%);
6857
+ --tone-lime-fill: 84.5783 59.7122% 27.2549%;
6858
+ --tone-lime-ring: 84 60.4396% 64.3137%;
6859
+ --tone-lime-mark: hsl(84.2647 60.177% 44.3137%);
6860
+ --tone-lime-line: hsl(84.2647 60.177% 44.3137%);
6861
+ --tone-lime-ink: hsl(84 60.4396% 64.3137%);
6862
+ --surface-violet-bg: var(--tone-violet-bg);
6863
+ --surface-violet-border: var(--tone-violet-border);
6864
+ --surface-violet-text: var(--tone-violet-text);
6865
+ --surface-orange-bg: var(--tone-orange-bg);
6866
+ --surface-orange-border: var(--tone-orange-border);
6867
+ --surface-orange-text: var(--tone-orange-text);
6868
+ --surface-teal-bg: var(--tone-teal-bg);
6869
+ --surface-teal-border: var(--tone-teal-border);
6870
+ --surface-teal-text: var(--tone-teal-text);
6871
+ --run-mix-succeeded: hsl(154.9315 59.8361% 47.8431%);
6872
+ --run-mix-waiting: hsl(37.7483 60.1594% 49.2157%);
6873
+ --run-mix-failed: hsl(0 60.4278% 63.3333%);
6874
+ --run-mix-in-flight: hsl(200.8889 60% 44.1176%);
6875
+ --run-mix-cancelled: hsl(229.2857 11.7647% 46.6667%);
6876
+ --surface-neutral-bg: var(--depth-3);
6877
+ --surface-neutral-border: var(--border-subtle);
6878
+ --surface-neutral-text: var(--text-muted);
6879
+ --glass-bg: var(--depth-2);
6880
+ --glass-bg-strong: var(--depth-3);
6881
+ --glass-border: var(--border-subtle);
6882
+ --glass-border-hover: var(--border-hover);
6883
+ --glass-blur: 0px;
6884
+ --mesh-teal: transparent;
6885
+ --mesh-violet: transparent;
6886
+ --mesh-blue: transparent;
6887
+ --code-header-bg: hsl(var(--hsl-background));
6888
+ --syntax-foreground: var(--text-primary);
6889
+ --syntax-variable: var(--text-secondary);
6890
+ --syntax-comment: var(--text-dim);
6891
+ --syntax-keyword: var(--tone-violet-text);
6892
+ --syntax-meta: var(--accent-text);
6893
+ --syntax-function: var(--surface-info-text);
6894
+ --syntax-string: var(--surface-success-text);
6895
+ --syntax-number: var(--surface-warning-text);
6896
+ --syntax-error: var(--surface-danger-text);
6897
+ --code-keyword: var(--syntax-keyword);
6898
+ --code-string: var(--syntax-string);
6899
+ --code-function: var(--syntax-function);
6900
+ --code-number: var(--syntax-number);
6901
+ --code-success: var(--surface-success-text);
6902
+ --code-comment: var(--syntax-comment);
6903
+ --code-error: var(--syntax-error);
6904
+ --shadow-color: 0 0% 0%;
6905
+ --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.3);
6906
+ --shadow-dropdown: 0 8px 30px hsl(var(--shadow-color) / 0.45);
6907
+ --shadow-glow: none;
6908
+ --shadow-accent: var(--shadow-card);
6909
+ --shadow-overlay: 0 2px 6px hsl(var(--shadow-color) / 0.3), 0 16px 40px hsl(var(--shadow-color) / 0.5);
6910
+ --scrim: rgb(0 0 0 / 0.4);
6911
+ --scrim-strong: rgb(0 0 0 / 0.72);
6912
+ --on-media: #ffffff;
6913
+ --shadow-status-running: none;
6914
+ --shadow-status-creating: none;
6915
+ --shadow-status-error: none;
6916
+ --radius-sm: 6px;
6917
+ --radius-md: 8px;
6918
+ --radius-lg: 10px;
6919
+ --radius-xl: 12px;
6920
+ --radius-pill: 999px;
6921
+ --radius-full: 999px;
6922
+ --radius-composer: 26px;
6923
+ --radius-tag: 4px;
6924
+ --radius-control: var(--radius-md);
6925
+ --radius-card: var(--radius-xl);
6926
+ --radius-container: 16px;
6927
+ --radius-chip: var(--radius-control);
6928
+ --radius-field: var(--radius-card);
6929
+ --radius-panel: var(--radius-container);
6930
+ --radius-cover: 20px;
6931
+ --radius-sheet: 24px;
6932
+ --radius: 0.5rem;
6933
+ --control-height: 2.25rem;
6934
+ --control-height-sm: 2rem;
6935
+ --control-height-lg: 2.75rem;
6936
+ --control-text-sm: 0.75rem;
6937
+ --control-text-md: 0.875rem;
6938
+ --control-text-lg: 1rem;
6939
+ --font-size-label: 0.875rem;
6940
+ --font-size-help: 0.75rem;
6941
+ --panel-padding: 1rem;
6942
+ --content-max-width: 80rem;
6943
+ --shell-header-height: 3.5rem;
6944
+ --shell-inset-gutter: 0.5rem;
6945
+ --transcript-font-size: 1rem;
6946
+ --transcript-line-height: var(--line-height-base);
6947
+ --font-size-xs: 0.75rem;
6948
+ --font-size-sm: 0.875rem;
6949
+ --font-size-base: 1rem;
6950
+ --font-size-lg: 1.125rem;
6951
+ --font-size-xl: 1.25rem;
6952
+ --font-size-2xl: 1.5rem;
6953
+ --font-size-3xl: 1.875rem;
6954
+ --font-size-4xl: 2.25rem;
6955
+ --font-size-hero: clamp(2rem, 1.2rem + 3.2vw, 3rem);
6956
+ --font-size-display: clamp(2.5rem, 1.1rem + 5vw, 4rem);
6957
+ --line-height-tight: 1.3;
6958
+ --line-height-base: 1.6;
6959
+ --line-height-relaxed: 1.75;
6960
+ --line-height-display: 1.05;
6961
+ --line-height-heading: 1.15;
6962
+ --tracking-tight: -0.02em;
6963
+ --tracking-snug: -0.01em;
6964
+ --tracking-wide: 0.08em;
6965
+ --tracking-display: -0.03em;
6966
+ --hero-gutter: 1.5rem;
6967
+ --hero-padding-top: clamp(5rem, 3rem + 5vw, 7rem);
6968
+ --hero-padding-bottom: clamp(4rem, 2rem + 5vw, 6rem);
6969
+ --display-max-width: 56rem;
6970
+ --reading-max-width: 42rem;
6971
+ --hero-action-gap: 0.75rem;
6972
+ --hero-content-gap: 1.5rem;
6973
+ --display-control-height: 2.875rem;
6974
+ --display-control-radius: 0.625rem;
6975
+ --display-control-font-size: 0.9375rem;
6976
+ --display-control-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 4px 16px hsl(var(--primary) / 0.2);
6977
+ --display-gradient: linear-gradient(135deg, hsl(var(--foreground)) 10%, var(--accent-text) 70%);
6978
+ --hero-grid-pitch: 3.5rem;
6979
+ --hero-atmosphere-opacity: 0.16;
6980
+ --hero-knot-opacity: 0.07;
6981
+ --duration-expressive-entrance: 300ms;
6982
+ --duration-expressive-ambient: 14s;
6983
+ --ease-expressive: cubic-bezier(0.16, 1, 0.3, 1);
6984
+ --avatar-size: 2rem;
6985
+ --timeline-dot-size: 0.625rem;
6986
+ --indicator-dot-size: 0.25rem;
6987
+ --code-padding-x: 0.75rem;
6988
+ --code-padding-y: 0.625rem;
6989
+ --code-font-size: 0.8125rem;
6990
+ --code-line-height: 1.5;
6991
+ --chat-message-px: 0.875rem;
6992
+ --chat-message-py: 0.5rem;
6993
+ --chat-input-py: 0.625rem;
6994
+ --card-padding: 1.25rem;
6995
+ --tool-card-px: 0.75rem;
6996
+ --tool-card-py: 0.5rem;
6997
+ --tool-icon-size: 1.75rem;
6998
+ --duration-instant: 90ms;
6999
+ --duration-fast: 150ms;
7000
+ --duration-base: 240ms;
7001
+ --duration-slow: 360ms;
7002
+ --duration-stream: 420ms;
7003
+ --duration-arrive: 600ms;
7004
+ --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
7005
+ --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
7006
+ --ease-exit: cubic-bezier(0.4, 0, 1, 1);
7007
+ --ease-expo: cubic-bezier(0.23, 1, 0.32, 1);
7008
+ --motion-control: var(--duration-fast) var(--ease-standard);
7009
+ --motion-surface: var(--duration-base) var(--ease-entrance);
7010
+ --motion-dismiss: var(--duration-instant) var(--ease-exit);
7011
+ --motion-stream: var(--duration-stream) var(--ease-expo);
7012
+ --motion-arrive: var(--duration-arrive) var(--ease-expo);
7013
+ --duration-ambient: 2000ms;
7014
+ --motion-ambient: var(--duration-ambient) ease-in-out;
7015
+ --interaction-feedback-budget: 100ms;
7016
+ --interaction-pending-delay: 200ms;
7017
+ --interaction-long-work-delay: 1000ms;
7018
+ --interaction-mutation-budget: 500ms;
7019
+ --stagger-step: 50ms;
7020
+ --stagger-index: 0;
7021
+ --arrive-distance: 8px;
7022
+ --stream-blur: 4px;
7023
+ --transition-fast: 0.1s ease;
7024
+ --transition-default: 0.16s ease;
7025
+ --transition-medium: 0.24s ease;
7026
+ --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
7027
+ --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
7028
+ --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
7024
7029
  }
7025
- --accent-surface-strong: var(--btn-primary-bg);
7026
- @supports (color: color-mix(in lab, red, red)) {
7027
- --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent);
7030
+ [data-sandbox-theme="vault"]:where(:not(.dark)), [data-sandbox-theme="dawn"]:where(:not(.dark)), [data-theme="hospitality"]:where(:not(.dark)), [data-theme="website"]:where(:not(.dark)), [data-theme="light"], [data-theme="aubergine-light"], [data-theme="arena-light"], [data-theme="super-light"], [data-theme="tangle-light"], [data-theme="agents-light"], .light {
7031
+ color-scheme: light;
7032
+ --hsl-background: 225 26.6667% 94.1176%;
7033
+ --hsl-input: 231.4286 46.6667% 97.0588%;
7034
+ --hsl-card: 0 0% 100%;
7035
+ --hsl-secondary: 225 28.5714% 94.5098%;
7036
+ --hsl-popover: 0 0% 100%;
7037
+ --md3-surface-dim: hsl(231.4286 11.4754% 88.0392%);
7038
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
7039
+ --md3-surface-bright: hsl(var(--hsl-popover));
7040
+ --sidebar-background: var(--hsl-card);
7041
+ --md3-inverse-surface: hsl(0 0% 18.0392%);
7042
+ --md3-inverse-on-surface: hsl(0 0% 100%);
7043
+ --hsl-foreground: 0 0% 24.7059%;
7044
+ --hsl-muted-foreground: 0 0% 36.4706%;
7045
+ --text-secondary: hsl(0 0% 31.3725%);
7046
+ --text-muted: hsl(0 0% 36.4706%);
7047
+ --text-dim: hsl(0 0% 41.9608%);
7048
+ --md3-outline: hsl(var(--hsl-muted-foreground));
7049
+ --hsl-border: 222.8571 6.6667% 79.4118%;
7050
+ --border-hover: rgb(63 63 63 / 0.28);
7051
+ --hsl-ring: 245.9504 54.2601% 56.2745%;
7052
+ --brand-primary: hsl(245.9091 64.7059% 60%);
7053
+ --brand-purple: hsl(246.5217 92% 70.5882%);
7054
+ --accent-text: hsl(246.2264 92.1739% 54.902%);
7055
+ --md3-primary: var(--accent-text);
7056
+ --md3-primary-dim: var(--btn-primary-bg);
7057
+ --md3-on-primary-container: hsl(0 0% 100%);
7058
+ --md3-primary-fixed: hsl(246.9231 92.8571% 94.5098%);
7059
+ --md3-primary-fixed-dim: var(--md3-primary-fixed);
7060
+ @supports (color: color-mix(in lab, red, red)) {
7061
+ --md3-primary-fixed-dim: color-mix(in srgb, var(--md3-primary-fixed) 85%, var(--accent-text));
7062
+ }
7063
+ --md3-secondary: var(--accent-text);
7064
+ --md3-secondary-dim: var(--btn-primary-bg);
7065
+ --md3-secondary-container: var(--md3-primary-fixed);
7066
+ --md3-on-secondary: hsl(0 0% 100%);
7067
+ --md3-on-secondary-container: var(--accent-text);
7068
+ --md3-inverse-primary: hsl(246.0759 64.2276% 75.8824%);
7069
+ --md3-surface-tint: var(--accent-text);
7070
+ --accent-surface-soft: var(--accent-text);
7071
+ @supports (color: color-mix(in lab, red, red)) {
7072
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 5%, transparent);
7073
+ }
7074
+ --accent-surface-strong: var(--btn-primary-bg);
7075
+ @supports (color: color-mix(in lab, red, red)) {
7076
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent);
7077
+ }
7078
+ --bg-selection: var(--btn-primary-bg);
7079
+ @supports (color: color-mix(in lab, red, red)) {
7080
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent);
7081
+ }
7082
+ --border-accent: var(--brand-cool);
7083
+ @supports (color: color-mix(in lab, red, red)) {
7084
+ --border-accent: color-mix(in srgb, var(--brand-cool) 20%, transparent);
7085
+ }
7086
+ --border-accent-hover: var(--brand-cool);
7087
+ @supports (color: color-mix(in lab, red, red)) {
7088
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 36%, transparent);
7089
+ }
7090
+ --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
7091
+ --tangle-gradient-text: var(--tangle-gradient);
7092
+ --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
7093
+ --hsl-success: 154.8148 64.8% 24.5098%;
7094
+ --hsl-warning: 38.2979 65.2778% 28.2353%;
7095
+ --hsl-destructive: 0 75.1244% 39.4118%;
7096
+ --hsl-destructive-foreground: 0 0% 100%;
7097
+ --hsl-info: 201.1429 65.2174% 31.5686%;
7098
+ --surface-success-bg: #f1f6f4;
7099
+ --surface-success-border: #afcbc0;
7100
+ --surface-warning-bg: #f7f5f1;
7101
+ --surface-warning-border: #d1c5b0;
7102
+ --surface-danger-bg: #faf1f1;
7103
+ --surface-danger-border: #e4b0b0;
7104
+ --surface-info-bg: #f1f5f8;
7105
+ --surface-info-border: #b1c8d6;
7106
+ --tone-violet-bg: hsl(272.3077 86.6667% 97.0588%);
7107
+ --tone-violet-bg-hover: hsl(272.7273 78.5714% 94.5098%);
7108
+ --tone-violet-bg-selected: hsl(270.9091 80.4878% 91.9608%);
7109
+ --tone-violet-border: hsl(272.5301 80.5825% 79.8039%);
7110
+ --tone-violet-border-selected: hsl(272.1569 80.1047% 62.549%);
7111
+ --tone-violet-text: hsl(272.1212 79.8387% 51.3725%);
7112
+ --tone-violet-icon: hsl(272.1569 80.1047% 62.549%);
7113
+ --tone-violet-fill: 272.1081 80.0866% 54.7059%;
7114
+ --tone-violet-ring: 272.1081 80.0866% 54.7059%;
7115
+ --tone-violet-mark: hsl(272.1569 80.1047% 62.549%);
7116
+ --tone-violet-line: hsl(272.1569 80.1047% 62.549%);
7117
+ --tone-violet-ink: hsl(271.8857 79.9087% 42.9412%);
7118
+ --tone-orange-bg: hsl(20 42.8571% 95.8824%);
7119
+ --tone-orange-bg-hover: hsl(20 47.3684% 92.549%);
7120
+ --tone-orange-bg-selected: hsl(20 47.3684% 88.8235%);
7121
+ --tone-orange-border: hsl(22.1053 62.9139% 70.3922%);
7122
+ --tone-orange-border-selected: hsl(21.9672 79.9127% 44.902%);
7123
+ --tone-orange-text: hsl(22.0833 80% 35.2941%);
7124
+ --tone-orange-icon: hsl(21.9672 79.9127% 44.902%);
7125
+ --tone-orange-fill: 22 79.7872% 36.8627%;
7126
+ --tone-orange-ring: 22 79.7872% 36.8627%;
7127
+ --tone-orange-mark: hsl(21.9672 79.9127% 44.902%);
7128
+ --tone-orange-line: hsl(21.9672 79.9127% 44.902%);
7129
+ --tone-orange-ink: hsl(22.314 80.1325% 29.6078%);
7130
+ --tone-teal-bg: hsl(171.4286 28% 95.098%);
7131
+ --tone-teal-bg-hover: hsl(175 26.087% 90.9804%);
7132
+ --tone-teal-bg-selected: hsl(170.5263 27.5362% 86.4706%);
7133
+ --tone-teal-border: hsl(171.8182 35.1064% 63.1373%);
7134
+ --tone-teal-border-selected: hsl(172.32 79.6178% 30.7843%);
7135
+ --tone-teal-text: hsl(172.1212 80.4878% 24.1176%);
7136
+ --tone-teal-icon: hsl(172.32 79.6178% 30.7843%);
7137
+ --tone-teal-fill: 172.2772 79.5276% 24.902%;
7138
+ --tone-teal-ring: 172.2772 79.5276% 24.902%;
7139
+ --tone-teal-mark: hsl(172.32 79.6178% 30.7843%);
7140
+ --tone-teal-line: hsl(172.32 79.6178% 30.7843%);
7141
+ --tone-teal-ink: hsl(172.0482 80.5825% 20.1961%);
7142
+ --tone-blue-bg: hsl(210 50% 96.0784%);
7143
+ --tone-blue-bg-hover: hsl(208.4211 51.3514% 92.7451%);
7144
+ --tone-blue-bg-selected: hsl(208.9655 52.7273% 89.2157%);
7145
+ --tone-blue-border: hsl(209.4231 74.2857% 72.549%);
7146
+ --tone-blue-border-selected: hsl(209.0909 79.8387% 48.6275%);
7147
+ --tone-blue-text: hsl(209.2308 79.5918% 38.4314%);
7148
+ --tone-blue-icon: hsl(209.0909 79.8387% 48.6275%);
7149
+ --tone-blue-fill: 209.0683 80.0995% 39.4118%;
7150
+ --tone-blue-ring: 209.0683 80.0995% 39.4118%;
7151
+ --tone-blue-mark: hsl(209.0909 79.8387% 48.6275%);
7152
+ --tone-blue-line: hsl(209.0909 79.8387% 48.6275%);
7153
+ --tone-blue-ink: hsl(209.0909 80.4878% 32.1569%);
7154
+ --tone-pink-bg: hsl(325 66.6667% 96.4706%);
7155
+ --tone-pink-bg-hover: hsl(321.8182 64.7059% 93.3333%);
7156
+ --tone-pink-bg-selected: hsl(320.625 61.5385% 89.8039%);
7157
+ --tone-pink-border: hsl(322.2222 79.4118% 73.3333%);
7158
+ --tone-pink-border-selected: hsl(321.7647 80.315% 49.8039%);
7159
+ --tone-pink-text: hsl(321.9876 80.0995% 39.4118%);
7160
+ --tone-pink-icon: hsl(321.7647 80.315% 49.8039%);
7161
+ --tone-pink-fill: 322 80.3571% 43.9216%;
7162
+ --tone-pink-ring: 322 80.3571% 43.9216%;
7163
+ --tone-pink-mark: hsl(321.7647 80.315% 49.8039%);
7164
+ --tone-pink-line: hsl(321.7647 80.315% 49.8039%);
7165
+ --tone-pink-ink: hsl(321.9403 79.7619% 32.9412%);
7166
+ --tone-brown-bg: hsl(15 20% 96.0784%);
7167
+ --tone-brown-bg-hover: hsl(22.5 21.0526% 92.549%);
7168
+ --tone-brown-bg-selected: hsl(23.0769 22.807% 88.8235%);
7169
+ --tone-brown-border: hsl(23.4783 32.3944% 72.1569%);
7170
+ --tone-brown-border-selected: hsl(23.8636 35.7724% 48.2353%);
7171
+ --tone-brown-text: hsl(24.3478 35.7513% 37.8431%);
7172
+ --tone-brown-icon: hsl(23.8636 35.7724% 48.2353%);
7173
+ --tone-brown-fill: 23.662 36.0406% 38.6275%;
7174
+ --tone-brown-ring: 23.662 36.0406% 38.6275%;
7175
+ --tone-brown-mark: hsl(23.8636 35.7724% 48.2353%);
7176
+ --tone-brown-line: hsl(23.8636 35.7724% 48.2353%);
7177
+ --tone-brown-ink: hsl(23.3898 36.1963% 31.9608%);
7178
+ --tone-cyan-bg: hsl(187.5 33.3333% 95.2941%);
7179
+ --tone-cyan-bg-hover: hsl(192 34.8837% 91.5686%);
7180
+ --tone-cyan-bg-selected: hsl(193.6364 34.375% 87.451%);
7181
+ --tone-cyan-border: hsl(192.3077 44.8276% 65.8824%);
7182
+ --tone-cyan-border-selected: hsl(192.1622 80.4348% 36.0784%);
7183
+ --tone-cyan-text: hsl(192.4138 79.4521% 28.6275%);
7184
+ --tone-cyan-icon: hsl(192.1622 80.4348% 36.0784%);
7185
+ --tone-cyan-fill: 192.3967 80.1325% 29.6078%;
7186
+ --tone-cyan-ring: 192.3967 80.1325% 29.6078%;
7187
+ --tone-cyan-mark: hsl(192.1622 80.4348% 36.0784%);
7188
+ --tone-cyan-line: hsl(192.1622 80.4348% 36.0784%);
7189
+ --tone-cyan-ink: hsl(192.2449 80.3279% 23.9216%);
7190
+ --tone-lime-bg: hsl(90 25% 95.2941%);
7191
+ --tone-lime-bg-hover: hsl(84 22.7273% 91.3725%);
7192
+ --tone-lime-bg-selected: hsl(84 22.3881% 86.8627%);
7193
+ --tone-lime-border: hsl(84.4444 30% 64.7059%);
7194
+ --tone-lime-border-selected: hsl(83.8835 59.5376% 33.9216%);
7195
+ --tone-lime-text: hsl(83.7037 60% 26.4706%);
7196
+ --tone-lime-icon: hsl(83.8835 59.5376% 33.9216%);
7197
+ --tone-lime-fill: 84.5783 59.7122% 27.2549%;
7198
+ --tone-lime-ring: 84.5783 59.7122% 27.2549%;
7199
+ --tone-lime-mark: hsl(83.8835 59.5376% 33.9216%);
7200
+ --tone-lime-line: hsl(83.8835 59.5376% 33.9216%);
7201
+ --tone-lime-ink: hsl(83.8235 59.6491% 22.3529%);
7202
+ --surface-violet-bg: var(--tone-violet-bg);
7203
+ --surface-violet-border: var(--tone-violet-border);
7204
+ --surface-violet-text: var(--tone-violet-text);
7205
+ --surface-orange-bg: var(--tone-orange-bg);
7206
+ --surface-orange-border: var(--tone-orange-border);
7207
+ --surface-orange-text: var(--tone-orange-text);
7208
+ --surface-teal-bg: var(--tone-teal-bg);
7209
+ --surface-teal-border: var(--tone-teal-border);
7210
+ --surface-teal-text: var(--tone-teal-text);
7211
+ --run-mix-succeeded: hsl(154.8718 60% 38.2353%);
7212
+ --run-mix-waiting: hsl(38.3193 60.4061% 38.6275%);
7213
+ --run-mix-failed: hsl(0 59.6838% 49.6078%);
7214
+ --run-mix-in-flight: hsl(200.7692 60.4651% 33.7255%);
7215
+ --run-mix-cancelled: hsl(228.5714 11.8644% 34.7059%);
7216
+ --glass-bg-strong: var(--depth-1);
7217
+ --code-header-bg: hsl(var(--hsl-muted));
7218
+ @supports (color: color-mix(in lab, red, red)) {
7219
+ --code-header-bg: color-mix(in srgb, hsl(var(--hsl-muted)) 50%, transparent);
7220
+ }
7221
+ --shadow-color: 220 40% 8%;
7222
+ --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.06);
7223
+ --shadow-dropdown: 0 8px 30px hsl(var(--shadow-color) / 0.1);
7224
+ --shadow-overlay: 0 2px 6px hsl(var(--shadow-color) / 0.1), 0 16px 40px hsl(var(--shadow-color) / 0.16);
7028
7225
  }
7029
- --bg-selection: var(--btn-primary-bg);
7030
- @supports (color: color-mix(in lab, red, red)) {
7031
- --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent);
7226
+ :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
7227
+ --focus-border: hsl(var(--hsl-ring) / 0.8);
7228
+ --focus-halo: hsl(var(--hsl-ring) / 0.18);
7229
+ --focus-border-danger: var(--surface-danger-text);
7230
+ @supports (color: color-mix(in lab, red, red)) {
7231
+ --focus-border-danger: color-mix(in srgb, var(--surface-danger-text) 80%, transparent);
7232
+ }
7233
+ --focus-halo-danger: var(--surface-danger-text);
7234
+ @supports (color: color-mix(in lab, red, red)) {
7235
+ --focus-halo-danger: color-mix(in srgb, var(--surface-danger-text) 18%, transparent);
7236
+ }
7237
+ --border-strong: hsl(var(--hsl-border));
7238
+ @supports (color: color-mix(in lab, red, red)) {
7239
+ --border-strong: color-mix(in srgb, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 20%);
7240
+ }
7241
+ --hsl-raised: var(--hsl-secondary);
7242
+ --hsl-raised-2: var(--hsl-popover);
7243
+ --well-page: hsl(var(--hsl-background));
7244
+ @supports (color: color-mix(in lab, red, red)) {
7245
+ --well-page: color-mix(in oklab, hsl(var(--hsl-background)) 70%, black);
7246
+ }
7247
+ --well-card: var(--well-page);
7248
+ --well-raised: hsl(var(--hsl-card));
7249
+ --well-raised-2: var(--well-raised);
7250
+ --well: var(--well-page);
7251
+ --field-border: hsl(var(--hsl-border));
7252
+ @supports (color: color-mix(in lab, red, red)) {
7253
+ --field-border: color-mix(in oklab, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 45%);
7254
+ }
7255
+ --shadow-raised: var(--shadow-card);
7256
+ --shadow-well: 0 0 0 0 transparent;
7257
+ --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
7258
+ --ix-hover: 0 0 0 1px hsl(var(--hsl-ring) / 0.45), 0 0 0 4px hsl(var(--hsl-ring) / 0.16);
7259
+ --ix-hover-border: hsl(var(--hsl-ring) / 0.7);
7260
+ --ix-press: 0 0 0 1px hsl(var(--hsl-ring) / 0.95), 0 0 0 4px hsl(var(--hsl-ring) / 0.3);
7261
+ --ix-after: 0 0 0 1px hsl(var(--hsl-ring) / 0.6), 0 0 0 3px hsl(var(--hsl-ring) / 0.14);
7262
+ --ix-sel-ring: hsl(var(--hsl-ring) / 0.85);
7263
+ --ix-sel-bg: hsl(var(--hsl-ring) / 0.18);
7264
+ --ix-hover-bg: hsl(var(--hsl-ring) / 0.08);
7032
7265
  }
7033
- --border-accent: var(--btn-primary-hover);
7034
- @supports (color: color-mix(in lab, red, red)) {
7035
- --border-accent: color-mix(in srgb, var(--btn-primary-hover) 18%, transparent);
7266
+ [data-sandbox-theme="vault"]:where(:not(.dark)), [data-sandbox-theme="dawn"]:where(:not(.dark)), [data-theme="hospitality"]:where(:not(.dark)), [data-theme="website"]:where(:not(.dark)), [data-theme="light"], .light, [data-theme$="-light"] {
7267
+ --ix-sel-bg: hsl(var(--hsl-ring) / 0.13);
7268
+ --ix-hover-bg: hsl(var(--hsl-ring) / 0.07);
7269
+ --well-page: hsl(var(--hsl-card));
7270
+ --well-card: hsl(var(--hsl-background));
7271
+ --well-raised-2: var(--well-card);
7272
+ --edge-highlight: 0 0 0 0 transparent;
7036
7273
  }
7037
- --border-accent-hover: var(--btn-primary-hover);
7038
- @supports (color: color-mix(in lab, red, red)) {
7039
- --border-accent-hover: color-mix(in srgb, var(--btn-primary-hover) 35%, transparent);
7040
- }
7041
- --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
7042
- --tangle-gradient-text: var(--tangle-gradient);
7043
- --accent-gradient-strong: var(--tangle-gradient);
7044
- --hsl-success: 162.9 93.5% 24.3%;
7045
- --hsl-warning: 25.9 90% 35.3%;
7046
- --hsl-destructive: 0 73.7% 41.8%;
7047
- --hsl-destructive-foreground: 0 0% 100%;
7048
- --hsl-info: 201.3 96.3% 32.2%;
7049
- --surface-success-bg: #ecfdf5;
7050
- --surface-success-border: #a7f3d0;
7051
- --surface-warning-bg: #fffbeb;
7052
- --surface-warning-border: #fde68a;
7053
- --surface-danger-bg: #fff1f2;
7054
- --surface-danger-border: #fecdd3;
7055
- --surface-info-bg: #f0f9ff;
7056
- --surface-info-border: #bae6fd;
7057
- --tone-violet-bg: #f7edfe;
7058
- --tone-violet-bg-hover: #f2e2fc;
7059
- --tone-violet-bg-selected: #ead5f9;
7060
- --tone-violet-border: #e0c4f4;
7061
- --tone-violet-border-selected: #8e4ec6;
7062
- --tone-violet-text: #402060;
7063
- --tone-violet-icon: #8e4ec6;
7064
- --tone-orange-bg: #ffefd6;
7065
- --tone-orange-bg-hover: #ffdfb5;
7066
- --tone-orange-bg-selected: #ffd19a;
7067
- --tone-orange-border: #ffc182;
7068
- --tone-orange-border-selected: #cc4e00;
7069
- --tone-orange-text: #582d1d;
7070
- --tone-orange-icon: #cc4e00;
7071
- --tone-teal-bg: #e0f8f3;
7072
- --tone-teal-bg-hover: #ccf3ea;
7073
- --tone-teal-bg-selected: #b8eae0;
7074
- --tone-teal-border: #a1ded2;
7075
- --tone-teal-border-selected: #008573;
7076
- --tone-teal-text: #0d3d38;
7077
- --tone-teal-icon: #008573;
7078
- --tone-blue-bg: #e6f4fe;
7079
- --tone-blue-bg-hover: #d5efff;
7080
- --tone-blue-bg-selected: #c2e5ff;
7081
- --tone-blue-border: #acd8fc;
7082
- --tone-blue-border-selected: #0d74ce;
7083
- --tone-blue-text: #113264;
7084
- --tone-blue-icon: #0d74ce;
7085
- --tone-pink-bg: #fee9f5;
7086
- --tone-pink-bg-hover: #fbdcef;
7087
- --tone-pink-bg-selected: #f6cee7;
7088
- --tone-pink-border: #efbfdd;
7089
- --tone-pink-border-selected: #cf3897;
7090
- --tone-pink-text: #651249;
7091
- --tone-pink-icon: #cf3897;
7092
- --tone-brown-bg: #f6eee7;
7093
- --tone-brown-bg-hover: #f0e4d9;
7094
- --tone-brown-bg-selected: #ebdaca;
7095
- --tone-brown-border: #e4cdb7;
7096
- --tone-brown-border-selected: #815e46;
7097
- --tone-brown-text: #3e332e;
7098
- --tone-brown-icon: #815e46;
7099
- --tone-cyan-bg: #def7f9;
7100
- --tone-cyan-bg-hover: #caf1f6;
7101
- --tone-cyan-bg-selected: #b5e9f0;
7102
- --tone-cyan-border: #9ddde7;
7103
- --tone-cyan-border-selected: #107d98;
7104
- --tone-cyan-text: #0d3c48;
7105
- --tone-cyan-icon: #107d98;
7106
- --tone-lime-bg: #eef6d6;
7107
- --tone-lime-bg-hover: #e2f0bd;
7108
- --tone-lime-bg-selected: #d3e7a6;
7109
- --tone-lime-border: #c2da91;
7110
- --tone-lime-border-selected: #5c7c2f;
7111
- --tone-lime-text: #37401c;
7112
- --tone-lime-icon: #5c7c2f;
7113
- --surface-violet-bg: #f7edfe;
7114
- --surface-violet-border: #e0c4f4;
7115
- --surface-violet-text: #8145b5;
7116
- --surface-orange-bg: #ffefd6;
7117
- --surface-orange-border: #ffc182;
7118
- --surface-orange-text: #bc4904;
7119
- --surface-teal-bg: #e0f8f3;
7120
- --surface-teal-border: #a1ded2;
7121
- --surface-teal-text: #017d6d;
7122
- --run-mix-succeeded: #3c9b78;
7123
- --run-mix-waiting: #c16227;
7124
- --run-mix-failed: #cd342f;
7125
- --run-mix-in-flight: #00679e;
7126
- --run-mix-cancelled: #515367;
7127
- --glass-bg-strong: var(--depth-1);
7128
- --code-header-bg: hsl(var(--hsl-muted));
7129
- @supports (color: color-mix(in lab, red, red)) {
7130
- --code-header-bg: color-mix(in srgb, hsl(var(--hsl-muted)) 50%, transparent);
7274
+ [data-slot="card"] :where(*) {
7275
+ --card: var(--hsl-raised);
7276
+ --well: var(--well-card);
7131
7277
  }
7132
- --shadow-card: 0 1px 2px rgba(25, 28, 36, 0.06);
7133
- --shadow-dropdown: 0 8px 30px rgba(25, 28, 36, 0.10);
7134
- --shadow-glow: none;
7135
- --shadow-accent: 0 1px 2px rgba(25, 28, 36, 0.06);
7136
- }
7137
- :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
7138
- --focus-border: hsl(var(--hsl-ring) / 0.8);
7139
- --focus-halo: hsl(var(--hsl-ring) / 0.18);
7140
- --focus-border-danger: var(--surface-danger-text);
7141
- @supports (color: color-mix(in lab, red, red)) {
7142
- --focus-border-danger: color-mix(in srgb, var(--surface-danger-text) 80%, transparent);
7278
+ [data-slot="card"] [data-slot="card"] :where(*) {
7279
+ --card: var(--hsl-raised-2);
7280
+ --well: var(--well-raised);
7143
7281
  }
7144
- --focus-halo-danger: var(--surface-danger-text);
7145
- @supports (color: color-mix(in lab, red, red)) {
7146
- --focus-halo-danger: color-mix(in srgb, var(--surface-danger-text) 18%, transparent);
7282
+ [data-slot="card"] [data-slot="card"] [data-slot="card"] :where(*) {
7283
+ --well: var(--well-raised-2);
7147
7284
  }
7148
- --border-strong: hsl(var(--hsl-border));
7149
- @supports (color: color-mix(in lab, red, red)) {
7150
- --border-strong: color-mix(in srgb, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 20%);
7285
+ :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
7286
+ --chart-ink: var(--text-primary);
7287
+ --chart-ink-muted: var(--text-dim);
7288
+ --chart-muted: var(--md3-outline);
7289
+ --chart-grid: var(--md3-surface-container-high);
7290
+ --chart-rule: var(--md3-outline-variant);
7291
+ --chart-shade: var(--bg-hover);
7292
+ --chart-accent: var(--brand-cool);
7293
+ --chart-tier-c: hsl(246.1017 55.1402% 41.9608%);
7294
+ --chart-tier-b: hsl(246.1905 54.7826% 54.902%);
7295
+ --chart-tier-a: hsl(245.3933 54.6012% 68.0392%);
7296
+ --chart-tier-s: hsl(245.6604 54.6392% 80.9804%);
7297
+ }
7298
+ [data-sandbox-theme="vault"]:where(:not(.dark)), [data-sandbox-theme="dawn"]:where(:not(.dark)), [data-theme="hospitality"]:where(:not(.dark)), [data-theme="website"]:where(:not(.dark)), [data-theme="light"], .light, [data-theme$="-light"] {
7299
+ --chart-accent: hsl(var(--hsl-primary));
7300
+ --chart-tier-c: hsl(246.2687 54.4715% 75.8824%);
7301
+ --chart-tier-b: hsl(246.055 54.7739% 60.9804%);
7302
+ --chart-tier-a: hsl(246.0465 54.8936% 46.0784%);
7303
+ --chart-tier-s: hsl(245.5172 54.717% 31.1765%);
7304
+ }
7305
+ @keyframes tangle-breathe {
7306
+ 50% {
7307
+ opacity: 0.45;
7308
+ }
7151
7309
  }
7152
- --hsl-raised: var(--hsl-secondary);
7153
- --hsl-raised-2: var(--hsl-popover);
7154
- --well-page: hsl(var(--hsl-background));
7155
- @supports (color: color-mix(in lab, red, red)) {
7156
- --well-page: color-mix(in oklab, hsl(var(--hsl-background)) 70%, black);
7310
+ @media (prefers-reduced-motion: reduce) {
7311
+ :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
7312
+ --duration-instant: 0ms;
7313
+ --duration-fast: 0ms;
7314
+ --duration-base: 0ms;
7315
+ --duration-slow: 0ms;
7316
+ --duration-stream: 0ms;
7317
+ --duration-arrive: 0ms;
7318
+ --stagger-step: 0ms;
7319
+ --motion-control: var(--duration-fast) var(--ease-standard);
7320
+ --motion-surface: var(--duration-base) var(--ease-entrance);
7321
+ --motion-dismiss: var(--duration-instant) var(--ease-exit);
7322
+ --motion-stream: var(--duration-stream) var(--ease-expo);
7323
+ --motion-arrive: var(--duration-arrive) var(--ease-expo);
7324
+ }
7325
+ }
7326
+ [data-tone="violet"], [data-tone="violet"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7327
+ --tone-bg: var(--tone-violet-bg);
7328
+ --tone-bg-hover: var(--tone-violet-bg-hover);
7329
+ --tone-bg-selected: var(--tone-violet-bg-selected);
7330
+ --tone-border: var(--tone-violet-border);
7331
+ --tone-border-selected: var(--tone-violet-border-selected);
7332
+ --tone-text: var(--tone-violet-text);
7333
+ --tone-icon: var(--tone-violet-icon);
7334
+ }
7335
+ [data-tone="orange"], [data-tone="orange"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7336
+ --tone-bg: var(--tone-orange-bg);
7337
+ --tone-bg-hover: var(--tone-orange-bg-hover);
7338
+ --tone-bg-selected: var(--tone-orange-bg-selected);
7339
+ --tone-border: var(--tone-orange-border);
7340
+ --tone-border-selected: var(--tone-orange-border-selected);
7341
+ --tone-text: var(--tone-orange-text);
7342
+ --tone-icon: var(--tone-orange-icon);
7343
+ }
7344
+ [data-tone="teal"], [data-tone="teal"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7345
+ --tone-bg: var(--tone-teal-bg);
7346
+ --tone-bg-hover: var(--tone-teal-bg-hover);
7347
+ --tone-bg-selected: var(--tone-teal-bg-selected);
7348
+ --tone-border: var(--tone-teal-border);
7349
+ --tone-border-selected: var(--tone-teal-border-selected);
7350
+ --tone-text: var(--tone-teal-text);
7351
+ --tone-icon: var(--tone-teal-icon);
7352
+ }
7353
+ [data-tone="blue"], [data-tone="blue"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7354
+ --tone-bg: var(--tone-blue-bg);
7355
+ --tone-bg-hover: var(--tone-blue-bg-hover);
7356
+ --tone-bg-selected: var(--tone-blue-bg-selected);
7357
+ --tone-border: var(--tone-blue-border);
7358
+ --tone-border-selected: var(--tone-blue-border-selected);
7359
+ --tone-text: var(--tone-blue-text);
7360
+ --tone-icon: var(--tone-blue-icon);
7361
+ }
7362
+ [data-tone="pink"], [data-tone="pink"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7363
+ --tone-bg: var(--tone-pink-bg);
7364
+ --tone-bg-hover: var(--tone-pink-bg-hover);
7365
+ --tone-bg-selected: var(--tone-pink-bg-selected);
7366
+ --tone-border: var(--tone-pink-border);
7367
+ --tone-border-selected: var(--tone-pink-border-selected);
7368
+ --tone-text: var(--tone-pink-text);
7369
+ --tone-icon: var(--tone-pink-icon);
7370
+ }
7371
+ [data-tone="brown"], [data-tone="brown"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7372
+ --tone-bg: var(--tone-brown-bg);
7373
+ --tone-bg-hover: var(--tone-brown-bg-hover);
7374
+ --tone-bg-selected: var(--tone-brown-bg-selected);
7375
+ --tone-border: var(--tone-brown-border);
7376
+ --tone-border-selected: var(--tone-brown-border-selected);
7377
+ --tone-text: var(--tone-brown-text);
7378
+ --tone-icon: var(--tone-brown-icon);
7379
+ }
7380
+ [data-tone="cyan"], [data-tone="cyan"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7381
+ --tone-bg: var(--tone-cyan-bg);
7382
+ --tone-bg-hover: var(--tone-cyan-bg-hover);
7383
+ --tone-bg-selected: var(--tone-cyan-bg-selected);
7384
+ --tone-border: var(--tone-cyan-border);
7385
+ --tone-border-selected: var(--tone-cyan-border-selected);
7386
+ --tone-text: var(--tone-cyan-text);
7387
+ --tone-icon: var(--tone-cyan-icon);
7388
+ }
7389
+ [data-tone="lime"], [data-tone="lime"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7390
+ --tone-bg: var(--tone-lime-bg);
7391
+ --tone-bg-hover: var(--tone-lime-bg-hover);
7392
+ --tone-bg-selected: var(--tone-lime-bg-selected);
7393
+ --tone-border: var(--tone-lime-border);
7394
+ --tone-border-selected: var(--tone-lime-border-selected);
7395
+ --tone-text: var(--tone-lime-text);
7396
+ --tone-icon: var(--tone-lime-icon);
7157
7397
  }
7158
- --well-card: var(--well-page);
7159
- --well-raised: hsl(var(--hsl-card));
7160
- --well-raised-2: var(--well-raised);
7161
- --well: var(--well-page);
7162
- --field-border: hsl(var(--hsl-border));
7163
- @supports (color: color-mix(in lab, red, red)) {
7164
- --field-border: color-mix(in oklab, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 45%);
7165
- }
7166
- --shadow-raised: var(--shadow-card);
7167
- --shadow-well: 0 0 0 0 transparent;
7168
- --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
7169
- --ix-hover: 0 0 0 1px hsl(var(--hsl-ring) / 0.45), 0 0 0 4px hsl(var(--hsl-ring) / 0.16);
7170
- --ix-hover-border: hsl(var(--hsl-ring) / 0.7);
7171
- --ix-press: 0 0 0 1px hsl(var(--hsl-ring) / 0.95), 0 0 0 4px hsl(var(--hsl-ring) / 0.3);
7172
- --ix-after: 0 0 0 1px hsl(var(--hsl-ring) / 0.6), 0 0 0 3px hsl(var(--hsl-ring) / 0.14);
7173
- --ix-sel-ring: hsl(var(--hsl-ring) / 0.85);
7174
- --ix-sel-bg: hsl(var(--hsl-ring) / 0.18);
7175
- --ix-hover-bg: hsl(var(--hsl-ring) / 0.08);
7176
- }
7177
- [data-sandbox-theme="vault"]:where(:not(.dark)), [data-sandbox-theme="dawn"]:where(:not(.dark)), [data-theme="hospitality"]:where(:not(.dark)), [data-theme="website"]:where(:not(.dark)), [data-theme="light"], .light, [data-theme$="-light"] {
7178
- --ix-sel-bg: hsl(var(--hsl-ring) / 0.13);
7179
- --ix-hover-bg: hsl(var(--hsl-ring) / 0.07);
7180
- --well-page: hsl(var(--hsl-card));
7181
- --well-card: hsl(var(--hsl-background));
7182
- --well-raised-2: var(--well-card);
7183
- --edge-highlight: 0 0 0 0 transparent;
7184
- }
7185
- [data-theme="aubergine"], [data-theme="aubergine-light"], [data-theme="arena"], [data-theme="arena-light"], [data-theme="super"], [data-theme="super-light"], [data-theme="tangle-light"], [data-theme="agents"], [data-theme="agents-light"], [data-theme="website"], [data-theme="intelligence"] {
7186
- --hsl-raised: var(--hsl-card);
7187
- --hsl-raised-2: var(--hsl-card);
7188
- --well-raised: var(--well-card);
7189
- --well-raised-2: var(--well-card);
7190
- --edge-highlight: 0 0 0 0 transparent;
7191
- }
7192
- [data-slot="card"] :where(*) {
7193
- --card: var(--hsl-raised);
7194
- --well: var(--well-card);
7195
- }
7196
- [data-slot="card"] [data-slot="card"] :where(*) {
7197
- --card: var(--hsl-raised-2);
7198
- --well: var(--well-raised);
7199
- }
7200
- [data-slot="card"] [data-slot="card"] [data-slot="card"] :where(*) {
7201
- --well: var(--well-raised-2);
7202
- }
7203
- :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
7204
- --chart-ink: var(--text-primary);
7205
- --chart-ink-muted: var(--text-dim);
7206
- --chart-muted: var(--md3-outline);
7207
- --chart-grid: var(--md3-surface-container-high);
7208
- --chart-rule: var(--md3-outline-variant);
7209
- --chart-shade: var(--bg-hover);
7210
- --chart-accent: var(--brand-cool);
7211
- --chart-tier-c: #4a4a95;
7212
- --chart-tier-b: #5b5bd6;
7213
- --chart-tier-a: #8b87f0;
7214
- --chart-tier-s: #b1a9ff;
7215
- }
7216
- [data-sandbox-theme="vault"]:where(:not(.dark)), [data-sandbox-theme="dawn"]:where(:not(.dark)), [data-theme="hospitality"]:where(:not(.dark)), [data-theme="website"]:where(:not(.dark)), [data-theme="light"], .light, [data-theme$="-light"] {
7217
- --chart-accent: hsl(var(--hsl-primary));
7218
- --chart-tier-c: #9b9ef0;
7219
- --chart-tier-b: #7c7fe3;
7220
- --chart-tier-a: #5b5bd6;
7221
- --chart-tier-s: #272962;
7222
- }
7223
- @media (prefers-reduced-motion: reduce) {
7224
7398
  :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
7225
- --duration-instant: 0ms;
7226
- --duration-fast: 0ms;
7227
- --duration-base: 0ms;
7228
- --duration-slow: 0ms;
7229
- --duration-stream: 0ms;
7230
- --duration-arrive: 0ms;
7231
- --stagger-step: 0ms;
7232
- --motion-control: var(--duration-fast) var(--ease-standard);
7233
- --motion-surface: var(--duration-base) var(--ease-entrance);
7234
- --motion-dismiss: var(--duration-instant) var(--ease-exit);
7235
- --motion-stream: var(--duration-stream) var(--ease-expo);
7236
- --motion-arrive: var(--duration-arrive) var(--ease-expo);
7399
+ --text-display: var(--font-size-display);
7400
+ --text-hero: var(--font-size-hero);
7401
+ --text-page: var(--font-size-3xl);
7402
+ --text-section: var(--font-size-xl);
7403
+ --text-eyebrow: var(--font-size-xs);
7404
+ --text-control-sm: var(--control-text-sm);
7405
+ --text-control-md: var(--control-text-md);
7406
+ --text-control-lg: var(--control-text-lg);
7407
+ --text-label: var(--font-size-label);
7408
+ --text-help: var(--font-size-help);
7409
+ --spacing-control-sm: var(--control-height-sm);
7410
+ --spacing-control-md: var(--control-height);
7411
+ --spacing-control-lg: var(--control-height-lg);
7412
+ --spacing-shell-header: var(--shell-header-height);
7413
+ --color-brand: var(--brand-primary);
7414
+ --color-brand-dim: var(--btn-primary-bg);
7415
+ --color-brand-cool: var(--brand-cool);
7416
+ --color-brand-glow: var(--brand-glow);
7417
+ --color-brand-emerald: var(--brand-emerald);
7418
+ --color-status-running: var(--status-running);
7419
+ --color-status-creating: var(--status-creating);
7420
+ --color-status-stopped: var(--status-stopped);
7421
+ --color-status-error: var(--status-error);
7422
+ --color-scrim: var(--scrim);
7423
+ --color-scrim-strong: var(--scrim-strong);
7424
+ --color-on-media: var(--on-media);
7425
+ --color-depth-1: var(--depth-1);
7426
+ --color-depth-2: var(--depth-2);
7427
+ --color-depth-3: var(--depth-3);
7428
+ --color-depth-4: var(--depth-4);
7429
+ --color-background: hsl(var(--background));
7430
+ --color-foreground: hsl(var(--foreground));
7431
+ --color-card: hsl(var(--card));
7432
+ --color-card-foreground: hsl(var(--card-foreground));
7433
+ --color-popover: hsl(var(--popover));
7434
+ --color-popover-foreground: hsl(var(--popover-foreground));
7435
+ --color-primary: hsl(var(--primary));
7436
+ --color-primary-foreground: hsl(var(--primary-foreground));
7437
+ --color-secondary: hsl(var(--secondary));
7438
+ --color-secondary-foreground: hsl(var(--secondary-foreground));
7439
+ --color-muted: hsl(var(--muted));
7440
+ --color-muted-foreground: hsl(var(--muted-foreground));
7441
+ --color-accent: hsl(var(--accent));
7442
+ --color-accent-foreground: hsl(var(--accent-foreground));
7443
+ --color-destructive: hsl(var(--destructive));
7444
+ --color-destructive-foreground: hsl(var(--destructive-foreground));
7445
+ --color-border: hsl(var(--border));
7446
+ --color-input: hsl(var(--input));
7447
+ --color-ring: hsl(var(--ring));
7448
+ --color-surface-container-lowest: var(--md3-surface-container-lowest);
7449
+ --color-surface-container-low: var(--md3-surface-container-low);
7450
+ --color-surface-container: var(--md3-surface-container);
7451
+ --color-surface-container-high: var(--md3-surface-container-high);
7452
+ --color-surface-container-highest: var(--md3-surface-container-highest);
7453
+ --color-fg: var(--text-primary);
7454
+ --color-fg-muted: var(--text-muted);
7455
+ --color-fg-dim: var(--text-dim);
7456
+ }
7457
+ [data-theme="aubergine-light"], [data-theme="arena-light"], [data-theme="super-light"], [data-theme="tangle-light"], [data-theme="agents-light"] {
7458
+ --hsl-secondary-foreground: var(--hsl-foreground);
7459
+ --surface-neutral-text: var(--text-muted);
7460
+ }
7461
+ [data-theme="aubergine"] {
7462
+ --hsl-background: 257.7778 44.2623% 11.9608%;
7463
+ --hsl-foreground: 0 0% 96.0784%;
7464
+ --hsl-card: 258.1395 37.3913% 22.549%;
7465
+ --hsl-card-foreground: var(--hsl-foreground);
7466
+ --hsl-popover: 257.2881 34.104% 33.9216%;
7467
+ --hsl-popover-foreground: var(--hsl-foreground);
7468
+ --hsl-primary: 257.76 54.1126% 54.7059%;
7469
+ --hsl-primary-foreground: 0 0% 100%;
7470
+ --hsl-secondary: 257.6471 35.6643% 28.0392%;
7471
+ --hsl-muted: var(--hsl-secondary);
7472
+ --hsl-muted-foreground: 0 0% 76.8627%;
7473
+ --hsl-accent: var(--hsl-secondary);
7474
+ --hsl-border: 257.5385 34.0314% 37.451%;
7475
+ --hsl-input: 257.6471 38.6364% 17.2549%;
7476
+ --hsl-ring: 257.3684 92.6829% 83.9216%;
7477
+ --depth-1: var(--md3-surface);
7478
+ --depth-2: var(--md3-surface-container);
7479
+ --depth-3: var(--md3-surface-container-high);
7480
+ --depth-4: var(--md3-surface-container-highest);
7481
+ --bg-root: hsl(var(--hsl-background));
7482
+ --bg-card: var(--depth-2);
7483
+ --bg-input: hsl(var(--hsl-input));
7484
+ --md3-surface-container-lowest: var(--md3-surface-dim);
7485
+ --md3-surface-container-low: hsl(var(--sidebar-background));
7486
+ --md3-surface-container: hsl(var(--hsl-card));
7487
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
7488
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
7489
+ --md3-outline-variant: hsl(var(--hsl-border));
7490
+ --border-subtle: hsl(var(--hsl-border));
7491
+ --border-default: hsl(var(--hsl-border));
7492
+ --border-hover: rgb(245 245 245 / 0.28);
7493
+ --accent-text: hsl(257.3684 92.6829% 83.9216%);
7494
+ --brand-primary: hsl(258.5185 64.8% 75.4902%);
7495
+ --brand-glow: var(--accent-text);
7496
+ --text-primary: hsl(var(--hsl-foreground));
7497
+ --text-secondary: hsl(0 0% 84.3137%);
7498
+ --text-muted: hsl(0 0% 76.8627%);
7499
+ --text-dim: hsl(0 0% 69.4118%);
7500
+ --md3-surface: var(--bg-root);
7501
+ --md3-surface-dim: hsl(255.7895 51.3514% 7.2549%);
7502
+ --md3-surface-bright: hsl(var(--hsl-popover));
7503
+ --md3-surface-variant: var(--md3-surface-container-high);
7504
+ --md3-on-surface: var(--text-primary);
7505
+ --md3-on-surface-variant: var(--text-muted);
7506
+ --hsl-raised: var(--hsl-secondary);
7507
+ --hsl-raised-2: var(--hsl-popover);
7508
+ --well-page: #0e091c;
7509
+ --well-card: #0e091c;
7510
+ --well-raised: #31244f;
7511
+ --well-raised-2: #31244f;
7512
+ --sidebar-background: 257.6471 38.6364% 17.2549%;
7513
+ }
7514
+ [data-theme="aubergine-light"] {
7515
+ --hsl-background: 255 54.5455% 95.6863%;
7516
+ --hsl-foreground: 0 0% 24.7059%;
7517
+ --hsl-card: 0 0% 100%;
7518
+ --hsl-card-foreground: var(--hsl-foreground);
7519
+ --hsl-popover: 0 0% 100%;
7520
+ --hsl-popover-foreground: var(--hsl-foreground);
7521
+ --hsl-primary: 257.76 54.1126% 54.7059%;
7522
+ --hsl-primary-foreground: 0 0% 100%;
7523
+ --hsl-secondary: 255 50% 95.2941%;
7524
+ --hsl-muted: var(--hsl-secondary);
7525
+ --hsl-muted-foreground: 0 0% 36.4706%;
7526
+ --hsl-accent: var(--hsl-secondary);
7527
+ --hsl-border: 255 14.2857% 83.5294%;
7528
+ --hsl-input: 266.6667 100% 98.2353%;
7529
+ --hsl-ring: 257.76 54.1126% 54.7059%;
7530
+ --depth-1: var(--md3-surface);
7531
+ --depth-2: var(--md3-surface-container);
7532
+ --depth-3: var(--md3-surface-container-high);
7533
+ --depth-4: var(--md3-surface-container-highest);
7534
+ --bg-root: hsl(var(--hsl-background));
7535
+ --bg-card: var(--depth-2);
7536
+ --bg-input: hsl(var(--hsl-input));
7537
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
7538
+ --md3-surface-container-low: hsl(var(--sidebar-background));
7539
+ --md3-surface-container: hsl(var(--hsl-card));
7540
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
7541
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
7542
+ --md3-outline-variant: hsl(var(--hsl-border));
7543
+ --border-subtle: hsl(var(--hsl-border));
7544
+ --border-default: hsl(var(--hsl-border));
7545
+ --border-hover: rgb(63 63 63 / 0.28);
7546
+ --accent-text: hsl(257.9724 92.3404% 53.9216%);
7547
+ --brand-primary: hsl(258.1295 65.2582% 58.2353%);
7548
+ --brand-glow: var(--accent-text);
7549
+ --text-primary: hsl(var(--hsl-foreground));
7550
+ --text-secondary: hsl(0 0% 31.7647%);
7551
+ --text-muted: hsl(0 0% 36.4706%);
7552
+ --text-dim: hsl(0 0% 41.9608%);
7553
+ --md3-surface: var(--bg-root);
7554
+ --md3-surface-dim: hsl(258.4615 23.6364% 89.2157%);
7555
+ --md3-surface-bright: hsl(var(--hsl-popover));
7556
+ --md3-surface-variant: var(--md3-surface-container-high);
7557
+ --md3-on-surface: var(--text-primary);
7558
+ --md3-on-surface-variant: var(--text-muted);
7559
+ --hsl-raised: var(--hsl-secondary);
7560
+ --hsl-raised-2: var(--hsl-popover);
7561
+ --well-page: #ffffff;
7562
+ --well-card: #f1eefa;
7563
+ --well-raised: #ffffff;
7564
+ --well-raised-2: #f1eefa;
7565
+ --sidebar-background: 266.6667 100% 98.2353%;
7566
+ }
7567
+ [data-theme="arena"] {
7568
+ --hsl-background: 160 20% 5.8824%;
7569
+ --hsl-foreground: 0 0% 92.549%;
7570
+ --hsl-card: 156 13.8889% 14.1176%;
7571
+ --hsl-card-foreground: var(--hsl-foreground);
7572
+ --hsl-popover: 156.9231 11.1111% 22.9412%;
7573
+ --hsl-popover-foreground: var(--hsl-foreground);
7574
+ --hsl-primary: 160.5 54.0541% 29.0196%;
7575
+ --hsl-primary-foreground: 0 0% 100%;
7576
+ --hsl-secondary: 160 12.766% 18.4314%;
7577
+ --hsl-muted: var(--hsl-secondary);
7578
+ --hsl-muted-foreground: 0 0% 73.7255%;
7579
+ --hsl-accent: var(--hsl-secondary);
7580
+ --hsl-border: 156 11.4504% 25.6863%;
7581
+ --hsl-input: 157.5 16% 9.8039%;
7582
+ --hsl-ring: 160 91.6667% 42.3529%;
7583
+ --depth-1: var(--md3-surface);
7584
+ --depth-2: var(--md3-surface-container);
7585
+ --depth-3: var(--md3-surface-container-high);
7586
+ --depth-4: var(--md3-surface-container-highest);
7587
+ --bg-root: hsl(var(--hsl-background));
7588
+ --bg-card: var(--depth-2);
7589
+ --bg-input: hsl(var(--hsl-input));
7590
+ --md3-surface-container-lowest: var(--md3-surface-dim);
7591
+ --md3-surface-container-low: hsl(var(--sidebar-background));
7592
+ --md3-surface-container: hsl(var(--hsl-card));
7593
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
7594
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
7595
+ --md3-outline-variant: hsl(var(--hsl-border));
7596
+ --border-subtle: hsl(var(--hsl-border));
7597
+ --border-default: hsl(var(--hsl-border));
7598
+ --border-hover: rgb(236 236 236 / 0.28);
7599
+ --accent-text: hsl(160 91.6667% 42.3529%);
7600
+ --brand-primary: hsl(159.7183 65.1376% 42.7451%);
7601
+ --brand-glow: var(--accent-text);
7602
+ --text-primary: hsl(var(--hsl-foreground));
7603
+ --text-secondary: hsl(0 0% 81.1765%);
7604
+ --text-muted: hsl(0 0% 73.7255%);
7605
+ --text-dim: hsl(0 0% 66.6667%);
7606
+ --md3-surface: var(--bg-root);
7607
+ --md3-surface-dim: hsl(160 23.0769% 2.549%);
7608
+ --md3-surface-bright: hsl(var(--hsl-popover));
7609
+ --md3-surface-variant: var(--md3-surface-container-high);
7610
+ --md3-on-surface: var(--text-primary);
7611
+ --md3-on-surface-variant: var(--text-muted);
7612
+ --hsl-raised: var(--hsl-secondary);
7613
+ --hsl-raised-2: var(--hsl-popover);
7614
+ --well-page: #050807;
7615
+ --well-card: #050807;
7616
+ --well-raised: #1f2925;
7617
+ --well-raised-2: #1f2925;
7618
+ --sidebar-background: 157.5 16% 9.8039%;
7619
+ }
7620
+ [data-theme="arena-light"] {
7621
+ --hsl-background: 150 29.4118% 93.3333%;
7622
+ --hsl-foreground: 0 0% 25.098%;
7623
+ --hsl-card: 0 0% 100%;
7624
+ --hsl-card-foreground: var(--hsl-foreground);
7625
+ --hsl-popover: 0 0% 100%;
7626
+ --hsl-popover-foreground: var(--hsl-foreground);
7627
+ --hsl-primary: 160.5 54.0541% 29.0196%;
7628
+ --hsl-primary-foreground: 0 0% 100%;
7629
+ --hsl-secondary: 150 27.7778% 92.9412%;
7630
+ --hsl-muted: var(--hsl-secondary);
7631
+ --hsl-muted-foreground: 0 0% 36.8627%;
7632
+ --hsl-accent: var(--hsl-secondary);
7633
+ --hsl-border: 150 10.4167% 81.1765%;
7634
+ --hsl-input: 150 55.5556% 96.4706%;
7635
+ --hsl-ring: 160.5 54.0541% 29.0196%;
7636
+ --depth-1: var(--md3-surface);
7637
+ --depth-2: var(--md3-surface-container);
7638
+ --depth-3: var(--md3-surface-container-high);
7639
+ --depth-4: var(--md3-surface-container-highest);
7640
+ --bg-root: hsl(var(--hsl-background));
7641
+ --bg-card: var(--depth-2);
7642
+ --bg-input: hsl(var(--hsl-input));
7643
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
7644
+ --md3-surface-container-low: hsl(var(--sidebar-background));
7645
+ --md3-surface-container: hsl(var(--hsl-card));
7646
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
7647
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
7648
+ --md3-outline-variant: hsl(var(--hsl-border));
7649
+ --border-subtle: hsl(var(--hsl-border));
7650
+ --border-default: hsl(var(--hsl-border));
7651
+ --border-hover: rgb(64 64 64 / 0.28);
7652
+ --accent-text: hsl(160.4082 92.4528% 20.7843%);
7653
+ --brand-primary: hsl(160 64.8649% 29.0196%);
7654
+ --brand-glow: var(--accent-text);
7655
+ --text-primary: hsl(var(--hsl-foreground));
7656
+ --text-secondary: hsl(0 0% 31.7647%);
7657
+ --text-muted: hsl(0 0% 36.8627%);
7658
+ --text-dim: hsl(0 0% 42.3529%);
7659
+ --md3-surface: var(--bg-root);
7660
+ --md3-surface-dim: hsl(153.3333 13.4328% 86.8627%);
7661
+ --md3-surface-bright: hsl(var(--hsl-popover));
7662
+ --md3-surface-variant: var(--md3-surface-container-high);
7663
+ --md3-on-surface: var(--text-primary);
7664
+ --md3-on-surface-variant: var(--text-muted);
7665
+ --hsl-raised: var(--hsl-secondary);
7666
+ --hsl-raised-2: var(--hsl-popover);
7667
+ --well-page: #ffffff;
7668
+ --well-card: #e9f3ee;
7669
+ --well-raised: #ffffff;
7670
+ --well-raised-2: #e9f3ee;
7671
+ --sidebar-background: 150 55.5556% 96.4706%;
7672
+ }
7673
+ [data-theme="super"] {
7674
+ --hsl-background: 120 12.1951% 8.0392%;
7675
+ --hsl-foreground: 0 0% 96.4706%;
7676
+ --hsl-card: 120 9.5238% 16.4706%;
7677
+ --hsl-card-foreground: var(--hsl-foreground);
7678
+ --hsl-popover: 120 8.3969% 25.6863%;
7679
+ --hsl-popover-foreground: var(--hsl-foreground);
7680
+ --hsl-primary: 148.1481 54.3624% 29.2157%;
7681
+ --hsl-primary-foreground: 0 0% 100%;
7682
+ --hsl-secondary: 120 9.2593% 21.1765%;
7683
+ --hsl-secondary-foreground: var(--hsl-foreground);
7684
+ --hsl-muted: var(--hsl-secondary);
7685
+ --hsl-muted-foreground: 0 0% 77.2549%;
7686
+ --hsl-accent: var(--hsl-secondary);
7687
+ --hsl-accent-foreground: var(--hsl-foreground);
7688
+ --hsl-border: 120 8.3333% 28.2353%;
7689
+ --hsl-input: 120 9.6774% 12.1569%;
7690
+ --hsl-ring: 147.9808 92.0354% 44.3137%;
7691
+ --depth-1: var(--md3-surface);
7692
+ --depth-2: var(--md3-surface-container);
7693
+ --depth-3: var(--md3-surface-container-high);
7694
+ --depth-4: var(--md3-surface-container-highest);
7695
+ --bg-root: hsl(var(--hsl-background));
7696
+ --bg-card: var(--depth-2);
7697
+ --bg-input: hsl(var(--hsl-input));
7698
+ --md3-surface-container-lowest: var(--md3-surface-dim);
7699
+ --md3-surface-container-low: hsl(var(--sidebar-background));
7700
+ --md3-surface-container: hsl(var(--hsl-card));
7701
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
7702
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
7703
+ --md3-outline-variant: hsl(var(--hsl-border));
7704
+ --border-subtle: hsl(var(--hsl-border));
7705
+ --border-default: hsl(var(--hsl-border));
7706
+ --border-hover: rgb(246 246 246 / 0.28);
7707
+ --accent-text: hsl(147.9808 92.0354% 44.3137%);
7708
+ --brand-primary: hsl(148 65.2174% 45.098%);
7709
+ --brand-glow: var(--accent-text);
7710
+ --text-primary: hsl(var(--hsl-foreground));
7711
+ --text-secondary: hsl(0 0% 85.098%);
7712
+ --text-muted: hsl(0 0% 77.2549%);
7713
+ --text-dim: hsl(0 0% 69.8039%);
7714
+ --md3-primary: var(--accent-text);
7715
+ --bg-hover: var(--accent-text);
7716
+ @supports (color: color-mix(in lab, red, red)) {
7717
+ --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent);
7718
+ }
7719
+ --bg-selection: var(--btn-primary-bg);
7720
+ @supports (color: color-mix(in lab, red, red)) {
7721
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 28%, transparent);
7722
+ }
7723
+ --accent-surface-soft: var(--accent-text);
7724
+ @supports (color: color-mix(in lab, red, red)) {
7725
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 7%, transparent);
7726
+ }
7727
+ --accent-surface-strong: var(--btn-primary-bg);
7728
+ @supports (color: color-mix(in lab, red, red)) {
7729
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
7730
+ }
7731
+ --border-accent: var(--brand-cool);
7732
+ @supports (color: color-mix(in lab, red, red)) {
7733
+ --border-accent: color-mix(in srgb, var(--brand-cool) 35%, transparent);
7734
+ }
7735
+ --border-accent-hover: var(--brand-cool);
7736
+ @supports (color: color-mix(in lab, red, red)) {
7737
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 50%, transparent);
7738
+ }
7739
+ --btn-primary-bg: hsl(var(--hsl-primary));
7740
+ --btn-primary-hover: hsl(147.9452 39.4595% 36.2745%);
7741
+ --btn-primary-text: hsl(0 0% 100%);
7742
+ --btn-cta-bg: var(--btn-primary-bg);
7743
+ --btn-cta-text: var(--btn-primary-text);
7744
+ --md3-surface: var(--bg-root);
7745
+ --md3-surface-dim: hsl(120 14.2857% 4.1176%);
7746
+ --md3-surface-bright: hsl(var(--hsl-popover));
7747
+ --md3-surface-variant: var(--md3-surface-container-high);
7748
+ --md3-on-surface: var(--text-primary);
7749
+ --md3-on-surface-variant: var(--text-muted);
7750
+ --hsl-raised: var(--hsl-secondary);
7751
+ --hsl-raised-2: var(--hsl-popover);
7752
+ --well-page: #090c09;
7753
+ --well-card: #090c09;
7754
+ --well-raised: #262e26;
7755
+ --well-raised-2: #262e26;
7756
+ --sidebar-background: 120 9.6774% 12.1569%;
7757
+ }
7758
+ [data-theme="super-light"] {
7759
+ --hsl-background: 80 17.6471% 93.3333%;
7760
+ --hsl-foreground: 0 0% 25.098%;
7761
+ --hsl-card: 0 0% 100%;
7762
+ --hsl-card-foreground: var(--hsl-foreground);
7763
+ --hsl-popover: 0 0% 100%;
7764
+ --hsl-popover-foreground: var(--hsl-foreground);
7765
+ --hsl-primary: 148.1481 54.3624% 29.2157%;
7766
+ --hsl-primary-foreground: 0 0% 100%;
7767
+ --hsl-secondary: 80 16.6667% 92.9412%;
7768
+ --hsl-muted: var(--hsl-secondary);
7769
+ --hsl-muted-foreground: 0 0% 36.4706%;
7770
+ --hsl-accent: var(--hsl-secondary);
7771
+ --hsl-border: 80 6.25% 81.1765%;
7772
+ --hsl-input: 80 33.3333% 96.4706%;
7773
+ --hsl-ring: 148.1481 54.3624% 29.2157%;
7774
+ --depth-1: var(--md3-surface);
7775
+ --depth-2: var(--md3-surface-container);
7776
+ --depth-3: var(--md3-surface-container-high);
7777
+ --depth-4: var(--md3-surface-container-highest);
7778
+ --bg-root: hsl(var(--hsl-background));
7779
+ --bg-card: var(--depth-2);
7780
+ --bg-input: hsl(var(--hsl-input));
7781
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
7782
+ --md3-surface-container-low: hsl(var(--sidebar-background));
7783
+ --md3-surface-container: hsl(var(--hsl-card));
7784
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
7785
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
7786
+ --md3-outline-variant: hsl(var(--hsl-border));
7787
+ --border-subtle: hsl(var(--hsl-border));
7788
+ --border-default: hsl(var(--hsl-border));
7789
+ --border-hover: rgb(64 64 64 / 0.28);
7790
+ --accent-text: hsl(148.4848 92.5234% 20.9804%);
7791
+ --brand-primary: hsl(148.4536 65.1007% 29.2157%);
7792
+ --brand-glow: var(--accent-text);
7793
+ --text-primary: hsl(var(--hsl-foreground));
7794
+ --text-secondary: hsl(0 0% 31.7647%);
7795
+ --text-muted: hsl(0 0% 36.4706%);
7796
+ --text-dim: hsl(0 0% 41.9608%);
7797
+ --md3-primary: var(--accent-text);
7798
+ --bg-hover: var(--accent-text);
7799
+ @supports (color: color-mix(in lab, red, red)) {
7800
+ --bg-hover: color-mix(in srgb, var(--accent-text) 5%, transparent);
7801
+ }
7802
+ --bg-selection: var(--btn-primary-bg);
7803
+ @supports (color: color-mix(in lab, red, red)) {
7804
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent);
7805
+ }
7806
+ --accent-surface-soft: var(--accent-text);
7807
+ @supports (color: color-mix(in lab, red, red)) {
7808
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 5%, transparent);
7809
+ }
7810
+ --accent-surface-strong: var(--btn-primary-bg);
7811
+ @supports (color: color-mix(in lab, red, red)) {
7812
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent);
7813
+ }
7814
+ --border-accent: var(--brand-cool);
7815
+ @supports (color: color-mix(in lab, red, red)) {
7816
+ --border-accent: color-mix(in srgb, var(--brand-cool) 20%, transparent);
7817
+ }
7818
+ --border-accent-hover: var(--brand-cool);
7819
+ @supports (color: color-mix(in lab, red, red)) {
7820
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 36%, transparent);
7821
+ }
7822
+ --btn-primary-bg: hsl(var(--hsl-primary));
7823
+ --btn-primary-hover: hsl(147.9452 39.4595% 36.2745%);
7824
+ --btn-primary-text: hsl(0 0% 100%);
7825
+ --btn-cta-bg: var(--btn-primary-bg);
7826
+ --btn-cta-text: var(--btn-primary-text);
7827
+ --md3-surface: var(--bg-root);
7828
+ --md3-surface-dim: hsl(85.7143 10.4478% 86.8627%);
7829
+ --md3-surface-bright: hsl(var(--hsl-popover));
7830
+ --md3-surface-variant: var(--md3-surface-container-high);
7831
+ --md3-on-surface: var(--text-primary);
7832
+ --md3-on-surface-variant: var(--text-muted);
7833
+ --hsl-raised: var(--hsl-secondary);
7834
+ --hsl-raised-2: var(--hsl-popover);
7835
+ --well-page: #ffffff;
7836
+ --well-card: #eff1eb;
7837
+ --well-raised: #ffffff;
7838
+ --well-raised-2: #eff1eb;
7839
+ --sidebar-background: 80 33.3333% 96.4706%;
7840
+ }
7841
+ [data-theme="tangle-light"] {
7842
+ --hsl-background: 240 33.3333% 95.2941%;
7843
+ --hsl-foreground: 0 0% 24.7059%;
7844
+ --hsl-card: 0 0% 100%;
7845
+ --hsl-card-foreground: var(--hsl-foreground);
7846
+ --hsl-popover: 0 0% 100%;
7847
+ --hsl-popover-foreground: var(--hsl-foreground);
7848
+ --hsl-primary: 245.9504 54.2601% 56.2745%;
7849
+ --hsl-primary-foreground: 0 0% 100%;
7850
+ --hsl-secondary: 240 30.7692% 94.902%;
7851
+ --hsl-muted: var(--hsl-secondary);
7852
+ --hsl-muted-foreground: 0 0% 36.4706%;
7853
+ --hsl-accent: var(--hsl-secondary);
7854
+ --hsl-border: 240 8.046% 82.9412%;
7855
+ --hsl-input: 240 100% 98.6275%;
7856
+ --hsl-ring: 245.9504 54.2601% 56.2745%;
7857
+ --depth-1: var(--md3-surface);
7858
+ --depth-2: var(--md3-surface-container);
7859
+ --depth-3: var(--md3-surface-container-high);
7860
+ --depth-4: var(--md3-surface-container-highest);
7861
+ --bg-root: hsl(var(--hsl-background));
7862
+ --bg-card: var(--depth-2);
7863
+ --bg-input: hsl(var(--hsl-input));
7864
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
7865
+ --md3-surface-container-low: hsl(var(--sidebar-background));
7866
+ --md3-surface-container: hsl(var(--hsl-card));
7867
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
7868
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
7869
+ --md3-outline-variant: hsl(var(--hsl-border));
7870
+ --border-subtle: hsl(var(--hsl-border));
7871
+ --border-default: hsl(var(--hsl-border));
7872
+ --border-hover: rgb(63 63 63 / 0.28);
7873
+ --accent-text: hsl(246.0302 91.7051% 57.451%);
7874
+ --brand-primary: hsl(246.3636 64.7059% 60%);
7875
+ --brand-glow: var(--accent-text);
7876
+ --text-primary: hsl(var(--hsl-foreground));
7877
+ --text-secondary: hsl(0 0% 31.7647%);
7878
+ --text-muted: hsl(0 0% 36.4706%);
7879
+ --text-dim: hsl(0 0% 41.9608%);
7880
+ --hsl-raised: var(--hsl-secondary);
7881
+ --hsl-raised-2: var(--hsl-popover);
7882
+ --well-page: #ffffff;
7883
+ --well-card: #efeff7;
7884
+ --well-raised: #ffffff;
7885
+ --well-raised-2: #efeff7;
7886
+ --sidebar-background: 240 100% 98.6275%;
7887
+ }
7888
+ .dark[data-theme="intelligence"] {
7889
+ --md3-surface: var(--bg-root);
7890
+ --md3-surface-dim: hsl(260 33.3333% 1.7647%);
7891
+ --md3-surface-bright: hsl(var(--hsl-popover));
7892
+ --md3-surface-container-lowest: var(--md3-surface-dim);
7893
+ --md3-surface-container-low: hsl(var(--sidebar-background));
7894
+ --md3-surface-container: hsl(var(--hsl-card));
7895
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
7896
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
7897
+ --md3-surface-variant: var(--md3-surface-container-high);
7898
+ --md3-on-surface-variant: var(--text-muted);
7899
+ --hsl-background: 260 23.0769% 5.098%;
7900
+ --hsl-card: 260 16.6667% 14.1176%;
7901
+ --hsl-popover: 260 14.7541% 23.9216%;
7902
+ --hsl-secondary: 264 15.7895% 18.6275%;
7903
+ --hsl-muted: var(--hsl-secondary);
7904
+ --hsl-muted-foreground: 0 0% 70.1961%;
7905
+ --hsl-accent: var(--hsl-secondary);
7906
+ --hsl-border: 261 14.2857% 27.451%;
7907
+ --hsl-input: 264 20.8333% 9.4118%;
7908
+ --sidebar-background: 264 20.8333% 9.4118%;
7909
+ --sidebar-accent: var(--hsl-secondary);
7910
+ --sidebar-border: var(--hsl-border);
7911
+ --depth-1: var(--md3-surface);
7912
+ --depth-2: var(--md3-surface-container);
7913
+ --depth-3: var(--md3-surface-container-high);
7914
+ --depth-4: var(--md3-surface-container-highest);
7915
+ --bg-elevated: var(--depth-4);
7916
+ --bg-section: var(--depth-1);
7917
+ --bg-root: hsl(var(--hsl-background));
7918
+ --border-subtle: hsl(var(--hsl-border));
7919
+ --border-default: hsl(var(--hsl-border));
7920
+ --border-hover: rgb(224 224 224 / 0.28);
7921
+ --hsl-raised: var(--hsl-secondary);
7922
+ --hsl-raised-2: var(--hsl-popover);
7923
+ --well-page: #040306;
7924
+ --well-card: #040306;
7925
+ --well-raised: #221e2a;
7926
+ --well-raised-2: #221e2a;
7927
+ }
7928
+ [data-theme="hospitality"]:where(:not(.dark)) {
7929
+ --hsl-background: 108 16.6667% 88.2353%;
7930
+ --hsl-foreground: 0 0% 22.3529%;
7931
+ --hsl-card: 0 0% 100%;
7932
+ --hsl-card-foreground: var(--hsl-foreground);
7933
+ --hsl-popover: 0 0% 100%;
7934
+ --hsl-popover-foreground: var(--hsl-foreground);
7935
+ --hsl-primary: 153 54.0541% 29.0196%;
7936
+ --hsl-primary-foreground: 0 0% 100%;
7937
+ --hsl-secondary: 108 29.4118% 93.3333%;
7938
+ --hsl-secondary-foreground: var(--hsl-foreground);
7939
+ --hsl-muted: var(--hsl-secondary);
7940
+ --hsl-muted-foreground: 0 0% 34.1176%;
7941
+ --hsl-accent: var(--hsl-secondary);
7942
+ --hsl-accent-foreground: var(--hsl-foreground);
7943
+ --hsl-border: 113.3333 8.7379% 79.8039%;
7944
+ --hsl-input: 0 0% 100%;
7945
+ --hsl-ring: 153 54.0541% 29.0196%;
7946
+ --hsl-destructive: 0 75.1244% 39.4118%;
7947
+ --hsl-raised: var(--hsl-secondary);
7948
+ --hsl-raised-2: 0 0% 100%;
7949
+ --sidebar-background: 109.0909 44% 95.098%;
7950
+ --sidebar-foreground: var(--hsl-foreground);
7951
+ --sidebar-primary: var(--hsl-primary);
7952
+ --sidebar-primary-foreground: var(--hsl-primary-foreground);
7953
+ --sidebar-accent: var(--hsl-secondary);
7954
+ --sidebar-accent-foreground: var(--hsl-foreground);
7955
+ --sidebar-border: var(--hsl-border);
7956
+ --sidebar-ring: var(--hsl-ring);
7957
+ --md3-surface: var(--bg-root);
7958
+ --md3-surface-dim: hsl(108 11.9048% 83.5294%);
7959
+ --md3-surface-bright: hsl(var(--hsl-popover));
7960
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
7961
+ --md3-surface-container-low: hsl(var(--sidebar-background));
7962
+ --md3-surface-container: hsl(var(--hsl-card));
7963
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
7964
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
7965
+ --md3-surface-variant: var(--md3-surface-container-high);
7966
+ --md3-on-surface: var(--text-primary);
7967
+ --md3-on-surface-variant: var(--text-muted);
7968
+ --md3-outline: hsl(var(--hsl-muted-foreground));
7969
+ --md3-outline-variant: hsl(var(--hsl-border));
7970
+ --md3-primary: var(--accent-text);
7971
+ --md3-primary-dim: var(--btn-primary-bg);
7972
+ --md3-primary-container: var(--btn-primary-bg);
7973
+ --md3-on-primary: hsl(0 0% 100%);
7974
+ --md3-surface-tint: var(--accent-text);
7975
+ --depth-1: var(--md3-surface);
7976
+ --depth-2: var(--md3-surface-container);
7977
+ --depth-3: var(--md3-surface-container-high);
7978
+ --depth-4: var(--md3-surface-container-highest);
7979
+ --bg-root: hsl(var(--hsl-background));
7980
+ --bg-dark: var(--depth-1);
7981
+ --bg-section: var(--depth-1);
7982
+ --bg-card: var(--depth-2);
7983
+ --bg-elevated: var(--depth-4);
7984
+ --bg-input: hsl(var(--hsl-input));
7985
+ --well-page: #ffffff;
7986
+ --well-card: #e9f1e7;
7987
+ --well-raised: #ffffff;
7988
+ --well-raised-2: #e9f1e7;
7989
+ --bg-hover: var(--accent-text);
7990
+ @supports (color: color-mix(in lab, red, red)) {
7991
+ --bg-hover: color-mix(in srgb, var(--accent-text) 5%, transparent);
7992
+ }
7993
+ --bg-selection: var(--btn-primary-bg);
7994
+ @supports (color: color-mix(in lab, red, red)) {
7995
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent);
7996
+ }
7997
+ --border-subtle: hsl(var(--hsl-border));
7998
+ --border-default: hsl(var(--hsl-border));
7999
+ --border-hover: rgb(57 57 57 / 0.28);
8000
+ --border-strong: #7b837a;
8001
+ --field-border: #7b837a;
8002
+ --border-accent: var(--brand-cool);
8003
+ @supports (color: color-mix(in lab, red, red)) {
8004
+ --border-accent: color-mix(in srgb, var(--brand-cool) 20%, transparent);
8005
+ }
8006
+ --border-accent-hover: var(--brand-cool);
8007
+ @supports (color: color-mix(in lab, red, red)) {
8008
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 36%, transparent);
8009
+ }
8010
+ --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.07), 0 4px 14px -4px hsl(var(--shadow-color) / 0.1);
8011
+ --shadow-raised: 0 1px 1px hsl(var(--shadow-color) / 0.05), 0 2px 6px -2px hsl(var(--shadow-color) / 0.07);
8012
+ --shadow-well: inset 0 1px 2px hsl(var(--shadow-color) / 0.06);
8013
+ --edge-highlight: 0 0 0 0 transparent;
8014
+ --accent-text: hsl(153.2609 92% 19.6078%);
8015
+ --accent-surface-soft: var(--accent-text);
8016
+ @supports (color: color-mix(in lab, red, red)) {
8017
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 5%, transparent);
8018
+ }
8019
+ --accent-surface-strong: var(--btn-primary-bg);
8020
+ @supports (color: color-mix(in lab, red, red)) {
8021
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent);
8022
+ }
8023
+ --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
8024
+ --brand-primary: hsl(153.3333 65.2174% 27.0588%);
8025
+ --brand-cool: hsl(153.12 85.034% 28.8235%);
8026
+ --brand-glow: var(--accent-text);
8027
+ --brand-vibrant: var(--brand-primary);
8028
+ --btn-primary-bg: hsl(var(--hsl-primary));
8029
+ --btn-primary-hover: hsl(153.3333 39.1304% 36.0784%);
8030
+ --btn-primary-text: hsl(0 0% 100%);
8031
+ --text-primary: hsl(var(--hsl-foreground));
8032
+ --text-secondary: hsl(0 0% 29.0196%);
8033
+ --text-muted: hsl(0 0% 34.1176%);
8034
+ --text-dim: hsl(0 0% 34.1176%);
8035
+ --surface-success-bg: #d1edd9;
8036
+ --surface-success-text: #1b6c4b;
8037
+ --surface-success-border: #9ac6ae;
8038
+ --surface-warning-bg: #f3e2c7;
8039
+ --surface-warning-text: #79581e;
8040
+ --surface-warning-border: #ceb994;
8041
+ --surface-danger-bg: #fedbd7;
8042
+ --surface-danger-text: #ae2c2c;
8043
+ --surface-danger-border: #e6a6a4;
8044
+ --surface-neutral-bg: #e1e6e0;
8045
+ --surface-neutral-text: #59605c;
8046
+ --surface-neutral-border: #b8beb8;
8047
+ }
8048
+ .dark[data-theme="hospitality"] {
8049
+ --hsl-background: 120 6.6667% 5.8824%;
8050
+ --hsl-foreground: 0 0% 99.2157%;
8051
+ --hsl-card: 132 5.2632% 18.6275%;
8052
+ --hsl-card-foreground: var(--hsl-foreground);
8053
+ --hsl-popover: 137.1429 4.6358% 29.6078%;
8054
+ --hsl-popover-foreground: var(--hsl-foreground);
8055
+ --hsl-primary: 153 54.0541% 29.0196%;
8056
+ --hsl-primary-foreground: 0 0% 100%;
8057
+ --hsl-secondary: 130 4.6154% 25.4902%;
8058
+ --hsl-secondary-foreground: var(--hsl-foreground);
8059
+ --hsl-muted: var(--hsl-secondary);
8060
+ --hsl-muted-foreground: 0 0% 85.8824%;
8061
+ --hsl-accent: var(--hsl-secondary);
8062
+ --hsl-accent-foreground: var(--hsl-foreground);
8063
+ --hsl-border: 137.1429 4.6358% 29.6078%;
8064
+ --hsl-input: 120 9.0909% 2.1569%;
8065
+ --hsl-ring: 152.9464 91.8033% 47.8431%;
8066
+ --hsl-destructive: 0 74.4681% 90.7843%;
8067
+ --hsl-raised: var(--hsl-secondary);
8068
+ --hsl-raised-2: 137.1429 4.3478% 31.5686%;
8069
+ --sidebar-background: 120 5.8824% 10%;
8070
+ --sidebar-foreground: var(--hsl-foreground);
8071
+ --sidebar-primary: var(--hsl-primary);
8072
+ --sidebar-primary-foreground: var(--hsl-primary-foreground);
8073
+ --sidebar-accent: var(--hsl-secondary);
8074
+ --sidebar-accent-foreground: var(--hsl-foreground);
8075
+ --sidebar-border: var(--hsl-border);
8076
+ --sidebar-ring: var(--hsl-ring);
8077
+ --md3-surface: var(--bg-root);
8078
+ --md3-surface-dim: hsl(120 9.0909% 2.1569%);
8079
+ --md3-surface-bright: hsl(var(--hsl-popover));
8080
+ --md3-surface-container-lowest: var(--md3-surface-dim);
8081
+ --md3-surface-container-low: hsl(var(--sidebar-background));
8082
+ --md3-surface-container: hsl(var(--hsl-card));
8083
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
8084
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
8085
+ --md3-surface-variant: var(--md3-surface-container-high);
8086
+ --md3-on-surface: var(--text-primary);
8087
+ --md3-on-surface-variant: var(--text-muted);
8088
+ --md3-outline: hsl(var(--hsl-muted-foreground));
8089
+ --md3-outline-variant: hsl(var(--hsl-border));
8090
+ --md3-primary: var(--accent-text);
8091
+ --md3-primary-dim: var(--btn-primary-bg);
8092
+ --md3-primary-container: var(--btn-primary-bg);
8093
+ --md3-on-primary: hsl(0 0% 100%);
8094
+ --md3-surface-tint: var(--accent-text);
8095
+ --depth-1: var(--md3-surface);
8096
+ --depth-2: var(--md3-surface-container);
8097
+ --depth-3: var(--md3-surface-container-high);
8098
+ --depth-4: var(--md3-surface-container-highest);
8099
+ --bg-root: hsl(var(--hsl-background));
8100
+ --bg-dark: var(--depth-1);
8101
+ --bg-section: var(--depth-1);
8102
+ --bg-card: var(--depth-2);
8103
+ --bg-elevated: var(--depth-4);
8104
+ --bg-input: hsl(var(--hsl-input));
8105
+ --well-page: #050605;
8106
+ --well-card: #050605;
8107
+ --well-raised: #191c19;
8108
+ --well-raised-2: #191c19;
8109
+ --bg-hover: var(--accent-text);
8110
+ @supports (color: color-mix(in lab, red, red)) {
8111
+ --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent);
8112
+ }
8113
+ --bg-selection: var(--btn-primary-bg);
8114
+ @supports (color: color-mix(in lab, red, red)) {
8115
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 28%, transparent);
8116
+ }
8117
+ --border-subtle: hsl(var(--hsl-border));
8118
+ --border-default: hsl(var(--hsl-border));
8119
+ --border-hover: rgb(253 253 253 / 0.28);
8120
+ --border-strong: #919d93;
8121
+ --field-border: #919d93;
8122
+ --border-accent: var(--brand-cool);
8123
+ @supports (color: color-mix(in lab, red, red)) {
8124
+ --border-accent: color-mix(in srgb, var(--brand-cool) 35%, transparent);
8125
+ }
8126
+ --border-accent-hover: var(--brand-cool);
8127
+ @supports (color: color-mix(in lab, red, red)) {
8128
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 50%, transparent);
8129
+ }
8130
+ --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.45), 0 10px 24px -14px hsl(var(--shadow-color) / 0.6);
8131
+ --shadow-raised: 0 1px 2px hsl(var(--shadow-color) / 0.35);
8132
+ --shadow-well: inset 0 1px 2px hsl(var(--shadow-color) / 0.5);
8133
+ --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
8134
+ --accent-text: hsl(152.9464 91.8033% 47.8431%);
8135
+ --accent-surface-soft: var(--accent-text);
8136
+ @supports (color: color-mix(in lab, red, red)) {
8137
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 7%, transparent);
8138
+ }
8139
+ --accent-surface-strong: var(--btn-primary-bg);
8140
+ @supports (color: color-mix(in lab, red, red)) {
8141
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
8142
+ }
8143
+ --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
8144
+ --brand-primary: hsl(152.7273 65.2174% 50.3922%);
8145
+ --brand-cool: hsl(152.7869 85.1163% 42.1569%);
8146
+ --brand-glow: var(--accent-text);
8147
+ --brand-vibrant: var(--brand-primary);
8148
+ --btn-primary-bg: hsl(var(--hsl-primary));
8149
+ --btn-primary-hover: hsl(153.3333 39.1304% 36.0784%);
8150
+ --btn-primary-text: hsl(0 0% 100%);
8151
+ --text-primary: hsl(var(--hsl-foreground));
8152
+ --text-secondary: hsl(0 0% 94.5098%);
8153
+ --text-muted: hsl(0 0% 85.8824%);
8154
+ --text-dim: hsl(0 0% 85.8824%);
8155
+ --surface-success-bg: #304838;
8156
+ --surface-success-text: #45d196;
8157
+ --surface-success-border: #367154;
8158
+ --surface-warning-bg: #4d3f29;
8159
+ --surface-warning-text: #dab26b;
8160
+ --surface-warning-border: #77623d;
8161
+ --surface-danger-bg: #553937;
8162
+ --surface-danger-text: #e8a5a5;
8163
+ --surface-danger-border: #815958;
8164
+ --surface-neutral-bg: #3f433e;
8165
+ --surface-neutral-text: #b4bab6;
8166
+ --surface-neutral-border: #626762;
8167
+ }
8168
+ [data-theme="agents"] {
8169
+ --bg-card: var(--depth-2);
8170
+ --hsl-background: 270 5.5556% 7.0588%;
8171
+ --hsl-foreground: 0 0% 92.9412%;
8172
+ --hsl-card: 260 3.7037% 15.8824%;
8173
+ --hsl-card-foreground: var(--hsl-foreground);
8174
+ --hsl-popover: 264 3.876% 25.2941%;
8175
+ --hsl-popover-foreground: var(--hsl-foreground);
8176
+ --hsl-secondary: 270 3.8462% 20.3922%;
8177
+ --hsl-secondary-foreground: var(--hsl-foreground);
8178
+ --hsl-muted: var(--hsl-secondary);
8179
+ --hsl-muted-foreground: 0 0% 74.1176%;
8180
+ --hsl-accent: var(--hsl-secondary);
8181
+ --hsl-accent-foreground: var(--hsl-foreground);
8182
+ --hsl-border: 276 3.4483% 28.4314%;
8183
+ --hsl-input: 270 3.4483% 11.3725%;
8184
+ --sidebar-background: 270 3.4483% 11.3725%;
8185
+ --sidebar-foreground: var(--hsl-foreground);
8186
+ --sidebar-accent: var(--hsl-secondary);
8187
+ --sidebar-accent-foreground: var(--hsl-foreground);
8188
+ --sidebar-border: var(--hsl-border);
8189
+ --md3-surface: var(--bg-root);
8190
+ --md3-surface-dim: hsl(240 5.8824% 3.3333%);
8191
+ --md3-surface-bright: hsl(var(--hsl-popover));
8192
+ --md3-surface-container-lowest: var(--md3-surface-dim);
8193
+ --md3-surface-container-low: hsl(var(--sidebar-background));
8194
+ --md3-surface-container: hsl(var(--hsl-card));
8195
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
8196
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
8197
+ --md3-surface-variant: var(--md3-surface-container-high);
8198
+ --md3-on-surface: var(--text-primary);
8199
+ --md3-on-surface-variant: var(--text-muted);
8200
+ --md3-outline: hsl(var(--hsl-muted-foreground));
8201
+ --md3-outline-variant: hsl(var(--hsl-border));
8202
+ --depth-1: var(--md3-surface);
8203
+ --depth-2: var(--md3-surface-container);
8204
+ --depth-3: var(--md3-surface-container-high);
8205
+ --depth-4: var(--md3-surface-container-highest);
8206
+ --bg-root: hsl(var(--hsl-background));
8207
+ --bg-dark: var(--depth-1);
8208
+ --bg-elevated: var(--depth-4);
8209
+ --bg-section: var(--depth-1);
8210
+ --bg-input: hsl(var(--hsl-input));
8211
+ --bg-hover: var(--accent-text);
8212
+ @supports (color: color-mix(in lab, red, red)) {
8213
+ --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent);
8214
+ }
8215
+ --text-primary: hsl(var(--hsl-foreground));
8216
+ --text-secondary: hsl(0 0% 81.9608%);
8217
+ --text-muted: hsl(0 0% 74.1176%);
8218
+ --text-dim: hsl(0 0% 67.0588%);
8219
+ --border-subtle: hsl(var(--hsl-border));
8220
+ --border-default: hsl(var(--hsl-border));
8221
+ --border-hover: rgb(237 237 237 / 0.28);
8222
+ --shadow-card: inset 0 0 0 1px rgb(255 255 255 / 0.06);
8223
+ --shadow-dropdown: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px hsl(var(--shadow-color) / 0.5);
8224
+ --shadow-overlay: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 48px hsl(var(--shadow-color) / 0.6);
8225
+ --hsl-raised: var(--hsl-secondary);
8226
+ --hsl-raised-2: var(--hsl-popover);
8227
+ --well-page: #080809;
8228
+ --well-card: #080809;
8229
+ --well-raised: #28272a;
8230
+ --well-raised-2: #28272a;
8231
+ }
8232
+ [data-theme="agents-light"] {
8233
+ --bg-card: var(--depth-2);
8234
+ --hsl-background: 0 0% 100%;
8235
+ --hsl-foreground: 0 0% 25.098%;
8236
+ --hsl-card: 0 0% 100%;
8237
+ --hsl-card-foreground: var(--hsl-foreground);
8238
+ --hsl-popover: 0 0% 100%;
8239
+ --hsl-popover-foreground: var(--hsl-foreground);
8240
+ --hsl-secondary: 285 13.3333% 94.1176%;
8241
+ --hsl-secondary-foreground: var(--hsl-foreground);
8242
+ --hsl-muted: var(--hsl-secondary);
8243
+ --hsl-muted-foreground: 0 0% 36.4706%;
8244
+ --hsl-accent: var(--hsl-secondary);
8245
+ --hsl-accent-foreground: var(--hsl-foreground);
8246
+ --hsl-border: 300 3.2967% 82.1569%;
8247
+ --hsl-input: 285 33.3333% 97.6471%;
8248
+ --sidebar-background: 285 33.3333% 97.6471%;
8249
+ --sidebar-foreground: var(--hsl-foreground);
8250
+ --sidebar-accent: var(--hsl-secondary);
8251
+ --sidebar-accent-foreground: var(--hsl-foreground);
8252
+ --sidebar-border: var(--hsl-border);
8253
+ --md3-surface: var(--bg-root);
8254
+ --md3-surface-dim: hsl(285 6.4516% 87.8431%);
8255
+ --md3-surface-bright: hsl(var(--hsl-popover));
8256
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
8257
+ --md3-surface-container-low: hsl(var(--sidebar-background));
8258
+ --md3-surface-container: hsl(var(--hsl-card));
8259
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
8260
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
8261
+ --md3-surface-variant: var(--md3-surface-container-high);
8262
+ --md3-on-surface: var(--text-primary);
8263
+ --md3-on-surface-variant: var(--text-muted);
8264
+ --md3-outline: hsl(var(--hsl-muted-foreground));
8265
+ --md3-outline-variant: hsl(var(--hsl-border));
8266
+ --depth-1: var(--md3-surface);
8267
+ --depth-2: var(--md3-surface-container);
8268
+ --depth-3: var(--md3-surface-container-high);
8269
+ --depth-4: var(--md3-surface-container-highest);
8270
+ --bg-root: hsl(var(--hsl-background));
8271
+ --bg-dark: var(--depth-1);
8272
+ --bg-elevated: var(--depth-4);
8273
+ --bg-section: var(--depth-1);
8274
+ --bg-input: hsl(var(--hsl-input));
8275
+ --bg-hover: var(--accent-text);
8276
+ @supports (color: color-mix(in lab, red, red)) {
8277
+ --bg-hover: color-mix(in srgb, var(--accent-text) 5%, transparent);
8278
+ }
8279
+ --text-primary: hsl(var(--hsl-foreground));
8280
+ --text-secondary: hsl(0 0% 31.7647%);
8281
+ --text-muted: hsl(0 0% 36.4706%);
8282
+ --text-dim: hsl(0 0% 41.9608%);
8283
+ --border-subtle: hsl(var(--hsl-border));
8284
+ --border-default: hsl(var(--hsl-border));
8285
+ --border-hover: rgb(64 64 64 / 0.28);
8286
+ --shadow-card: 0 0 0 1px hsl(var(--shadow-color) / 0.03), 0 2px 6px hsl(var(--shadow-color) / 0.05), 0 4px 8px hsl(var(--shadow-color) / 0.08);
8287
+ --shadow-dropdown: 0 0 0 1px hsl(var(--shadow-color) / 0.04), 0 6px 16px hsl(var(--shadow-color) / 0.12);
8288
+ --shadow-overlay: 0 8px 28px hsl(var(--shadow-color) / 0.28);
8289
+ --hsl-raised: var(--hsl-secondary);
8290
+ --hsl-raised-2: var(--hsl-popover);
8291
+ --well-page: #ffffff;
8292
+ --well-card: #ffffff;
8293
+ --well-raised: #ffffff;
8294
+ --well-raised-2: #ffffff;
8295
+ }
8296
+ [data-theme="website"]:where(:not(.dark)) {
8297
+ --hsl-background: 240 39.1304% 95.4902%;
8298
+ --hsl-foreground: 0 0% 24.7059%;
8299
+ --hsl-card: 0 0% 100%;
8300
+ --hsl-card-foreground: var(--hsl-foreground);
8301
+ --hsl-popover: 0 0% 100%;
8302
+ --hsl-popover-foreground: var(--hsl-foreground);
8303
+ --hsl-secondary: 240 36% 95.098%;
8304
+ --hsl-secondary-foreground: var(--hsl-foreground);
8305
+ --hsl-muted: var(--hsl-secondary);
8306
+ --hsl-muted-foreground: 0 0% 36.4706%;
8307
+ --hsl-accent: var(--hsl-secondary);
8308
+ --hsl-accent-foreground: var(--hsl-foreground);
8309
+ --hsl-border: 240 10.5882% 83.3333%;
8310
+ --hsl-input: 240 100% 98.4314%;
8311
+ --md3-surface: var(--bg-root);
8312
+ --md3-surface-dim: hsl(240 14.2857% 89.0196%);
8313
+ --md3-surface-bright: hsl(var(--hsl-popover));
8314
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
8315
+ --md3-surface-container-low: hsl(var(--sidebar-background));
8316
+ --md3-surface-container: hsl(var(--hsl-card));
8317
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
8318
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
8319
+ --md3-surface-variant: var(--md3-surface-container-high);
8320
+ --md3-on-surface: var(--text-primary);
8321
+ --md3-on-surface-variant: var(--text-muted);
8322
+ --md3-outline: hsl(var(--hsl-muted-foreground));
8323
+ --md3-outline-variant: hsl(var(--hsl-border));
8324
+ --depth-1: var(--md3-surface);
8325
+ --depth-2: var(--md3-surface-container);
8326
+ --depth-3: var(--md3-surface-container-high);
8327
+ --depth-4: var(--md3-surface-container-highest);
8328
+ --bg-root: hsl(var(--hsl-background));
8329
+ --bg-dark: var(--depth-1);
8330
+ --bg-section: var(--depth-1);
8331
+ --bg-card: var(--depth-2);
8332
+ --bg-elevated: var(--depth-4);
8333
+ --bg-input: hsl(var(--hsl-input));
8334
+ --border-subtle: hsl(var(--hsl-border));
8335
+ --border-default: hsl(var(--hsl-border));
8336
+ --border-hover: rgb(63 63 63 / 0.28);
8337
+ --text-primary: hsl(var(--hsl-foreground));
8338
+ --text-secondary: hsl(0 0% 31.7647%);
8339
+ --text-muted: hsl(0 0% 36.4706%);
8340
+ --text-dim: hsl(0 0% 41.9608%);
8341
+ --hsl-raised: var(--hsl-secondary);
8342
+ --hsl-raised-2: var(--hsl-popover);
8343
+ --well-page: #ffffff;
8344
+ --well-card: #efeff8;
8345
+ --well-raised: #ffffff;
8346
+ --well-raised-2: #efeff8;
8347
+ --sidebar-background: 240 100% 98.4314%;
8348
+ }
8349
+ .dark[data-theme="website"] {
8350
+ --hsl-background: 243.3333 45% 7.8431%;
8351
+ --hsl-foreground: 0 0% 89.4118%;
8352
+ --hsl-card: 243.75 34.7826% 18.0392%;
8353
+ --hsl-card-foreground: var(--hsl-foreground);
8354
+ --hsl-popover: 242.6087 30.6667% 29.4118%;
8355
+ --hsl-popover-foreground: var(--hsl-foreground);
8356
+ --hsl-secondary: 243.1579 31.6667% 23.5294%;
8357
+ --hsl-secondary-foreground: var(--hsl-foreground);
8358
+ --hsl-muted: var(--hsl-secondary);
8359
+ --hsl-muted-foreground: 0 0% 71.3725%;
8360
+ --hsl-accent: var(--hsl-secondary);
8361
+ --hsl-accent-foreground: var(--hsl-foreground);
8362
+ --hsl-border: 243.3962 30.2857% 34.3137%;
8363
+ --hsl-input: 244.8 38.4615% 12.7451%;
8364
+ --md3-surface: var(--bg-root);
8365
+ --md3-surface-dim: hsl(240 55.5556% 3.5294%);
8366
+ --md3-surface-bright: hsl(var(--hsl-popover));
8367
+ --md3-surface-container-lowest: var(--md3-surface-dim);
8368
+ --md3-surface-container-low: hsl(var(--sidebar-background));
8369
+ --md3-surface-container: hsl(var(--hsl-card));
8370
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
8371
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
8372
+ --md3-surface-variant: var(--md3-surface-container-high);
8373
+ --md3-on-surface: var(--text-primary);
8374
+ --md3-on-surface-variant: var(--text-muted);
8375
+ --md3-outline: hsl(var(--hsl-muted-foreground));
8376
+ --md3-outline-variant: hsl(var(--hsl-border));
8377
+ --depth-1: var(--md3-surface);
8378
+ --depth-2: var(--md3-surface-container);
8379
+ --depth-3: var(--md3-surface-container-high);
8380
+ --depth-4: var(--md3-surface-container-highest);
8381
+ --bg-root: hsl(var(--hsl-background));
8382
+ --bg-dark: var(--depth-1);
8383
+ --bg-section: var(--depth-1);
8384
+ --bg-card: var(--depth-2);
8385
+ --bg-elevated: var(--depth-4);
8386
+ --bg-input: hsl(var(--hsl-input));
8387
+ --border-subtle: hsl(var(--hsl-border));
8388
+ --border-default: hsl(var(--hsl-border));
8389
+ --border-hover: rgb(228 228 228 / 0.28);
8390
+ --text-primary: hsl(var(--hsl-foreground));
8391
+ --text-secondary: hsl(0 0% 78.4314%);
8392
+ --text-muted: hsl(0 0% 71.3725%);
8393
+ --text-dim: hsl(0 0% 64.3137%);
8394
+ --hsl-raised: var(--hsl-secondary);
8395
+ --hsl-raised-2: var(--hsl-popover);
8396
+ --well-page: #04040e;
8397
+ --well-card: #04040e;
8398
+ --well-raised: #201e3e;
8399
+ --well-raised-2: #201e3e;
8400
+ --sidebar-background: 244.8 38.4615% 12.7451%;
8401
+ }
8402
+ [data-accent="violet"], [data-accent="violet"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), [data-accent="violet"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
8403
+ --hsl-primary: var(--tone-violet-fill);
8404
+ --hsl-ring: var(--tone-violet-ring);
8405
+ --brand-primary: var(--tone-violet-mark);
8406
+ --brand-cool: var(--tone-violet-line);
8407
+ --accent-text: var(--tone-violet-ink);
8408
+ }
8409
+ [data-accent="orange"], [data-accent="orange"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), [data-accent="orange"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
8410
+ --hsl-primary: var(--tone-orange-fill);
8411
+ --hsl-ring: var(--tone-orange-ring);
8412
+ --brand-primary: var(--tone-orange-mark);
8413
+ --brand-cool: var(--tone-orange-line);
8414
+ --accent-text: var(--tone-orange-ink);
8415
+ }
8416
+ [data-accent="teal"], [data-accent="teal"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), [data-accent="teal"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
8417
+ --hsl-primary: var(--tone-teal-fill);
8418
+ --hsl-ring: var(--tone-teal-ring);
8419
+ --brand-primary: var(--tone-teal-mark);
8420
+ --brand-cool: var(--tone-teal-line);
8421
+ --accent-text: var(--tone-teal-ink);
8422
+ }
8423
+ [data-accent="blue"], [data-accent="blue"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), [data-accent="blue"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
8424
+ --hsl-primary: var(--tone-blue-fill);
8425
+ --hsl-ring: var(--tone-blue-ring);
8426
+ --brand-primary: var(--tone-blue-mark);
8427
+ --brand-cool: var(--tone-blue-line);
8428
+ --accent-text: var(--tone-blue-ink);
8429
+ }
8430
+ [data-accent="pink"], [data-accent="pink"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), [data-accent="pink"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
8431
+ --hsl-primary: var(--tone-pink-fill);
8432
+ --hsl-ring: var(--tone-pink-ring);
8433
+ --brand-primary: var(--tone-pink-mark);
8434
+ --brand-cool: var(--tone-pink-line);
8435
+ --accent-text: var(--tone-pink-ink);
8436
+ }
8437
+ [data-accent="brown"], [data-accent="brown"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), [data-accent="brown"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
8438
+ --hsl-primary: var(--tone-brown-fill);
8439
+ --hsl-ring: var(--tone-brown-ring);
8440
+ --brand-primary: var(--tone-brown-mark);
8441
+ --brand-cool: var(--tone-brown-line);
8442
+ --accent-text: var(--tone-brown-ink);
8443
+ }
8444
+ [data-accent="cyan"], [data-accent="cyan"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), [data-accent="cyan"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
8445
+ --hsl-primary: var(--tone-cyan-fill);
8446
+ --hsl-ring: var(--tone-cyan-ring);
8447
+ --brand-primary: var(--tone-cyan-mark);
8448
+ --brand-cool: var(--tone-cyan-line);
8449
+ --accent-text: var(--tone-cyan-ink);
8450
+ }
8451
+ [data-accent="lime"], [data-accent="lime"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), [data-accent="lime"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
8452
+ --hsl-primary: var(--tone-lime-fill);
8453
+ --hsl-ring: var(--tone-lime-ring);
8454
+ --brand-primary: var(--tone-lime-mark);
8455
+ --brand-cool: var(--tone-lime-line);
8456
+ --accent-text: var(--tone-lime-ink);
8457
+ }
8458
+ :is([data-accent="violet"], [data-accent="orange"], [data-accent="teal"], [data-accent="blue"], [data-accent="pink"], [data-accent="brown"], [data-accent="cyan"], [data-accent="lime"]), :is([data-accent="violet"], [data-accent="orange"], [data-accent="teal"], [data-accent="blue"], [data-accent="pink"], [data-accent="brown"], [data-accent="cyan"], [data-accent="lime"]):is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), :is([data-accent="violet"], [data-accent="orange"], [data-accent="teal"], [data-accent="blue"], [data-accent="pink"], [data-accent="brown"], [data-accent="cyan"], [data-accent="lime"]) :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
8459
+ --btn-primary-hover: hsl(var(--hsl-primary));
8460
+ @supports (color: color-mix(in lab, red, red)) {
8461
+ --btn-primary-hover: color-mix(in srgb, hsl(var(--hsl-primary)), white 10%);
8462
+ }
8463
+ --brand-purple: var(--accent-text);
8464
+ @supports (color: color-mix(in lab, red, red)) {
8465
+ --brand-purple: color-mix(in srgb, var(--accent-text), white 35%);
8466
+ }
8467
+ --brand-strong: hsl(var(--hsl-primary));
8468
+ @supports (color: color-mix(in lab, red, red)) {
8469
+ --brand-strong: color-mix(in srgb, hsl(var(--hsl-primary)), black 50%);
8470
+ }
8471
+ --md3-primary-fixed: light-dark(var(--accent-text), var(--accent-text));
8472
+ @supports (color: color-mix(in lab, red, red)) {
8473
+ --md3-primary-fixed: light-dark(color-mix(in srgb, var(--accent-text) 12%, white), var(--accent-text));
8474
+ }
8475
+ --md3-inverse-primary: light-dark(var(--brand-primary), var(--btn-primary-bg));
8476
+ @supports (color: color-mix(in lab, red, red)) {
8477
+ --md3-inverse-primary: light-dark(color-mix(in srgb, var(--brand-primary), white 40%), var(--btn-primary-bg));
8478
+ }
8479
+ --hsl-primary-foreground: 0 0% 100%;
8480
+ --btn-primary-text: #ffffff;
8481
+ --md3-on-primary: #ffffff;
8482
+ --brand-glow: var(--accent-text);
8483
+ --brand-vibrant: var(--brand-primary);
8484
+ --btn-primary-bg: hsl(var(--hsl-primary));
8485
+ --btn-cta-bg: var(--btn-primary-bg);
8486
+ --btn-cta-text: var(--btn-primary-text);
8487
+ --sidebar-primary: var(--hsl-primary);
8488
+ --sidebar-primary-foreground: var(--hsl-primary-foreground);
8489
+ --sidebar-ring: var(--hsl-ring);
8490
+ --md3-primary: var(--accent-text);
8491
+ --md3-primary-dim: var(--btn-primary-bg);
8492
+ --md3-primary-container: var(--btn-primary-bg);
8493
+ --md3-on-primary-container: light-dark(hsl(0 0% 100%), var(--brand-purple));
8494
+ --md3-primary-fixed-dim: light-dark(var(--md3-primary-fixed), var(--brand-cool));
8495
+ @supports (color: color-mix(in lab, red, red)) {
8496
+ --md3-primary-fixed-dim: light-dark(color-mix(in srgb, var(--md3-primary-fixed) 85%, var(--accent-text)), var(--brand-cool));
8497
+ }
8498
+ --md3-secondary: light-dark(var(--accent-text), var(--brand-purple));
8499
+ --md3-secondary-dim: light-dark(var(--btn-primary-bg), var(--accent-text));
8500
+ --md3-secondary-container: light-dark(var(--md3-primary-fixed), var(--brand-strong));
8501
+ --md3-on-secondary: light-dark(hsl(0 0% 100%), var(--brand-purple));
8502
+ --md3-on-secondary-container: light-dark(var(--accent-text), var(--brand-purple));
8503
+ --md3-surface-tint: var(--accent-text);
8504
+ --accent-surface-soft: light-dark(var(--accent-text), var(--accent-text));
8505
+ @supports (color: color-mix(in lab, red, red)) {
8506
+ --accent-surface-soft: light-dark(color-mix(in srgb, var(--accent-text) 5%, transparent), color-mix(in srgb, var(--accent-text) 7%, transparent));
8507
+ }
8508
+ --accent-surface-strong: light-dark(var(--btn-primary-bg), var(--btn-primary-bg));
8509
+ @supports (color: color-mix(in lab, red, red)) {
8510
+ --accent-surface-strong: light-dark(color-mix(in srgb, var(--btn-primary-bg) 13%, transparent), color-mix(in srgb, var(--btn-primary-bg) 30%, transparent));
8511
+ }
8512
+ --bg-hover: var(--accent-text);
8513
+ @supports (color: color-mix(in lab, red, red)) {
8514
+ --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent);
8515
+ }
8516
+ --bg-selection: light-dark(var(--btn-primary-bg), var(--btn-primary-bg));
8517
+ @supports (color: color-mix(in lab, red, red)) {
8518
+ --bg-selection: light-dark(color-mix(in srgb, var(--btn-primary-bg) 16%, transparent), color-mix(in srgb, var(--btn-primary-bg) 28%, transparent));
8519
+ }
8520
+ --border-accent: light-dark(var(--brand-cool), var(--brand-cool));
8521
+ @supports (color: color-mix(in lab, red, red)) {
8522
+ --border-accent: light-dark(color-mix(in srgb, var(--brand-cool) 20%, transparent), color-mix(in srgb, var(--brand-cool) 35%, transparent));
8523
+ }
8524
+ --border-accent-hover: light-dark(var(--brand-cool), var(--brand-cool));
8525
+ @supports (color: color-mix(in lab, red, red)) {
8526
+ --border-accent-hover: light-dark(color-mix(in srgb, var(--brand-cool) 36%, transparent), color-mix(in srgb, var(--brand-cool) 50%, transparent));
8527
+ }
8528
+ --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
8529
+ --tangle-gradient-text: linear-gradient(135deg, light-dark(var(--btn-primary-bg), var(--brand-purple)), light-dark(var(--btn-primary-hover), var(--accent-text)));
8530
+ --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
8531
+ --status-creating: var(--accent-text);
8532
+ --primary: var(--hsl-primary);
8533
+ --primary-foreground: var(--hsl-primary-foreground);
8534
+ --ring: var(--hsl-ring);
8535
+ --syntax-meta: var(--accent-text);
8536
+ --display-control-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 4px 16px hsl(var(--primary) / 0.2);
8537
+ --display-gradient: linear-gradient(135deg, hsl(var(--foreground)) 10%, var(--accent-text) 70%);
8538
+ --focus-border: hsl(var(--hsl-ring) / 0.8);
8539
+ --focus-halo: hsl(var(--hsl-ring) / 0.18);
8540
+ --ix-hover: 0 0 0 1px hsl(var(--hsl-ring) / 0.45), 0 0 0 4px hsl(var(--hsl-ring) / 0.16);
8541
+ --ix-hover-border: hsl(var(--hsl-ring) / 0.7);
8542
+ --ix-press: 0 0 0 1px hsl(var(--hsl-ring) / 0.95), 0 0 0 4px hsl(var(--hsl-ring) / 0.3);
8543
+ --ix-after: 0 0 0 1px hsl(var(--hsl-ring) / 0.6), 0 0 0 3px hsl(var(--hsl-ring) / 0.14);
8544
+ --ix-sel-ring: hsl(var(--hsl-ring) / 0.85);
8545
+ --ix-sel-bg: light-dark(hsl(var(--hsl-ring) / 0.13), hsl(var(--hsl-ring) / 0.18));
8546
+ --ix-hover-bg: light-dark(hsl(var(--hsl-ring) / 0.07), hsl(var(--hsl-ring) / 0.08));
8547
+ --chart-shade: var(--bg-hover);
8548
+ --chart-accent: light-dark(hsl(var(--hsl-primary)), var(--brand-cool));
8549
+ --color-brand: var(--brand-primary);
8550
+ --color-brand-dim: var(--btn-primary-bg);
8551
+ --color-brand-cool: var(--brand-cool);
8552
+ --color-brand-glow: var(--brand-glow);
8553
+ --color-status-creating: var(--status-creating);
8554
+ --color-primary: hsl(var(--primary));
8555
+ --color-primary-foreground: hsl(var(--primary-foreground));
8556
+ --color-ring: hsl(var(--ring));
7237
8557
  }
7238
8558
  }
7239
- [data-tone="violet"], [data-tone="violet"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7240
- --tone-bg: var(--tone-violet-bg);
7241
- --tone-bg-hover: var(--tone-violet-bg-hover);
7242
- --tone-bg-selected: var(--tone-violet-bg-selected);
7243
- --tone-border: var(--tone-violet-border);
7244
- --tone-border-selected: var(--tone-violet-border-selected);
7245
- --tone-text: var(--tone-violet-text);
7246
- --tone-icon: var(--tone-violet-icon);
7247
- }
7248
- [data-tone="orange"], [data-tone="orange"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7249
- --tone-bg: var(--tone-orange-bg);
7250
- --tone-bg-hover: var(--tone-orange-bg-hover);
7251
- --tone-bg-selected: var(--tone-orange-bg-selected);
7252
- --tone-border: var(--tone-orange-border);
7253
- --tone-border-selected: var(--tone-orange-border-selected);
7254
- --tone-text: var(--tone-orange-text);
7255
- --tone-icon: var(--tone-orange-icon);
7256
- }
7257
- [data-tone="teal"], [data-tone="teal"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7258
- --tone-bg: var(--tone-teal-bg);
7259
- --tone-bg-hover: var(--tone-teal-bg-hover);
7260
- --tone-bg-selected: var(--tone-teal-bg-selected);
7261
- --tone-border: var(--tone-teal-border);
7262
- --tone-border-selected: var(--tone-teal-border-selected);
7263
- --tone-text: var(--tone-teal-text);
7264
- --tone-icon: var(--tone-teal-icon);
7265
- }
7266
- [data-tone="blue"], [data-tone="blue"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7267
- --tone-bg: var(--tone-blue-bg);
7268
- --tone-bg-hover: var(--tone-blue-bg-hover);
7269
- --tone-bg-selected: var(--tone-blue-bg-selected);
7270
- --tone-border: var(--tone-blue-border);
7271
- --tone-border-selected: var(--tone-blue-border-selected);
7272
- --tone-text: var(--tone-blue-text);
7273
- --tone-icon: var(--tone-blue-icon);
7274
- }
7275
- [data-tone="pink"], [data-tone="pink"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7276
- --tone-bg: var(--tone-pink-bg);
7277
- --tone-bg-hover: var(--tone-pink-bg-hover);
7278
- --tone-bg-selected: var(--tone-pink-bg-selected);
7279
- --tone-border: var(--tone-pink-border);
7280
- --tone-border-selected: var(--tone-pink-border-selected);
7281
- --tone-text: var(--tone-pink-text);
7282
- --tone-icon: var(--tone-pink-icon);
7283
- }
7284
- [data-tone="brown"], [data-tone="brown"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7285
- --tone-bg: var(--tone-brown-bg);
7286
- --tone-bg-hover: var(--tone-brown-bg-hover);
7287
- --tone-bg-selected: var(--tone-brown-bg-selected);
7288
- --tone-border: var(--tone-brown-border);
7289
- --tone-border-selected: var(--tone-brown-border-selected);
7290
- --tone-text: var(--tone-brown-text);
7291
- --tone-icon: var(--tone-brown-icon);
7292
- }
7293
- [data-tone="cyan"], [data-tone="cyan"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7294
- --tone-bg: var(--tone-cyan-bg);
7295
- --tone-bg-hover: var(--tone-cyan-bg-hover);
7296
- --tone-bg-selected: var(--tone-cyan-bg-selected);
7297
- --tone-border: var(--tone-cyan-border);
7298
- --tone-border-selected: var(--tone-cyan-border-selected);
7299
- --tone-text: var(--tone-cyan-text);
7300
- --tone-icon: var(--tone-cyan-icon);
7301
- }
7302
- [data-tone="lime"], [data-tone="lime"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7303
- --tone-bg: var(--tone-lime-bg);
7304
- --tone-bg-hover: var(--tone-lime-bg-hover);
7305
- --tone-bg-selected: var(--tone-lime-bg-selected);
7306
- --tone-border: var(--tone-lime-border);
7307
- --tone-border-selected: var(--tone-lime-border-selected);
7308
- --tone-text: var(--tone-lime-text);
7309
- --tone-icon: var(--tone-lime-icon);
7310
- }
7311
- :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
7312
- --text-display: var(--font-size-display);
7313
- --text-hero: var(--font-size-hero);
7314
- --text-page: var(--font-size-3xl);
7315
- --text-section: var(--font-size-xl);
7316
- --text-eyebrow: var(--font-size-xs);
7317
- --text-control-sm: var(--control-text-sm);
7318
- --text-control-md: var(--control-text-md);
7319
- --text-control-lg: var(--control-text-lg);
7320
- --text-label: var(--font-size-label);
7321
- --text-help: var(--font-size-help);
7322
- --spacing-control-sm: var(--control-height-sm);
7323
- --spacing-control-md: var(--control-height);
7324
- --spacing-control-lg: var(--control-height-lg);
7325
- --spacing-shell-header: var(--shell-header-height);
7326
- --color-brand: var(--brand-primary);
7327
- --color-brand-dim: var(--btn-primary-bg);
7328
- --color-brand-cool: var(--brand-cool);
7329
- --color-brand-glow: var(--brand-glow);
7330
- --color-brand-emerald: var(--brand-emerald);
7331
- --color-status-running: var(--status-running);
7332
- --color-status-creating: var(--status-creating);
7333
- --color-status-stopped: var(--status-stopped);
7334
- --color-status-error: var(--status-error);
7335
- --color-scrim: var(--scrim);
7336
- --color-scrim-strong: var(--scrim-strong);
7337
- --color-on-media: var(--on-media);
7338
- --color-depth-1: var(--depth-1);
7339
- --color-depth-2: var(--depth-2);
7340
- --color-depth-3: var(--depth-3);
7341
- --color-depth-4: var(--depth-4);
7342
- --color-background: hsl(var(--background));
7343
- --color-foreground: hsl(var(--foreground));
7344
- --color-card: hsl(var(--card));
7345
- --color-card-foreground: hsl(var(--card-foreground));
7346
- --color-popover: hsl(var(--popover));
7347
- --color-popover-foreground: hsl(var(--popover-foreground));
7348
- --color-primary: hsl(var(--primary));
7349
- --color-primary-foreground: hsl(var(--primary-foreground));
7350
- --color-secondary: hsl(var(--secondary));
7351
- --color-secondary-foreground: hsl(var(--secondary-foreground));
7352
- --color-muted: hsl(var(--muted));
7353
- --color-muted-foreground: hsl(var(--muted-foreground));
7354
- --color-accent: hsl(var(--accent));
7355
- --color-accent-foreground: hsl(var(--accent-foreground));
7356
- --color-destructive: hsl(var(--destructive));
7357
- --color-destructive-foreground: hsl(var(--destructive-foreground));
7358
- --color-border: hsl(var(--border));
7359
- --color-input: hsl(var(--input));
7360
- --color-ring: hsl(var(--ring));
7361
- --color-surface-container-lowest: var(--md3-surface-container-lowest);
7362
- --color-surface-container-low: var(--md3-surface-container-low);
7363
- --color-surface-container: var(--md3-surface-container);
7364
- --color-surface-container-high: var(--md3-surface-container-high);
7365
- --color-surface-container-highest: var(--md3-surface-container-highest);
7366
- --color-fg: var(--text-primary);
7367
- --color-fg-muted: var(--text-muted);
7368
- --color-fg-dim: var(--text-dim);
7369
- }
7370
- [data-theme="aubergine-light"], [data-theme="arena-light"], [data-theme="super-light"], [data-theme="tangle-light"], [data-theme="agents-light"] {
7371
- --hsl-secondary-foreground: 0 0% 10%;
7372
- --surface-neutral-text: #4b5563;
7373
- }
7374
- [data-theme="aubergine"] {
7375
- --hsl-background: 258 44% 12%;
7376
- --hsl-foreground: 258 50% 97%;
7377
- --hsl-card: 258 40% 20%;
7378
- --hsl-card-foreground: 258 50% 97%;
7379
- --hsl-popover: 258 40% 24%;
7380
- --hsl-popover-foreground: 258 50% 97%;
7381
- --hsl-primary: 250 100% 76%;
7382
- --hsl-primary-foreground: 258 45% 10%;
7383
- --hsl-secondary: 258 38% 17%;
7384
- --hsl-muted: 258 38% 17%;
7385
- --hsl-muted-foreground: 258 26% 70%;
7386
- --hsl-accent: 258 40% 24%;
7387
- --hsl-border: 258 32% 30%;
7388
- --hsl-input: 258 38% 17%;
7389
- --hsl-ring: 250 100% 76%;
7390
- --depth-1: #1a1230;
7391
- --depth-2: #241a42;
7392
- --depth-3: #2f2253;
7393
- --depth-4: #3d2d68;
7394
- --bg-root: #1a1230;
7395
- --bg-card: var(--depth-3);
7396
- --bg-input: var(--depth-2);
7397
- --md3-surface-container-lowest: #150e28;
7398
- --md3-surface-container-low: #241a42;
7399
- --md3-surface-container: #2a1f4c;
7400
- --md3-surface-container-high: #2f2253;
7401
- --md3-surface-container-highest: #3d2d68;
7402
- --md3-outline-variant: #463571;
7403
- --border-subtle: rgba(183,157,255,0.12);
7404
- --border-default: rgba(183,157,255,0.22);
7405
- --border-hover: rgba(183,157,255,0.40);
7406
- --accent-text: #c4b0ff;
7407
- --brand-primary: #8f8bff;
7408
- --brand-glow: #c4b0ff;
7409
- --text-primary: #f4f1fd;
7410
- --text-secondary: #cec4e8;
7411
- --text-muted: #b7afd1;
7412
- --text-dim: #a59ebb;
7413
- --md3-surface: var(--bg-root);
7414
- --md3-surface-dim: var(--md3-surface-container-lowest);
7415
- --md3-surface-bright: var(--md3-surface-container-highest);
7416
- --md3-surface-variant: var(--md3-surface-container-high);
7417
- --md3-on-surface: var(--text-primary);
7418
- --md3-on-surface-variant: var(--text-muted);
7419
- }
7420
- [data-theme="aubergine-light"] {
7421
- --hsl-background: 258 60% 96%;
7422
- --hsl-foreground: 258 45% 11%;
7423
- --hsl-card: 0 0% 100%;
7424
- --hsl-card-foreground: 258 45% 11%;
7425
- --hsl-popover: 0 0% 100%;
7426
- --hsl-popover-foreground: 258 45% 11%;
7427
- --hsl-primary: 258 70% 50%;
7428
- --hsl-primary-foreground: 0 0% 100%;
7429
- --hsl-secondary: 258 45% 92%;
7430
- --hsl-muted: 258 45% 92%;
7431
- --hsl-muted-foreground: 258 18% 42%;
7432
- --hsl-accent: 258 45% 92%;
7433
- --hsl-border: 258 30% 88%;
7434
- --hsl-input: 258 30% 88%;
7435
- --hsl-ring: 258 70% 50%;
7436
- --depth-1: #f4f1fc;
7437
- --depth-2: #ece6f8;
7438
- --depth-3: #ffffff;
7439
- --depth-4: #ffffff;
7440
- --bg-root: #f4f1fc;
7441
- --bg-card: #ffffff;
7442
- --bg-input: #ece6f8;
7443
- --md3-surface-container-lowest: #ffffff;
7444
- --md3-surface-container-low: #faf8fe;
7445
- --md3-surface-container: #f4f1fc;
7446
- --md3-surface-container-high: #ece6f8;
7447
- --md3-surface-container-highest: #e4dcf4;
7448
- --md3-outline-variant: #e0d8f0;
7449
- --border-subtle: rgba(60,32,110,0.10);
7450
- --border-default: rgba(60,32,110,0.16);
7451
- --border-hover: rgba(60,32,110,0.30);
7452
- --accent-text: #6423c8;
7453
- --brand-primary: #6d28d9;
7454
- --brand-glow: #8b5cf6;
7455
- --text-primary: #160f22;
7456
- --text-secondary: #3f3460;
7457
- --text-muted: #585070;
7458
- --text-dim: #655d82;
7459
- --md3-surface: var(--bg-root);
7460
- --md3-surface-dim: var(--depth-2);
7461
- --md3-surface-bright: #ffffff;
7462
- --md3-surface-variant: var(--md3-surface-container-high);
7463
- --md3-on-surface: var(--text-primary);
7464
- --md3-on-surface-variant: var(--text-muted);
7465
- }
7466
- [data-theme="arena"] {
7467
- --hsl-background: 160 16% 6%;
7468
- --hsl-foreground: 150 20% 96%;
7469
- --hsl-card: 158 14% 12%;
7470
- --hsl-card-foreground: 150 20% 96%;
7471
- --hsl-popover: 158 13% 16%;
7472
- --hsl-popover-foreground: 150 20% 96%;
7473
- --hsl-primary: 160 84% 39%;
7474
- --hsl-primary-foreground: 160 60% 8%;
7475
- --hsl-secondary: 158 12% 12%;
7476
- --hsl-muted: 158 12% 12%;
7477
- --hsl-muted-foreground: 152 12% 62%;
7478
- --hsl-accent: 158 14% 14%;
7479
- --hsl-border: 158 14% 18%;
7480
- --hsl-input: 158 12% 12%;
7481
- --hsl-ring: 160 84% 45%;
7482
- --depth-1: #0a0f0c;
7483
- --depth-2: #131b16;
7484
- --depth-3: #1b261f;
7485
- --depth-4: #233328;
7486
- --bg-root: #0a0f0c;
7487
- --bg-card: var(--depth-3);
7488
- --bg-input: var(--depth-2);
7489
- --md3-surface-container-lowest: #070b08;
7490
- --md3-surface-container-low: #131b16;
7491
- --md3-surface-container: #182019;
7492
- --md3-surface-container-high: #1b261f;
7493
- --md3-surface-container-highest: #233328;
7494
- --md3-outline-variant: #2a3a31;
7495
- --border-subtle: rgba(52,211,153,0.10);
7496
- --border-default: rgba(52,211,153,0.18);
7497
- --border-hover: rgba(52,211,153,0.32);
7498
- --accent-text: #34d399;
7499
- --brand-primary: #10b981;
7500
- --brand-glow: #34d399;
7501
- --text-primary: #ecfdf5;
7502
- --text-secondary: #c2e8d6;
7503
- --text-muted: #8fb6a3;
7504
- --text-dim: #7ba08e;
7505
- --md3-surface: var(--bg-root);
7506
- --md3-surface-dim: var(--md3-surface-container-lowest);
7507
- --md3-surface-bright: var(--md3-surface-container-highest);
7508
- --md3-surface-variant: var(--md3-surface-container-high);
7509
- --md3-on-surface: var(--text-primary);
7510
- --md3-on-surface-variant: var(--text-muted);
7511
- }
7512
- [data-theme="arena-light"] {
7513
- --hsl-background: 150 30% 96%;
7514
- --hsl-foreground: 158 30% 10%;
7515
- --hsl-card: 0 0% 100%;
7516
- --hsl-card-foreground: 158 30% 10%;
7517
- --hsl-popover: 0 0% 100%;
7518
- --hsl-popover-foreground: 158 30% 10%;
7519
- --hsl-primary: 160 84% 27%;
7520
- --hsl-primary-foreground: 0 0% 100%;
7521
- --hsl-secondary: 150 25% 92%;
7522
- --hsl-muted: 150 25% 92%;
7523
- --hsl-muted-foreground: 158 14% 40%;
7524
- --hsl-accent: 150 25% 92%;
7525
- --hsl-border: 150 20% 86%;
7526
- --hsl-input: 150 20% 86%;
7527
- --hsl-ring: 160 84% 30%;
7528
- --depth-1: #f0f6f2;
7529
- --depth-2: #e6f0ea;
7530
- --depth-3: #ffffff;
7531
- --depth-4: #ffffff;
7532
- --bg-root: #f0f6f2;
7533
- --bg-card: #ffffff;
7534
- --bg-input: #e6f0ea;
7535
- --md3-surface-container-lowest: #ffffff;
7536
- --md3-surface-container-low: #f6fbf8;
7537
- --md3-surface-container: #f0f6f2;
7538
- --md3-surface-container-high: #e6f0ea;
7539
- --md3-surface-container-highest: #dcebe2;
7540
- --md3-outline-variant: #d7e8de;
7541
- --border-subtle: rgba(6,95,70,0.10);
7542
- --border-default: rgba(6,95,70,0.16);
7543
- --border-hover: rgba(6,95,70,0.30);
7544
- --accent-text: #03674b;
7545
- --brand-primary: #059669;
7546
- --brand-glow: #10b981;
7547
- --text-primary: #06231a;
7548
- --text-secondary: #285048;
7549
- --text-muted: #455f52;
7550
- --text-dim: #4e6d62;
7551
- --md3-surface: var(--bg-root);
7552
- --md3-surface-dim: var(--depth-2);
7553
- --md3-surface-bright: #ffffff;
7554
- --md3-surface-variant: var(--md3-surface-container-high);
7555
- --md3-on-surface: var(--text-primary);
7556
- --md3-on-surface-variant: var(--text-muted);
7557
- }
7558
- [data-theme="super"] {
7559
- --hsl-background: 120 12% 8%;
7560
- --hsl-foreground: 86 20% 93%;
7561
- --hsl-card: 120 11% 12%;
7562
- --hsl-card-foreground: 86 20% 93%;
7563
- --hsl-popover: 120 10% 15%;
7564
- --hsl-popover-foreground: 86 20% 93%;
7565
- --hsl-primary: 139 31% 61%;
7566
- --hsl-primary-foreground: 140 35% 8%;
7567
- --hsl-secondary: 120 9% 17%;
7568
- --hsl-secondary-foreground: 86 20% 93%;
7569
- --hsl-muted: 120 9% 17%;
7570
- --hsl-muted-foreground: 95 10% 67%;
7571
- --hsl-accent: 120 10% 18%;
7572
- --hsl-accent-foreground: 86 20% 93%;
7573
- --hsl-border: 120 9% 25%;
7574
- --hsl-input: 120 9% 17%;
7575
- --hsl-ring: 139 31% 61%;
7576
- --depth-1: #121712;
7577
- --depth-2: #1c231c;
7578
- --depth-3: #232b23;
7579
- --depth-4: #2b342b;
7580
- --bg-root: #121712;
7581
- --bg-card: var(--depth-2);
7582
- --bg-input: var(--depth-3);
7583
- --md3-surface-container-lowest: #0d110d;
7584
- --md3-surface-container-low: #171d17;
7585
- --md3-surface-container: #1c231c;
7586
- --md3-surface-container-high: #232b23;
7587
- --md3-surface-container-highest: #2b342b;
7588
- --md3-outline-variant: #3a453a;
7589
- --border-subtle: rgba(190,210,180,0.12);
7590
- --border-default: rgba(190,210,180,0.20);
7591
- --border-hover: rgba(190,210,180,0.34);
7592
- --accent-text: #8fd0a4;
7593
- --brand-primary: #7dbb91;
7594
- --brand-glow: #8fd0a4;
7595
- --text-primary: #eef1ea;
7596
- --text-secondary: #cbd3c5;
7597
- --text-muted: #a9b3a2;
7598
- --text-dim: #959f8f;
7599
- --md3-primary: #8fd0a4;
7600
- --bg-hover: rgba(190,210,180,0.06);
7601
- --bg-selection: rgba(125,187,145,0.28);
7602
- --accent-surface-soft: rgba(125,187,145,0.08);
7603
- --accent-surface-strong: rgba(125,187,145,0.24);
7604
- --border-accent: rgba(125,187,145,0.38);
7605
- --border-accent-hover: rgba(125,187,145,0.56);
7606
- --btn-primary-bg: #7dbb91;
7607
- --btn-primary-hover: #8fcaa1;
7608
- --btn-primary-text: #0e1d13;
7609
- --btn-cta-bg: #7dbb91;
7610
- --btn-cta-text: #0e1d13;
7611
- --md3-surface: var(--bg-root);
7612
- --md3-surface-dim: var(--md3-surface-container-lowest);
7613
- --md3-surface-bright: var(--md3-surface-container-highest);
7614
- --md3-surface-variant: var(--md3-surface-container-high);
7615
- --md3-on-surface: var(--text-primary);
7616
- --md3-on-surface-variant: var(--text-muted);
7617
- }
7618
- [data-theme="super-light"] {
7619
- --hsl-background: 75 22% 96%;
7620
- --hsl-foreground: 114 13% 15%;
7621
- --hsl-card: 0 0% 100%;
7622
- --hsl-card-foreground: 114 13% 15%;
7623
- --hsl-popover: 0 0% 100%;
7624
- --hsl-popover-foreground: 114 13% 15%;
7625
- --hsl-primary: 148 40% 25%;
7626
- --hsl-primary-foreground: 0 0% 100%;
7627
- --hsl-secondary: 80 18% 93%;
7628
- --hsl-muted: 80 18% 93%;
7629
- --hsl-muted-foreground: 99 9% 37%;
7630
- --hsl-accent: 80 18% 93%;
7631
- --hsl-border: 87 17% 87%;
7632
- --hsl-input: 92 14% 78%;
7633
- --hsl-ring: 144 31% 34%;
7634
- --depth-1: #f7f8f4;
7635
- --depth-2: #eff1eb;
7636
- --depth-3: #ffffff;
7637
- --depth-4: #ffffff;
7638
- --bg-root: #f7f8f4;
7639
- --bg-card: #ffffff;
7640
- --bg-input: #eff1eb;
7641
- --md3-surface-container-lowest: #ffffff;
7642
- --md3-surface-container-low: #fcfcf9;
7643
- --md3-surface-container: #f7f8f4;
7644
- --md3-surface-container-high: #eff1eb;
7645
- --md3-surface-container-highest: #e6eae1;
7646
- --md3-outline-variant: #dfe4d9;
7647
- --border-subtle: rgba(34,43,33,0.10);
7648
- --border-default: rgba(34,43,33,0.16);
7649
- --border-hover: rgba(34,43,33,0.30);
7650
- --accent-text: #275a3f;
7651
- --brand-primary: #275a3f;
7652
- --brand-glow: #3b7050;
7653
- --text-primary: #222b21;
7654
- --text-secondary: #46523f;
7655
- --text-muted: #5d6857;
7656
- --text-dim: #616c5a;
7657
- --md3-primary: #275a3f;
7658
- --bg-hover: rgba(34,43,33,0.04);
7659
- --bg-selection: rgba(39,90,63,0.16);
7660
- --accent-surface-soft: rgba(39,90,63,0.06);
7661
- --accent-surface-strong: rgba(39,90,63,0.14);
7662
- --border-accent: rgba(39,90,63,0.30);
7663
- --border-accent-hover: rgba(39,90,63,0.45);
7664
- --btn-primary-bg: #275a3f;
7665
- --btn-primary-hover: #1e4832;
7666
- --btn-primary-text: #ffffff;
7667
- --btn-cta-bg: #275a3f;
7668
- --btn-cta-text: #ffffff;
7669
- --md3-surface: var(--bg-root);
7670
- --md3-surface-dim: var(--depth-2);
7671
- --md3-surface-bright: #ffffff;
7672
- --md3-surface-variant: var(--md3-surface-container-high);
7673
- --md3-on-surface: var(--text-primary);
7674
- --md3-on-surface-variant: var(--text-muted);
7675
- }
7676
- [data-theme="tangle-light"] {
7677
- --hsl-background: 240 33% 98%;
7678
- --hsl-foreground: 245 32% 14%;
7679
- --hsl-card: 0 0% 100%;
7680
- --hsl-card-foreground: 245 32% 14%;
7681
- --hsl-popover: 0 0% 100%;
7682
- --hsl-popover-foreground: 245 32% 14%;
7683
- --hsl-primary: 239 84% 60%;
7684
- --hsl-primary-foreground: 0 0% 100%;
7685
- --hsl-secondary: 240 30% 95%;
7686
- --hsl-muted: 240 28% 95%;
7687
- --hsl-muted-foreground: 240 8% 42%;
7688
- --hsl-accent: 240 30% 95%;
7689
- --hsl-border: 240 20% 90%;
7690
- --hsl-input: 240 20% 90%;
7691
- --hsl-ring: 239 84% 60%;
7692
- --depth-1: #f4f4f9;
7693
- --depth-2: #edecf4;
7694
- --depth-3: #ffffff;
7695
- --depth-4: #ffffff;
7696
- --bg-root: #f4f4f9;
7697
- --bg-card: #ffffff;
7698
- --bg-input: #edecf4;
7699
- --md3-surface-container-lowest: #ffffff;
7700
- --md3-surface-container-low: #f8f8fc;
7701
- --md3-surface-container: #f4f4f9;
7702
- --md3-surface-container-high: #edecf4;
7703
- --md3-surface-container-highest: #e5e4ee;
7704
- --md3-outline-variant: #e2e1ec;
7705
- --border-subtle: rgba(20,20,40,0.08);
7706
- --border-default: rgba(20,20,40,0.14);
7707
- --border-hover: rgba(20,20,40,0.26);
7708
- --accent-text: #453be3;
7709
- --brand-primary: #6366f1;
7710
- --brand-glow: #818cf8;
7711
- --text-primary: #15131f;
7712
- --text-secondary: #3f3a52;
7713
- --text-muted: #59556b;
7714
- --text-dim: #67627b;
7715
- }
7716
- .dark[data-theme="intelligence"] {
7717
- --md3-surface: #0d0a10;
7718
- --md3-surface-dim: #0a080d;
7719
- --md3-surface-bright: #2e2936;
7720
- --md3-surface-container-lowest: #070509;
7721
- --md3-surface-container-low: #100d15;
7722
- --md3-surface-container: #14111a;
7723
- --md3-surface-container-high: #1b1821;
7724
- --md3-surface-container-highest: #24202b;
7725
- --md3-surface-variant: #24202b;
7726
- --md3-on-surface-variant: #aaa6bb;
7727
- --hsl-background: 262 24% 5%;
7728
- --hsl-card: 262 19% 11%;
7729
- --hsl-popover: 260 16% 13%;
7730
- --hsl-secondary: 262 15% 18%;
7731
- --hsl-muted: 262 17% 15%;
7732
- --hsl-muted-foreground: 255 12% 62%;
7733
- --hsl-accent: 262 15% 20%;
7734
- --hsl-border: 262 12% 28%;
7735
- --hsl-input: 260 14% 16%;
7736
- --sidebar-background: 264 26% 4%;
7737
- --sidebar-accent: 262 16% 16%;
7738
- --sidebar-border: 262 12% 13%;
7739
- --depth-1: #0e0b13;
7740
- --depth-2: #16131c;
7741
- --depth-3: #201c28;
7742
- --depth-4: #2a2533;
7743
- --bg-elevated: hsl(262 17% 15%);
7744
- --bg-section: hsl(262 22% 7%);
7745
- --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(129, 99, 241, 0.08), transparent),
7746
- radial-gradient(ellipse 50% 40% at 80% 10%, rgba(129, 140, 248, 0.06), transparent),
7747
- linear-gradient(180deg, var(--depth-1), #0d0a12 100%);
7748
- --border-subtle: rgba(120, 108, 158, 0.1);
7749
- --border-default: rgba(120, 108, 158, 0.18);
7750
- --border-hover: rgba(120, 108, 158, 0.28);
7751
- }
7752
- [data-theme="hospitality"]:where(:not(.dark)) {
7753
- --hsl-background: 108 16.7% 88.2%;
7754
- --hsl-foreground: 143 25% 12%;
7755
- --hsl-card: 0 0% 100%;
7756
- --hsl-card-foreground: 143 25% 12%;
7757
- --hsl-popover: 0 0% 100%;
7758
- --hsl-popover-foreground: 143 25% 12%;
7759
- --hsl-primary: 153 38% 25%;
7760
- --hsl-primary-foreground: 0 0% 100%;
7761
- --hsl-secondary: 110 18.7% 93.7%;
7762
- --hsl-secondary-foreground: 143 25% 12%;
7763
- --hsl-muted: 110 18.7% 93.7%;
7764
- --hsl-muted-foreground: 138 7.3% 35.5%;
7765
- --hsl-accent: 133 38.4% 88%;
7766
- --hsl-accent-foreground: 143 25% 12%;
7767
- --hsl-border: 107 8.7% 79.8%;
7768
- --hsl-input: 0 0% 100%;
7769
- --hsl-ring: 148 28% 43%;
7770
- --hsl-destructive: 0 73.7% 41.8%;
7771
- --hsl-raised: 110 18.7% 93.7%;
7772
- --hsl-raised-2: 0 0% 100%;
7773
- --sidebar-background: 108 21.7% 95.5%;
7774
- --sidebar-foreground: 143 25% 12%;
7775
- --sidebar-primary: 153 38% 25%;
7776
- --sidebar-primary-foreground: 0 0% 100%;
7777
- --sidebar-accent: 133 38.4% 88%;
7778
- --sidebar-accent-foreground: 143 25% 12%;
7779
- --sidebar-border: 107 8.7% 79.8%;
7780
- --sidebar-ring: 148 28% 43%;
7781
- --md3-surface: #dee6dc;
7782
- --md3-surface-dim: #d3dcd1;
7783
- --md3-surface-bright: #ffffff;
7784
- --md3-surface-container-lowest: #ffffff;
7785
- --md3-surface-container-low: #f2f6f1;
7786
- --md3-surface-container: #ffffff;
7787
- --md3-surface-container-high: #edf2ec;
7788
- --md3-surface-container-highest: #ffffff;
7789
- --md3-surface-variant: #edf2ec;
7790
- --md3-on-surface: #17261d;
7791
- --md3-on-surface-variant: #546158;
7792
- --md3-outline: #6d8376;
7793
- --md3-outline-variant: #c9d0c7;
7794
- --md3-primary: #285842;
7795
- --md3-primary-dim: #1f4735;
7796
- --md3-primary-container: #1f4735;
7797
- --md3-on-primary: #ffffff;
7798
- --md3-surface-tint: #285842;
7799
- --depth-1: #dee6dc;
7800
- --depth-2: #ffffff;
7801
- --depth-3: #edf2ec;
7802
- --depth-4: #ffffff;
7803
- --bg-root: #dee6dc;
7804
- --bg-dark: #dee6dc;
7805
- --bg-section: #dee6dc;
7806
- --bg-card: #ffffff;
7807
- --bg-elevated: #ffffff;
7808
- --bg-input: #ffffff;
7809
- --well-page: #ffffff;
7810
- --well-card: #ebf0e9;
7811
- --well-raised: #ffffff;
7812
- --well-raised-2: #ebf0e9;
7813
- --bg-hover: rgba(40, 88, 66, 0.05);
7814
- --bg-selection: rgba(40, 88, 66, 0.16);
7815
- --border-subtle: rgba(23, 38, 29, 0.11);
7816
- --border-default: rgba(23, 38, 29, 0.16);
7817
- --border-hover: rgba(23, 38, 29, 0.28);
7818
- --border-strong: #798479;
7819
- --field-border: #798479;
7820
- --border-accent: rgba(40, 88, 66, 0.20);
7821
- --border-accent-hover: rgba(40, 88, 66, 0.36);
7822
- --shadow-card: 0 1px 2px rgba(23, 38, 29, 0.07), 0 4px 14px -4px rgba(23, 38, 29, 0.10);
7823
- --shadow-raised: 0 1px 1px rgba(23, 38, 29, 0.05), 0 2px 6px -2px rgba(23, 38, 29, 0.07);
7824
- --shadow-well: inset 0 1px 2px rgba(23, 38, 29, 0.06);
7825
- --edge-highlight: 0 0 0 0 transparent;
7826
- --accent-text: #285842;
7827
- --accent-surface-soft: rgba(40, 88, 66, 0.05);
7828
- --accent-surface-strong: rgba(40, 88, 66, 0.13);
7829
- --accent-gradient-strong: linear-gradient(135deg, #1f4735, #336c52);
7830
- --brand-primary: #3d7b5f;
7831
- --brand-cool: #4f8c6c;
7832
- --brand-glow: #6cac8a;
7833
- --brand-vibrant: #3d7b5f;
7834
- --btn-primary-bg: #285842;
7835
- --btn-primary-hover: #336c52;
7836
- --btn-primary-text: #ffffff;
7837
- --text-primary: #17261d;
7838
- --text-secondary: #36493e;
7839
- --text-muted: #546158;
7840
- --text-dim: #546158;
7841
- --surface-success-bg: #c5edce;
7842
- --surface-success-text: #1e5b34;
7843
- --surface-success-border: #91c79e;
7844
- --surface-warning-bg: #f4e3bf;
7845
- --surface-warning-text: #804d0c;
7846
- --surface-warning-border: #dcb87a;
7847
- --surface-danger-bg: #fadad8;
7848
- --surface-danger-text: #a5292b;
7849
- --surface-danger-border: #e8acaa;
7850
- --surface-neutral-bg: #e5e9e4;
7851
- --surface-neutral-text: #576157;
7852
- --surface-neutral-border: #c0c6bf;
7853
- }
7854
- .dark[data-theme="hospitality"] {
7855
- --hsl-background: 140 10.3% 5.7%;
7856
- --hsl-foreground: 140 12% 90.2%;
7857
- --hsl-card: 132 5.3% 18.6%;
7858
- --hsl-card-foreground: 140 12% 90.2%;
7859
- --hsl-popover: 130 3.9% 29.8%;
7860
- --hsl-popover-foreground: 140 12% 90.2%;
7861
- --hsl-primary: 145 31% 59%;
7862
- --hsl-primary-foreground: 153 35% 10%;
7863
- --hsl-secondary: 130 4.6% 25.5%;
7864
- --hsl-secondary-foreground: 140 12% 90.2%;
7865
- --hsl-muted: 130 4.6% 25.5%;
7866
- --hsl-muted-foreground: 128 5.6% 73.9%;
7867
- --hsl-accent: 140 18% 20%;
7868
- --hsl-accent-foreground: 140 12% 90.2%;
7869
- --hsl-border: 130 3.9% 29.8%;
7870
- --hsl-input: 120 16.7% 2.4%;
7871
- --hsl-ring: 145 31% 59%;
7872
- --hsl-destructive: 0 80% 88%;
7873
- --hsl-raised: 130 4.6% 25.5%;
7874
- --hsl-raised-2: 130 3.7% 31.8%;
7875
- --sidebar-background: 120 8% 9.8%;
7876
- --sidebar-foreground: 140 12% 90.2%;
7877
- --sidebar-primary: 145 31% 59%;
7878
- --sidebar-primary-foreground: 153 35% 10%;
7879
- --sidebar-accent: 140 18% 20%;
7880
- --sidebar-accent-foreground: 140 12% 90.2%;
7881
- --sidebar-border: 130 3.9% 29.8%;
7882
- --sidebar-ring: 145 31% 59%;
7883
- --md3-surface: #0d100e;
7884
- --md3-surface-dim: #050705;
7885
- --md3-surface-bright: #494f4a;
7886
- --md3-surface-container-lowest: #050705;
7887
- --md3-surface-container-low: #171b17;
7888
- --md3-surface-container: #2d322e;
7889
- --md3-surface-container-high: #3e443f;
7890
- --md3-surface-container-highest: #494f4a;
7891
- --md3-surface-variant: #3e443f;
7892
- --md3-on-surface: #e3e9e5;
7893
- --md3-on-surface-variant: #b9c0ba;
7894
- --md3-outline: #8a938e;
7895
- --md3-outline-variant: #494f4a;
7896
- --md3-primary: #99caad;
7897
- --md3-primary-dim: #396a52;
7898
- --md3-primary-container: #396a52;
7899
- --md3-on-primary: #11221a;
7900
- --md3-surface-tint: #76b791;
7901
- --depth-1: #0d100e;
7902
- --depth-2: #2d322e;
7903
- --depth-3: #3e443f;
7904
- --depth-4: #494f4a;
7905
- --bg-root: #0d100e;
7906
- --bg-dark: #0d100e;
7907
- --bg-section: #0d100e;
7908
- --bg-card: #2d322e;
7909
- --bg-elevated: #494f4a;
7910
- --bg-input: #050705;
7911
- --well-page: #050705;
7912
- --well-card: #050705;
7913
- --well-raised: #181c18;
7914
- --well-raised-2: #181c18;
7915
- --bg-hover: rgba(118, 183, 145, 0.07);
7916
- --bg-selection: rgba(118, 183, 145, 0.28);
7917
- --border-subtle: rgba(227, 233, 229, 0.10);
7918
- --border-default: rgba(227, 233, 229, 0.16);
7919
- --border-hover: rgba(227, 233, 229, 0.28);
7920
- --border-strong: #939c94;
7921
- --field-border: #939c94;
7922
- --border-accent: rgba(118, 183, 145, 0.35);
7923
- --border-accent-hover: rgba(118, 183, 145, 0.50);
7924
- --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px -14px rgba(0, 0, 0, 0.6);
7925
- --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.35);
7926
- --shadow-well: inset 0 1px 2px rgba(0, 0, 0, 0.5);
7927
- --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
7928
- --accent-text: #b2dbc2;
7929
- --accent-surface-soft: rgba(118, 183, 145, 0.07);
7930
- --accent-surface-strong: rgba(57, 106, 82, 0.40);
7931
- --accent-gradient-strong: linear-gradient(135deg, #396a52, #76b791);
7932
- --brand-primary: #529873;
7933
- --brand-cool: #76b791;
7934
- --brand-glow: #94c7a9;
7935
- --brand-vibrant: #529873;
7936
- --btn-primary-bg: #76b791;
7937
- --btn-primary-hover: #8dc3a4;
7938
- --btn-primary-text: #11221a;
7939
- --text-primary: #e3e9e5;
7940
- --text-secondary: #c5cec9;
7941
- --text-muted: #b9c0ba;
7942
- --text-dim: #b9c0ba;
7943
- --surface-success-bg: #254930;
7944
- --surface-success-text: #9ce9b1;
7945
- --surface-success-border: #437652;
7946
- --surface-warning-bg: #513d21;
7947
- --surface-warning-text: #fed081;
7948
- --surface-warning-border: #8d6b39;
7949
- --surface-danger-bg: #5c3231;
7950
- --surface-danger-text: #f7b3b0;
7951
- --surface-danger-border: #a45857;
7952
- --surface-neutral-bg: #3e443f;
7953
- --surface-neutral-text: #b9c0ba;
7954
- --surface-neutral-border: #5f6560;
7955
- }
7956
- [data-theme="agents"] {
7957
- --bg-card: #1a191b;
7958
- --hsl-background: 270 5.6% 7.1%;
7959
- --hsl-foreground: 240 6.2% 93.7%;
7960
- --hsl-card: 270 3.8% 10.2%;
7961
- --hsl-card-foreground: 240 6.2% 93.7%;
7962
- --hsl-popover: 260 4.2% 13.9%;
7963
- --hsl-popover-foreground: 240 6.2% 93.7%;
7964
- --hsl-secondary: 260 4.2% 13.9%;
7965
- --hsl-secondary-foreground: 240 6.2% 93.7%;
7966
- --hsl-muted: 260 4.2% 13.9%;
7967
- --hsl-muted-foreground: 258 6.9% 71.8%;
7968
- --hsl-accent: 270 4.7% 16.9%;
7969
- --hsl-accent-foreground: 240 6.2% 93.7%;
7970
- --hsl-border: 270 5% 23.5%;
7971
- --hsl-input: 251 4.8% 44.9%;
7972
- --sidebar-background: 270 3.8% 10.2%;
7973
- --sidebar-foreground: 240 6.2% 93.7%;
7974
- --sidebar-accent: 270 4.7% 16.9%;
7975
- --sidebar-accent-foreground: 240 6.2% 93.7%;
7976
- --sidebar-border: 270 5% 23.5%;
7977
- --md3-surface: #121113;
7978
- --md3-surface-dim: #121113;
7979
- --md3-surface-bright: #323035;
7980
- --md3-surface-container-lowest: #121113;
7981
- --md3-surface-container-low: #1a191b;
7982
- --md3-surface-container: #1a191b;
7983
- --md3-surface-container-high: #232225;
7984
- --md3-surface-container-highest: #2b292d;
7985
- --md3-surface-variant: #232225;
7986
- --md3-on-surface: #eeeef0;
7987
- --md3-on-surface-variant: #b5b2bc;
7988
- --md3-outline: #6f6d78;
7989
- --md3-outline-variant: #3c393f;
7990
- --depth-1: #121113;
7991
- --depth-2: #1a191b;
7992
- --depth-3: #232225;
7993
- --depth-4: #2b292d;
7994
- --bg-root: #121113;
7995
- --bg-dark: #121113;
7996
- --bg-elevated: #232225;
7997
- --bg-section: #121113;
7998
- --bg-input: #1a191b;
7999
- --bg-hover: #232225;
8000
- --text-primary: #eeeef0;
8001
- --text-secondary: #eeeef0;
8002
- --text-muted: #b5b2bc;
8003
- --text-dim: #b5b2bc;
8004
- --border-subtle: #3c393f;
8005
- --border-default: #49474e;
8006
- --border-hover: #625f69;
8007
- --shadow-card: inset 0 0 0 1px rgb(255 255 255 / 0.06);
8008
- --shadow-dropdown: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px rgb(0 0 0 / 0.5);
8009
- --shadow-overlay: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 48px rgb(0 0 0 / 0.6);
8010
- }
8011
- [data-theme="agents-light"] {
8012
- --bg-card: #ffffff;
8013
- --hsl-background: 0 0% 100%;
8014
- --hsl-foreground: 257 10.1% 13.5%;
8015
- --hsl-card: 0 0% 100%;
8016
- --hsl-card-foreground: 257 10.1% 13.5%;
8017
- --hsl-popover: 0 0% 100%;
8018
- --hsl-popover-foreground: 257 10.1% 13.5%;
8019
- --hsl-secondary: 285 14.3% 94.5%;
8020
- --hsl-secondary-foreground: 257 10.1% 13.5%;
8021
- --hsl-muted: 285 14.3% 94.5%;
8022
- --hsl-muted-foreground: 252 4.8% 40.8%;
8023
- --hsl-accent: 276 11.6% 91.6%;
8024
- --hsl-accent-foreground: 257 10.1% 13.5%;
8025
- --hsl-border: 262 11.4% 86.3%;
8026
- --hsl-input: 249 6% 57.5%;
8027
- --sidebar-background: 270 20% 98%;
8028
- --sidebar-foreground: 257 10.1% 13.5%;
8029
- --sidebar-accent: 276 11.6% 91.6%;
8030
- --sidebar-accent-foreground: 257 10.1% 13.5%;
8031
- --sidebar-border: 262 11.4% 86.3%;
8032
- --md3-surface: #ffffff;
8033
- --md3-surface-dim: #faf9fb;
8034
- --md3-surface-bright: #ffffff;
8035
- --md3-surface-container-lowest: #ffffff;
8036
- --md3-surface-container-low: #faf9fb;
8037
- --md3-surface-container: #ffffff;
8038
- --md3-surface-container-high: #f2eff3;
8039
- --md3-surface-container-highest: #ffffff;
8040
- --md3-surface-variant: #f2eff3;
8041
- --md3-on-surface: #211f26;
8042
- --md3-on-surface-variant: #65636d;
8043
- --md3-outline: #8e8c99;
8044
- --md3-outline-variant: #dbd8e0;
8045
- --depth-1: #ffffff;
8046
- --depth-2: #ffffff;
8047
- --depth-3: #faf9fb;
8048
- --depth-4: #ffffff;
8049
- --bg-root: #ffffff;
8050
- --bg-dark: #faf9fb;
8051
- --bg-elevated: #ffffff;
8052
- --bg-section: #faf9fb;
8053
- --bg-input: #ffffff;
8054
- --bg-hover: #f2eff3;
8055
- --text-primary: #211f26;
8056
- --text-secondary: #211f26;
8057
- --text-muted: #65636d;
8058
- --text-dim: #65636d;
8059
- --border-subtle: #dbd8e0;
8060
- --border-default: #d0cdd7;
8061
- --border-hover: #bcbac7;
8062
- --shadow-card: 0 0 0 1px rgb(33 31 38 / 0.03), 0 2px 6px rgb(33 31 38 / 0.05), 0 4px 8px rgb(33 31 38 / 0.08);
8063
- --shadow-dropdown: 0 0 0 1px rgb(33 31 38 / 0.04), 0 6px 16px rgb(33 31 38 / 0.12);
8064
- --shadow-overlay: 0 8px 28px rgb(33 31 38 / 0.28);
8065
- }
8066
- [data-theme="website"]:where(:not(.dark)) {
8067
- --hsl-background: 240 42.9% 97.3%;
8068
- --hsl-foreground: 224 18% 12%;
8069
- --hsl-card: 0 0% 100%;
8070
- --hsl-card-foreground: 224 18% 12%;
8071
- --hsl-popover: 0 0% 100%;
8072
- --hsl-popover-foreground: 224 18% 12%;
8073
- --hsl-secondary: 240 35.7% 94.5%;
8074
- --hsl-secondary-foreground: 224 18% 12%;
8075
- --hsl-muted: 240 35.7% 94.5%;
8076
- --hsl-muted-foreground: 240 13% 42.4%;
8077
- --hsl-accent: 240 23.1% 92.4%;
8078
- --hsl-accent-foreground: 224 18% 12%;
8079
- --hsl-border: 240 26.3% 88.8%;
8080
- --hsl-input: 240 42.9% 97.3%;
8081
- --md3-surface: #f5f5fb;
8082
- --md3-surface-dim: #e7e7f0;
8083
- --md3-surface-bright: #ffffff;
8084
- --md3-surface-container-lowest: #ffffff;
8085
- --md3-surface-container-low: #fafafd;
8086
- --md3-surface-container: #ffffff;
8087
- --md3-surface-container-high: #ececf6;
8088
- --md3-surface-container-highest: #ffffff;
8089
- --md3-surface-variant: #ececf6;
8090
- --md3-on-surface: #191c24;
8091
- --md3-on-surface-variant: #5e5e7a;
8092
- --md3-outline: #5e5e7a;
8093
- --md3-outline-variant: #dbdbea;
8094
- --depth-1: #f5f5fb;
8095
- --depth-2: #ffffff;
8096
- --depth-3: #ececf6;
8097
- --depth-4: #ffffff;
8098
- --bg-root: #f5f5fb;
8099
- --bg-dark: #f5f5fb;
8100
- --bg-section: #ececf6;
8101
- --bg-card: #ffffff;
8102
- --bg-elevated: #ffffff;
8103
- --bg-input: #f5f5fb;
8104
- --border-subtle: rgba(25, 28, 36, 0.08);
8105
- --border-default: rgba(25, 28, 36, 0.12);
8106
- --border-hover: rgba(25, 28, 36, 0.24);
8107
- --text-primary: #191c24;
8108
- --text-secondary: #3a3a50;
8109
- --text-muted: #5e5e7a;
8110
- --text-dim: #5e5e7a;
8111
- }
8112
- .dark[data-theme="website"] {
8113
- --hsl-background: 243 45% 7.8%;
8114
- --hsl-foreground: 0 0% 99.2%;
8115
- --hsl-card: 244 34.9% 16.3%;
8116
- --hsl-card-foreground: 0 0% 99.2%;
8117
- --hsl-popover: 243 33.3% 21.2%;
8118
- --hsl-popover-foreground: 0 0% 99.2%;
8119
- --hsl-secondary: 244 34% 19%;
8120
- --hsl-secondary-foreground: 0 0% 99.2%;
8121
- --hsl-muted: 244 34% 19%;
8122
- --hsl-muted-foreground: 237 23% 65.9%;
8123
- --hsl-accent: 243 33.3% 21.2%;
8124
- --hsl-accent-foreground: 0 0% 99.2%;
8125
- --hsl-border: 243 31.9% 28.2%;
8126
- --hsl-input: 243 41.2% 10%;
8127
- --md3-surface: #0c0b1d;
8128
- --md3-surface-dim: #080814;
8129
- --md3-surface-bright: #2e2c56;
8130
- --md3-surface-container-lowest: #080814;
8131
- --md3-surface-container-low: #141328;
8132
- --md3-surface-container: #1d1b38;
8133
- --md3-surface-container-high: #222041;
8134
- --md3-surface-container-highest: #262448;
8135
- --md3-surface-variant: #222041;
8136
- --md3-on-surface: #fdfdfd;
8137
- --md3-on-surface-variant: #aaa8b8;
8138
- --md3-outline: #9496bc;
8139
- --md3-outline-variant: #33315f;
8140
- --depth-1: #0c0b1d;
8141
- --depth-2: #1d1b38;
8142
- --depth-3: #222041;
8143
- --depth-4: #262448;
8144
- --bg-root: #0c0b1d;
8145
- --bg-dark: #0c0b1d;
8146
- --bg-section: #141328;
8147
- --bg-card: #1d1b38;
8148
- --bg-elevated: #262448;
8149
- --bg-input: #100f24;
8150
- --border-subtle: rgba(255, 255, 255, 0.08);
8151
- --border-default: rgba(255, 255, 255, 0.15);
8152
- --border-hover: rgba(255, 255, 255, 0.28);
8153
- --text-primary: #fdfdfd;
8154
- --text-secondary: #aaa8b8;
8155
- --text-muted: #9496bc;
8156
- --text-dim: #9496bc;
8157
- }
8158
8559
  :is(.dark, .light, [data-theme], [data-sandbox-theme="vault"]) {
8159
8560
  --foreground: var(--hsl-foreground);
8160
8561
  --muted-foreground: var(--hsl-muted-foreground);