/* Generated from src/theme.rs and src/ui/glass.rs by
   `cargo run --example site-styles`. Do not edit. */

@property --bg { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --text { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --text-dim { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --text-faint { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --tint { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --edge { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --sheen { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --panel { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --panel-edge { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --control { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --control-hover { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --control-active { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --divider { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --shadow { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --danger { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --on-accent { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --accent-wash { syntax: '<color>'; inherits: true; initial-value: transparent; }

:root { transition: --bg .5s ease, --surface .5s ease, --text .5s ease, --text-dim .5s ease, --text-faint .5s ease, --tint .5s ease, --edge .5s ease, --sheen .5s ease, --panel .5s ease, --panel-edge .5s ease, --control .5s ease, --control-hover .5s ease, --control-active .5s ease, --divider .5s ease, --shadow .5s ease, --danger .5s ease, --accent .5s ease, --on-accent .5s ease, --accent-wash .5s ease; }
@media (prefers-reduced-motion: reduce) { :root { transition: none; } }

:root { color-scheme: light; --bg: #f3f3f1; --surface: #ffffff; --text: #1d1d1b; --text-dim: #4e4e4c; --text-faint: #60605e; --tint: rgb(243 243 241 / 0.36); --edge: rgb(255 255 255 / 0.7); --sheen: rgb(255 255 255 / 0.35); --panel: rgb(255 255 255 / 0.46); --panel-edge: rgb(29 29 27 / 0.09); --control: rgb(29 29 27 / 0.08); --control-hover: rgb(29 29 27 / 0.14); --control-active: rgb(29 29 27 / 0.2); --divider: rgb(29 29 27 / 0.09); --shadow: rgb(0 0 0 / 0.07); --danger: #c62828; --accent: #d4552b; --on-accent: #ffffff; --accent-wash: rgb(212 85 43 / 0.1); }
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; --bg: #1c1c1e; --surface: #2e2e31; --text: #f2f2f0; --text-dim: #bebebd; --text-faint: #a3a3a4; --tint: rgb(28 28 30 / 0.48); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(46 46 49 / 0.42); --panel-edge: rgb(242 242 240 / 0.09); --control: rgb(242 242 240 / 0.08); --control-hover: rgb(242 242 240 / 0.14); --control-active: rgb(242 242 240 / 0.2); --divider: rgb(242 242 240 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #f0764a; --on-accent: #1c1c1e; --accent-wash: rgb(240 118 74 / 0.13); } }

/* System */
:root[data-theme="system"][data-backdrop="clear"] { color-scheme: light; --bg: #f3f3f1; --surface: #ffffff; --text: #1d1d1b; --text-dim: #4e4e4c; --text-faint: #60605e; --tint: rgb(243 243 241 / 0.36); --edge: rgb(255 255 255 / 0.7); --sheen: rgb(255 255 255 / 0.35); --panel: rgb(255 255 255 / 0.46); --panel-edge: rgb(29 29 27 / 0.09); --control: rgb(29 29 27 / 0.08); --control-hover: rgb(29 29 27 / 0.14); --control-active: rgb(29 29 27 / 0.2); --divider: rgb(29 29 27 / 0.09); --shadow: rgb(0 0 0 / 0.07); --danger: #c62828; --accent: #d4552b; --on-accent: #ffffff; --accent-wash: rgb(212 85 43 / 0.1); }
@media (prefers-color-scheme: dark) { :root[data-theme="system"][data-backdrop="clear"] { color-scheme: dark; --bg: #1c1c1e; --surface: #2e2e31; --text: #f2f2f0; --text-dim: #bebebd; --text-faint: #a3a3a4; --tint: rgb(28 28 30 / 0.48); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(46 46 49 / 0.42); --panel-edge: rgb(242 242 240 / 0.09); --control: rgb(242 242 240 / 0.08); --control-hover: rgb(242 242 240 / 0.14); --control-active: rgb(242 242 240 / 0.2); --divider: rgb(242 242 240 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #f0764a; --on-accent: #1c1c1e; --accent-wash: rgb(240 118 74 / 0.13); } }
:root[data-theme="system"][data-backdrop="frosted"] { color-scheme: light; --bg: #f3f3f1; --surface: #ffffff; --text: #1d1d1b; --text-dim: #61615f; --text-faint: #767674; --tint: rgb(243 243 241 / 0.64); --edge: rgb(255 255 255 / 0.7); --sheen: rgb(255 255 255 / 0.35); --panel: rgb(255 255 255 / 0.6); --panel-edge: rgb(29 29 27 / 0.09); --control: rgb(29 29 27 / 0.08); --control-hover: rgb(29 29 27 / 0.14); --control-active: rgb(29 29 27 / 0.2); --divider: rgb(29 29 27 / 0.09); --shadow: rgb(0 0 0 / 0.07); --danger: #c62828; --accent: #d4552b; --on-accent: #ffffff; --accent-wash: rgb(212 85 43 / 0.1); }
@media (prefers-color-scheme: dark) { :root[data-theme="system"][data-backdrop="frosted"] { color-scheme: dark; --bg: #1c1c1e; --surface: #2e2e31; --text: #f2f2f0; --text-dim: #aeaead; --text-faint: #838384; --tint: rgb(28 28 30 / 0.72); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(46 46 49 / 0.55); --panel-edge: rgb(242 242 240 / 0.09); --control: rgb(242 242 240 / 0.08); --control-hover: rgb(242 242 240 / 0.14); --control-active: rgb(242 242 240 / 0.2); --divider: rgb(242 242 240 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #f0764a; --on-accent: #1c1c1e; --accent-wash: rgb(240 118 74 / 0.13); } }
:root[data-theme="system"][data-backdrop="solid"] { color-scheme: light; --bg: #f3f3f1; --surface: #ffffff; --text: #1d1d1b; --text-dim: #61615f; --text-faint: #939391; --tint: #f3f3f1; --edge: rgb(255 255 255 / 0.7); --sheen: rgb(255 255 255 / 0.35); --panel: rgb(255 255 255 / 0.6); --panel-edge: rgb(29 29 27 / 0.09); --control: rgb(29 29 27 / 0.08); --control-hover: rgb(29 29 27 / 0.14); --control-active: rgb(29 29 27 / 0.2); --divider: rgb(29 29 27 / 0.09); --shadow: rgb(0 0 0 / 0.07); --danger: #c62828; --accent: #d4552b; --on-accent: #ffffff; --accent-wash: rgb(212 85 43 / 0.1); }
@media (prefers-color-scheme: dark) { :root[data-theme="system"][data-backdrop="solid"] { color-scheme: dark; --bg: #1c1c1e; --surface: #2e2e31; --text: #f2f2f0; --text-dim: #aeaead; --text-faint: #7c7c7d; --tint: #1c1c1e; --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(46 46 49 / 0.6); --panel-edge: rgb(242 242 240 / 0.09); --control: rgb(242 242 240 / 0.08); --control-hover: rgb(242 242 240 / 0.14); --control-active: rgb(242 242 240 / 0.2); --divider: rgb(242 242 240 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #f0764a; --on-accent: #1c1c1e; --accent-wash: rgb(240 118 74 / 0.13); } }
[data-swatch="system"] { --b: #f3f3f1; --t: #1d1d1b; --a: #d4552b; }
@media (prefers-color-scheme: dark) { [data-swatch="system"] { --b: #1c1c1e; --t: #f2f2f0; --a: #f0764a; } }

/* Catppuccin Latte */
:root[data-theme="catppuccin-latte"][data-backdrop="clear"] { color-scheme: light; --bg: #eff1f5; --surface: #dce0e8; --text: #35374a; --text-dim: #464853; --text-faint: #5b5c64; --tint: rgb(239 241 245 / 0.36); --edge: rgb(255 255 255 / 0.7); --sheen: rgb(255 255 255 / 0.35); --panel: rgb(220 224 232 / 0.46); --panel-edge: rgb(53 55 74 / 0.09); --control: rgb(53 55 74 / 0.08); --control-hover: rgb(53 55 74 / 0.14); --control-active: rgb(53 55 74 / 0.2); --divider: rgb(53 55 74 / 0.09); --shadow: rgb(0 0 0 / 0.07); --danger: #c62828; --accent: #8839ef; --on-accent: #eff1f5; --accent-wash: rgb(136 57 239 / 0.1); }
:root[data-theme="catppuccin-latte"][data-backdrop="frosted"] { color-scheme: light; --bg: #eff1f5; --surface: #dce0e8; --text: #484b64; --text-dim: #5a5c69; --text-faint: #74767f; --tint: rgb(239 241 245 / 0.64); --edge: rgb(255 255 255 / 0.7); --sheen: rgb(255 255 255 / 0.35); --panel: rgb(220 224 232 / 0.6); --panel-edge: rgb(72 75 100 / 0.09); --control: rgb(72 75 100 / 0.08); --control-hover: rgb(72 75 100 / 0.14); --control-active: rgb(72 75 100 / 0.2); --divider: rgb(72 75 100 / 0.09); --shadow: rgb(0 0 0 / 0.07); --danger: #c62828; --accent: #8839ef; --on-accent: #eff1f5; --accent-wash: rgb(136 57 239 / 0.1); }
:root[data-theme="catppuccin-latte"][data-backdrop="solid"] { color-scheme: light; --bg: #eff1f5; --surface: #dce0e8; --text: #4c4f69; --text-dim: #737687; --text-faint: #8d8f9b; --tint: #eff1f5; --edge: rgb(255 255 255 / 0.7); --sheen: rgb(255 255 255 / 0.35); --panel: rgb(220 224 232 / 0.6); --panel-edge: rgb(76 79 105 / 0.09); --control: rgb(76 79 105 / 0.08); --control-hover: rgb(76 79 105 / 0.14); --control-active: rgb(76 79 105 / 0.2); --divider: rgb(76 79 105 / 0.09); --shadow: rgb(0 0 0 / 0.07); --danger: #c62828; --accent: #8839ef; --on-accent: #eff1f5; --accent-wash: rgb(136 57 239 / 0.1); }
[data-swatch="catppuccin-latte"] { --b: #eff1f5; --t: #4c4f69; --a: #8839ef; }

/* Catppuccin Mocha */
:root[data-theme="catppuccin-mocha"][data-backdrop="clear"] { color-scheme: dark; --bg: #1e1e2e; --surface: #313244; --text: #d5dcf6; --text-dim: #babecf; --text-faint: #a0a3b1; --tint: rgb(30 30 46 / 0.48); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(49 50 68 / 0.42); --panel-edge: rgb(213 220 246 / 0.09); --control: rgb(213 220 246 / 0.08); --control-hover: rgb(213 220 246 / 0.14); --control-active: rgb(213 220 246 / 0.2); --divider: rgb(213 220 246 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #cba6f7; --on-accent: #1e1e2e; --accent-wash: rgb(203 166 247 / 0.13); }
:root[data-theme="catppuccin-mocha"][data-backdrop="frosted"] { color-scheme: dark; --bg: #1e1e2e; --surface: #313244; --text: #cdd6f4; --text-dim: #959bb5; --text-faint: #7c7f93; --tint: rgb(30 30 46 / 0.72); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(49 50 68 / 0.55); --panel-edge: rgb(205 214 244 / 0.09); --control: rgb(205 214 244 / 0.08); --control-hover: rgb(205 214 244 / 0.14); --control-active: rgb(205 214 244 / 0.2); --divider: rgb(205 214 244 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #cba6f7; --on-accent: #1e1e2e; --accent-wash: rgb(203 166 247 / 0.13); }
:root[data-theme="catppuccin-mocha"][data-backdrop="solid"] { color-scheme: dark; --bg: #1e1e2e; --surface: #313244; --text: #cdd6f4; --text-dim: #959bb5; --text-faint: #6d7187; --tint: #1e1e2e; --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(49 50 68 / 0.6); --panel-edge: rgb(205 214 244 / 0.09); --control: rgb(205 214 244 / 0.08); --control-hover: rgb(205 214 244 / 0.14); --control-active: rgb(205 214 244 / 0.2); --divider: rgb(205 214 244 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #cba6f7; --on-accent: #1e1e2e; --accent-wash: rgb(203 166 247 / 0.13); }
[data-swatch="catppuccin-mocha"] { --b: #1e1e2e; --t: #cdd6f4; --a: #cba6f7; }

/* Dracula */
:root[data-theme="dracula"][data-backdrop="clear"] { color-scheme: dark; --bg: #282a36; --surface: #44475a; --text: #f8f8f2; --text-dim: #c8c8c8; --text-faint: #aaabae; --tint: rgb(40 42 54 / 0.48); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(68 71 90 / 0.42); --panel-edge: rgb(248 248 242 / 0.09); --control: rgb(248 248 242 / 0.08); --control-hover: rgb(248 248 242 / 0.14); --control-active: rgb(248 248 242 / 0.2); --divider: rgb(248 248 242 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #bd93f9; --on-accent: #282a36; --accent-wash: rgb(189 147 249 / 0.13); }
:root[data-theme="dracula"][data-backdrop="frosted"] { color-scheme: dark; --bg: #282a36; --surface: #44475a; --text: #f8f8f2; --text-dim: #b5b6b6; --text-faint: #8c8d91; --tint: rgb(40 42 54 / 0.72); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(68 71 90 / 0.55); --panel-edge: rgb(248 248 242 / 0.09); --control: rgb(248 248 242 / 0.08); --control-hover: rgb(248 248 242 / 0.14); --control-active: rgb(248 248 242 / 0.2); --divider: rgb(248 248 242 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #bd93f9; --on-accent: #282a36; --accent-wash: rgb(189 147 249 / 0.13); }
:root[data-theme="dracula"][data-backdrop="solid"] { color-scheme: dark; --bg: #282a36; --surface: #44475a; --text: #f8f8f2; --text-dim: #b5b6b6; --text-faint: #86878b; --tint: #282a36; --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(68 71 90 / 0.6); --panel-edge: rgb(248 248 242 / 0.09); --control: rgb(248 248 242 / 0.08); --control-hover: rgb(248 248 242 / 0.14); --control-active: rgb(248 248 242 / 0.2); --divider: rgb(248 248 242 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #bd93f9; --on-accent: #282a36; --accent-wash: rgb(189 147 249 / 0.13); }
[data-swatch="dracula"] { --b: #282a36; --t: #f8f8f2; --a: #bd93f9; }

/* Gruvbox Dark */
:root[data-theme="gruvbox-dark"][data-backdrop="clear"] { color-scheme: dark; --bg: #282828; --surface: #3c3836; --text: #efe2c1; --text-dim: #cac3b0; --text-faint: #aca89c; --tint: rgb(40 40 40 / 0.48); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(60 56 54 / 0.42); --panel-edge: rgb(239 226 193 / 0.09); --control: rgb(239 226 193 / 0.08); --control-hover: rgb(239 226 193 / 0.14); --control-active: rgb(239 226 193 / 0.2); --divider: rgb(239 226 193 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #fe8019; --on-accent: #282828; --accent-wash: rgb(254 128 25 / 0.13); }
:root[data-theme="gruvbox-dark"][data-backdrop="frosted"] { color-scheme: dark; --bg: #282828; --surface: #3c3836; --text: #ebdbb2; --text-dim: #ada286; --text-faint: #938d7d; --tint: rgb(40 40 40 / 0.72); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(60 56 54 / 0.55); --panel-edge: rgb(235 219 178 / 0.09); --control: rgb(235 219 178 / 0.08); --control-hover: rgb(235 219 178 / 0.14); --control-active: rgb(235 219 178 / 0.2); --divider: rgb(235 219 178 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #fe8019; --on-accent: #282828; --accent-wash: rgb(254 128 25 / 0.13); }
:root[data-theme="gruvbox-dark"][data-backdrop="solid"] { color-scheme: dark; --bg: #282828; --surface: #3c3836; --text: #ebdbb2; --text-dim: #ada286; --text-faint: #807966; --tint: #282828; --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(60 56 54 / 0.6); --panel-edge: rgb(235 219 178 / 0.09); --control: rgb(235 219 178 / 0.08); --control-hover: rgb(235 219 178 / 0.14); --control-active: rgb(235 219 178 / 0.2); --divider: rgb(235 219 178 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #fe8019; --on-accent: #282828; --accent-wash: rgb(254 128 25 / 0.13); }
[data-swatch="gruvbox-dark"] { --b: #282828; --t: #ebdbb2; --a: #fe8019; }

/* Gruvbox Light */
:root[data-theme="gruvbox-light"][data-backdrop="clear"] { color-scheme: light; --bg: #fbf1c7; --surface: #ebdbb2; --text: #3c3836; --text-dim: #4f4b41; --text-faint: #635f50; --tint: rgb(251 241 199 / 0.36); --edge: rgb(255 255 255 / 0.7); --sheen: rgb(255 255 255 / 0.35); --panel: rgb(235 219 178 / 0.46); --panel-edge: rgb(60 56 54 / 0.09); --control: rgb(60 56 54 / 0.08); --control-hover: rgb(60 56 54 / 0.14); --control-active: rgb(60 56 54 / 0.2); --divider: rgb(60 56 54 / 0.09); --shadow: rgb(0 0 0 / 0.07); --danger: #c62828; --accent: #d65d0e; --on-accent: #fbf1c7; --accent-wash: rgb(214 93 14 / 0.1); }
:root[data-theme="gruvbox-light"][data-backdrop="frosted"] { color-scheme: light; --bg: #fbf1c7; --surface: #ebdbb2; --text: #3c3836; --text-dim: #615c50; --text-faint: #7c7765; --tint: rgb(251 241 199 / 0.64); --edge: rgb(255 255 255 / 0.7); --sheen: rgb(255 255 255 / 0.35); --panel: rgb(235 219 178 / 0.6); --panel-edge: rgb(60 56 54 / 0.09); --control: rgb(60 56 54 / 0.08); --control-hover: rgb(60 56 54 / 0.14); --control-active: rgb(60 56 54 / 0.2); --divider: rgb(60 56 54 / 0.09); --shadow: rgb(0 0 0 / 0.07); --danger: #c62828; --accent: #d65d0e; --on-accent: #fbf1c7; --accent-wash: rgb(214 93 14 / 0.1); }
:root[data-theme="gruvbox-light"][data-backdrop="solid"] { color-scheme: light; --bg: #fbf1c7; --surface: #ebdbb2; --text: #3c3836; --text-dim: #797364; --text-faint: #958e79; --tint: #fbf1c7; --edge: rgb(255 255 255 / 0.7); --sheen: rgb(255 255 255 / 0.35); --panel: rgb(235 219 178 / 0.6); --panel-edge: rgb(60 56 54 / 0.09); --control: rgb(60 56 54 / 0.08); --control-hover: rgb(60 56 54 / 0.14); --control-active: rgb(60 56 54 / 0.2); --divider: rgb(60 56 54 / 0.09); --shadow: rgb(0 0 0 / 0.07); --danger: #c62828; --accent: #d65d0e; --on-accent: #fbf1c7; --accent-wash: rgb(214 93 14 / 0.1); }
[data-swatch="gruvbox-light"] { --b: #fbf1c7; --t: #3c3836; --a: #d65d0e; }

/* Nord */
:root[data-theme="nord"][data-backdrop="clear"] { color-scheme: dark; --bg: #2e3440; --surface: #3b4252; --text: #eceff4; --text-dim: #cbced2; --text-faint: #a9acb2; --tint: rgb(46 52 64 / 0.48); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(59 66 82 / 0.42); --panel-edge: rgb(236 239 244 / 0.09); --control: rgb(236 239 244 / 0.08); --control-hover: rgb(236 239 244 / 0.14); --control-active: rgb(236 239 244 / 0.2); --divider: rgb(236 239 244 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #88c0d0; --on-accent: #2e3440; --accent-wash: rgb(136 192 208 / 0.13); }
:root[data-theme="nord"][data-backdrop="frosted"] { color-scheme: dark; --bg: #2e3440; --surface: #3b4252; --text: #eceff4; --text-dim: #afb3ba; --text-faint: #90949c; --tint: rgb(46 52 64 / 0.72); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(59 66 82 / 0.55); --panel-edge: rgb(236 239 244 / 0.09); --control: rgb(236 239 244 / 0.08); --control-hover: rgb(236 239 244 / 0.14); --control-active: rgb(236 239 244 / 0.2); --divider: rgb(236 239 244 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #88c0d0; --on-accent: #2e3440; --accent-wash: rgb(136 192 208 / 0.13); }
:root[data-theme="nord"][data-backdrop="solid"] { color-scheme: dark; --bg: #2e3440; --surface: #3b4252; --text: #eceff4; --text-dim: #afb3ba; --text-faint: #848891; --tint: #2e3440; --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(59 66 82 / 0.6); --panel-edge: rgb(236 239 244 / 0.09); --control: rgb(236 239 244 / 0.08); --control-hover: rgb(236 239 244 / 0.14); --control-active: rgb(236 239 244 / 0.2); --divider: rgb(236 239 244 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #88c0d0; --on-accent: #2e3440; --accent-wash: rgb(136 192 208 / 0.13); }
[data-swatch="nord"] { --b: #2e3440; --t: #eceff4; --a: #88c0d0; }

/* One Dark */
:root[data-theme="one-dark"][data-backdrop="clear"] { color-scheme: dark; --bg: #282c34; --surface: #353b45; --text: #e6e8ec; --text-dim: #c6c9ce; --text-faint: #a9acb2; --tint: rgb(40 44 52 / 0.48); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(53 59 69 / 0.42); --panel-edge: rgb(230 232 236 / 0.09); --control: rgb(230 232 236 / 0.08); --control-hover: rgb(230 232 236 / 0.14); --control-active: rgb(230 232 236 / 0.2); --divider: rgb(230 232 236 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #61afef; --on-accent: #282c34; --accent-wash: rgb(97 175 239 / 0.13); }
:root[data-theme="one-dark"][data-backdrop="frosted"] { color-scheme: dark; --bg: #282c34; --surface: #353b45; --text: #c0c5cf; --text-dim: #a7abb3; --text-faint: #8a8e96; --tint: rgb(40 44 52 / 0.72); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(53 59 69 / 0.55); --panel-edge: rgb(192 197 207 / 0.09); --control: rgb(192 197 207 / 0.08); --control-hover: rgb(192 197 207 / 0.14); --control-active: rgb(192 197 207 / 0.2); --divider: rgb(192 197 207 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #61afef; --on-accent: #282c34; --accent-wash: rgb(97 175 239 / 0.13); }
:root[data-theme="one-dark"][data-backdrop="solid"] { color-scheme: dark; --bg: #282c34; --surface: #353b45; --text: #abb2bf; --text-dim: #818793; --text-faint: #6b707a; --tint: #282c34; --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(53 59 69 / 0.6); --panel-edge: rgb(171 178 191 / 0.09); --control: rgb(171 178 191 / 0.08); --control-hover: rgb(171 178 191 / 0.14); --control-active: rgb(171 178 191 / 0.2); --divider: rgb(171 178 191 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #61afef; --on-accent: #282c34; --accent-wash: rgb(97 175 239 / 0.13); }
[data-swatch="one-dark"] { --b: #282c34; --t: #abb2bf; --a: #61afef; }

/* Rosé Pine */
:root[data-theme="rose-pine"][data-backdrop="clear"] { color-scheme: dark; --bg: #191724; --surface: #26233a; --text: #e0def4; --text-dim: #bdbbc8; --text-faint: #9d9ca8; --tint: rgb(25 23 36 / 0.48); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(38 35 58 / 0.42); --panel-edge: rgb(224 222 244 / 0.09); --control: rgb(224 222 244 / 0.08); --control-hover: rgb(224 222 244 / 0.14); --control-active: rgb(224 222 244 / 0.2); --divider: rgb(224 222 244 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #ebbcba; --on-accent: #191724; --accent-wash: rgb(235 188 186 / 0.13); }
:root[data-theme="rose-pine"][data-backdrop="frosted"] { color-scheme: dark; --bg: #191724; --surface: #26233a; --text: #e0def4; --text-dim: #a09eb1; --text-faint: #817f8f; --tint: rgb(25 23 36 / 0.72); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(38 35 58 / 0.55); --panel-edge: rgb(224 222 244 / 0.09); --control: rgb(224 222 244 / 0.08); --control-hover: rgb(224 222 244 / 0.14); --control-active: rgb(224 222 244 / 0.2); --divider: rgb(224 222 244 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #ebbcba; --on-accent: #191724; --accent-wash: rgb(235 188 186 / 0.13); }
:root[data-theme="rose-pine"][data-backdrop="solid"] { color-scheme: dark; --bg: #191724; --surface: #26233a; --text: #e0def4; --text-dim: #a09eb1; --text-faint: #737182; --tint: #191724; --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(38 35 58 / 0.6); --panel-edge: rgb(224 222 244 / 0.09); --control: rgb(224 222 244 / 0.08); --control-hover: rgb(224 222 244 / 0.14); --control-active: rgb(224 222 244 / 0.2); --divider: rgb(224 222 244 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #ebbcba; --on-accent: #191724; --accent-wash: rgb(235 188 186 / 0.13); }
[data-swatch="rose-pine"] { --b: #191724; --t: #e0def4; --a: #ebbcba; }

/* Solarized Dark */
:root[data-theme="solarized-dark"][data-backdrop="clear"] { color-scheme: dark; --bg: #002b36; --surface: #073642; --text: #dfe3e3; --text-dim: #b9c4c5; --text-faint: #97a8ab; --tint: rgb(0 43 54 / 0.48); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(7 54 66 / 0.42); --panel-edge: rgb(223 227 227 / 0.09); --control: rgb(223 227 227 / 0.08); --control-hover: rgb(223 227 227 / 0.14); --control-active: rgb(223 227 227 / 0.2); --divider: rgb(223 227 227 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #268bd2; --on-accent: #fdf6e3; --accent-wash: rgb(38 139 210 / 0.13); }
:root[data-theme="solarized-dark"][data-backdrop="frosted"] { color-scheme: dark; --bg: #002b36; --surface: #073642; --text: #b3bdbd; --text-dim: #93a3a5; --text-faint: #7b9094; --tint: rgb(0 43 54 / 0.72); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(7 54 66 / 0.55); --panel-edge: rgb(179 189 189 / 0.09); --control: rgb(179 189 189 / 0.08); --control-hover: rgb(179 189 189 / 0.14); --control-active: rgb(179 189 189 / 0.2); --divider: rgb(179 189 189 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #268bd2; --on-accent: #fdf6e3; --accent-wash: rgb(38 139 210 / 0.13); }
:root[data-theme="solarized-dark"][data-backdrop="solid"] { color-scheme: dark; --bg: #002b36; --surface: #073642; --text: #93a1a1; --text-dim: #74888c; --text-faint: #557075; --tint: #002b36; --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(7 54 66 / 0.6); --panel-edge: rgb(147 161 161 / 0.09); --control: rgb(147 161 161 / 0.08); --control-hover: rgb(147 161 161 / 0.14); --control-active: rgb(147 161 161 / 0.2); --divider: rgb(147 161 161 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #268bd2; --on-accent: #fdf6e3; --accent-wash: rgb(38 139 210 / 0.13); }
[data-swatch="solarized-dark"] { --b: #002b36; --t: #93a1a1; --a: #268bd2; }

/* Solarized Light */
:root[data-theme="solarized-light"][data-backdrop="clear"] { color-scheme: light; --bg: #fdf6e3; --surface: #eee8d5; --text: #073642; --text-dim: #3c5153; --text-faint: #5c6865; --tint: rgb(253 246 227 / 0.36); --edge: rgb(255 255 255 / 0.7); --sheen: rgb(255 255 255 / 0.35); --panel: rgb(238 232 213 / 0.46); --panel-edge: rgb(7 54 66 / 0.09); --control: rgb(7 54 66 / 0.08); --control-hover: rgb(7 54 66 / 0.14); --control-active: rgb(7 54 66 / 0.2); --divider: rgb(7 54 66 / 0.09); --shadow: rgb(0 0 0 / 0.07); --danger: #c62828; --accent: #268bd2; --on-accent: #fdf6e3; --accent-wash: rgb(38 139 210 / 0.1); }
:root[data-theme="solarized-light"][data-backdrop="frosted"] { color-scheme: light; --bg: #fdf6e3; --surface: #eee8d5; --text: #073642; --text-dim: #4d686a; --text-faint: #6b7874; --tint: rgb(253 246 227 / 0.64); --edge: rgb(255 255 255 / 0.7); --sheen: rgb(255 255 255 / 0.35); --panel: rgb(238 232 213 / 0.6); --panel-edge: rgb(7 54 66 / 0.09); --control: rgb(7 54 66 / 0.08); --control-hover: rgb(7 54 66 / 0.14); --control-active: rgb(7 54 66 / 0.2); --divider: rgb(7 54 66 / 0.09); --shadow: rgb(0 0 0 / 0.07); --danger: #c62828; --accent: #268bd2; --on-accent: #fdf6e3; --accent-wash: rgb(38 139 210 / 0.1); }
:root[data-theme="solarized-light"][data-backdrop="solid"] { color-scheme: light; --bg: #fdf6e3; --surface: #eee8d5; --text: #073642; --text-dim: #567376; --text-faint: #879893; --tint: #fdf6e3; --edge: rgb(255 255 255 / 0.7); --sheen: rgb(255 255 255 / 0.35); --panel: rgb(238 232 213 / 0.6); --panel-edge: rgb(7 54 66 / 0.09); --control: rgb(7 54 66 / 0.08); --control-hover: rgb(7 54 66 / 0.14); --control-active: rgb(7 54 66 / 0.2); --divider: rgb(7 54 66 / 0.09); --shadow: rgb(0 0 0 / 0.07); --danger: #c62828; --accent: #268bd2; --on-accent: #fdf6e3; --accent-wash: rgb(38 139 210 / 0.1); }
[data-swatch="solarized-light"] { --b: #fdf6e3; --t: #073642; --a: #268bd2; }

/* Tokyo Night */
:root[data-theme="tokyo-night"][data-backdrop="clear"] { color-scheme: dark; --bg: #1a1b26; --surface: #24283b; --text: #d3daf8; --text-dim: #b9bed1; --text-faint: #9b9eae; --tint: rgb(26 27 38 / 0.48); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(36 40 59 / 0.42); --panel-edge: rgb(211 218 248 / 0.09); --control: rgb(211 218 248 / 0.08); --control-hover: rgb(211 218 248 / 0.14); --control-active: rgb(211 218 248 / 0.2); --divider: rgb(211 218 248 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #7aa2f7; --on-accent: #1a1b26; --accent-wash: rgb(122 162 247 / 0.13); }
:root[data-theme="tokyo-night"][data-backdrop="frosted"] { color-scheme: dark; --bg: #1a1b26; --surface: #24283b; --text: #c0caf5; --text-dim: #9197b7; --text-faint: #7c8096; --tint: rgb(26 27 38 / 0.72); --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(36 40 59 / 0.55); --panel-edge: rgb(192 202 245 / 0.09); --control: rgb(192 202 245 / 0.08); --control-hover: rgb(192 202 245 / 0.14); --control-active: rgb(192 202 245 / 0.2); --divider: rgb(192 202 245 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #7aa2f7; --on-accent: #1a1b26; --accent-wash: rgb(122 162 247 / 0.13); }
:root[data-theme="tokyo-night"][data-backdrop="solid"] { color-scheme: dark; --bg: #1a1b26; --surface: #24283b; --text: #c0caf5; --text-dim: #8b92b3; --text-faint: #656a83; --tint: #1a1b26; --edge: rgb(255 255 255 / 0.14); --sheen: rgb(255 255 255 / 0.05); --panel: rgb(36 40 59 / 0.6); --panel-edge: rgb(192 202 245 / 0.09); --control: rgb(192 202 245 / 0.08); --control-hover: rgb(192 202 245 / 0.14); --control-active: rgb(192 202 245 / 0.2); --divider: rgb(192 202 245 / 0.09); --shadow: rgb(0 0 0 / 0.22); --danger: #ff8a80; --accent: #7aa2f7; --on-accent: #1a1b26; --accent-wash: rgb(122 162 247 / 0.13); }
[data-swatch="tokyo-night"] { --b: #1a1b26; --t: #c0caf5; --a: #7aa2f7; }