@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn-vue/tailwind.css";

@custom-variant dark (&:is(.dark *));

@utility cn-font-heading {
    font-family: var(--font-heading);
}

@theme inline {
    --font-sans: var(--font-sans);
    --font-weight-normal: 500;
    --font-weight-medium: 600;
    --font-weight-semibold: 700;
    --font-weight-bold: 700;
    --font-heading: var(--font-heading);
    --font-logo: var(--font-logo);
    --color-sidebar-ring: var(--sidebar-ring);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar: var(--sidebar);
    --color-chart-5: var(--chart-5);
    --color-chart-4: var(--chart-4);
    --color-chart-3: var(--chart-3);
    --color-chart-2: var(--chart-2);
    --color-chart-1: var(--chart-1);
    --color-ring: var(--ring);
    --color-input: var(--input);
    --color-border: var(--border);
    --color-destructive: var(--destructive);
    --color-accent-foreground: var(--accent-foreground);
    --color-accent: var(--accent);
    --color-muted-foreground: var(--muted-foreground);
    --color-muted: var(--muted);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-secondary: var(--secondary);
    --color-primary-foreground: var(--primary-foreground);
    --color-primary: var(--primary);
    --color-popover-foreground: var(--popover-foreground);
    --color-popover: var(--popover);
    --color-card-foreground: var(--card-foreground);
    --color-card: var(--card);
    --color-foreground: var(--foreground);
    --color-background: var(--background);
    --radius-xs: calc(var(--radius) * 0.2);
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --radius-2xl: calc(var(--radius) * 1.6);
    --radius-3xl: calc(var(--radius) * 2.4);
}

:root, [data-theme="standard"] {
    --font-sans: 'Figtree', sans-serif;
    --font-heading: 'Manrope', sans-serif;
    --font-logo: 'Archivo Black', sans-serif;
    --radius: 0.625rem;
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.459 0.187 3.815);
    --primary-foreground: oklch(0.971 0.014 343.198);
    --secondary: oklch(0.274 0.006 286.033);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.459 0.187 3.815);
    --accent-foreground: oklch(0.971 0.014 343.198);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
    --chart-1: oklch(0.823 0.12 346.018);
    --chart-2: oklch(0.656 0.241 354.308);
    --chart-3: oklch(0.592 0.249 0.584);
    --chart-4: oklch(0.525 0.223 3.958);
    --chart-5: oklch(0.459 0.187 3.815);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.656 0.241 354.308);
    --sidebar-primary-foreground: oklch(0.971 0.014 343.198);
    --sidebar-accent: oklch(0.459 0.187 3.815);
    --sidebar-accent-foreground: oklch(0.971 0.014 343.198);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.556 0 0);
}

/* Discord-Theme (tweakcn, Dark-Variante) */
[data-theme="discord"] {
    --font-sans: 'Noto Sans JP', ui-sans-serif, sans-serif, system-ui;
    --font-heading: 'Noto Sans JP', ui-sans-serif, sans-serif, system-ui;
    --radius: 0.625rem;
    --background: oklch(0.3225 0.0107 278.2517);
    --foreground: oklch(1 0 0);
    --card: oklch(0.3502 0.0122 279.2835);
    --card-foreground: oklch(1 0 0);
    --popover: oklch(0.3502 0.0122 279.2835);
    --popover-foreground: oklch(1 0 0);
    --primary: oklch(0.5774 0.2091 273.8504);
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(0.3779 0.0118 285.8207);
    --secondary-foreground: oklch(1 0 0);
    --muted: oklch(0.3066 0.0108 278.2166);
    --muted-foreground: oklch(0.723 0.0087 278.582);
    --accent: oklch(0.4074 0.0134 280.1154);
    --accent-foreground: oklch(1 0 0);
    --destructive: oklch(0.8004 0.1141 23.185);
    --border: oklch(0.369 0.0103 278.3345);
    --input: oklch(0.3066 0.0108 278.2166);
    --ring: oklch(0.5774 0.2091 273.8504);
    --chart-1: oklch(0.8092 0.1122 345.1956);
    --chart-2: oklch(0.8757 0.0979 83.6546);
    --chart-3: oklch(0.9075 0.0946 165.054);
    --chart-4: oklch(0.8406 0.0699 242.1914);
    --chart-5: oklch(0.7865 0.1232 309.4396);
    --sidebar: oklch(0.2981 0.0091 276.8201);
    --sidebar-foreground: oklch(0.6876 0.0102 279.6082);
    --sidebar-primary: oklch(0.3804 0.0102 278.3511);
    --sidebar-primary-foreground: oklch(1 0 0);
    --sidebar-accent: oklch(0.3309 0.0087 285.9137);
    --sidebar-accent-foreground: oklch(1 0 0);
    --sidebar-border: oklch(0.3494 0.0087 276.903);
    --sidebar-ring: oklch(0.7151 0.1523 235.2888);
}

/* Cyberpunk-Theme (tweakcn „赛博朋克", Dark-Variante):
   Neon-Grün auf Schwarz, Magenta-Primary, eckig, Glow-Schatten */
[data-theme="cyberpunk"] {
    --font-sans: 'Orbitron', sans-serif;
    --font-heading: 'Orbitron', sans-serif;
    --radius: 0rem;
    --background: oklch(0.1149 0 0);
    --foreground: oklch(0.8803 0.2083 157.334);
    --card: oklch(0.1591 0 0);
    --card-foreground: oklch(1 0 0);
    --popover: oklch(0.1149 0 0);
    --popover-foreground: oklch(0.8803 0.2083 157.334);
    --primary: oklch(0.6083 0.2973 312.1096);
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(0.7392 0.1576 235.3407);
    --secondary-foreground: oklch(1 0 0);
    --muted: oklch(0.2178 0 0);
    --muted-foreground: oklch(0.5693 0 0);
    --accent: oklch(0.6354 0.2541 15.4582);
    --accent-foreground: oklch(1 0 0);
    --destructive: oklch(0.6317 0.2544 21.7529);
    --border: oklch(0.3211 0 0);
    --input: oklch(0.1591 0 0);
    --ring: oklch(0.6083 0.2973 312.1096);
    --chart-1: oklch(0.6083 0.2973 312.1096);
    --chart-2: oklch(0.8803 0.2083 157.334);
    --chart-3: oklch(0.7392 0.1576 235.3407);
    --chart-4: oklch(0.6354 0.2541 15.4582);
    --chart-5: oklch(0.9616 0.213 112.0777);
    --sidebar: oklch(0.0847 0 0);
    --sidebar-foreground: oklch(0.6268 0 0);
    --sidebar-primary: oklch(0.6083 0.2973 312.1096);
    --sidebar-primary-foreground: oklch(1 0 0);
    --sidebar-accent: oklch(0.2178 0 0);
    --sidebar-accent-foreground: oklch(0.8803 0.2083 157.334);
    --sidebar-border: oklch(0.252 0 0);
    --sidebar-ring: oklch(0.7392 0.1576 235.3407);
    --shadow-2xs: 0 0 20px 4px hsl(340 100% 50% / 0.4);
    --shadow-xs: 0 0 20px 4px hsl(340 100% 50% / 0.4);
    --shadow-sm: 0 0 20px 4px hsl(340 100% 50% / 0.8), 0 1px 2px 3px hsl(340 100% 50% / 0.8);
    --shadow: 0 0 20px 4px hsl(340 100% 50% / 0.8), 0 1px 2px 3px hsl(340 100% 50% / 0.8);
    --shadow-md: 0 0 20px 4px hsl(340 100% 50% / 0.8), 0 2px 4px 3px hsl(340 100% 50% / 0.8);
    --shadow-lg: 0 0 20px 4px hsl(340 100% 50% / 0.8), 0 4px 6px 3px hsl(340 100% 50% / 0.8);
    --shadow-xl: 0 0 20px 4px hsl(340 100% 50% / 0.8), 0 8px 10px 3px hsl(340 100% 50% / 0.8);
    --shadow-2xl: 0 0 20px 4px hsl(340 100% 50%);
}

[data-theme="cyberpunk"] body {
    letter-spacing: 0.08em;
}

/* Spring-Theme (tweakcn „CuteSpringTheme", Dark-Variante):
   Mauve/Pflaume-Hintergrund, Pink-Primary, Mint-Secondary, sehr rund */
[data-theme="spring"] {
    --font-sans: 'Jua', sans-serif;
    --font-heading: 'Jua', sans-serif;
    --radius: 1.25rem;
    --background: oklch(0.2482 0.0307 354.5794);
    --foreground: oklch(0.9678 0.0166 3.6461);
    --card: oklch(0.3001 0.0369 357.054);
    --card-foreground: oklch(0.9678 0.0166 3.6461);
    --popover: oklch(0.3001 0.0369 357.054);
    --popover-foreground: oklch(0.9678 0.0166 3.6461);
    --primary: oklch(0.7716 0.1387 9.6611);
    --primary-foreground: oklch(0.2482 0.0307 354.5794);
    --secondary: oklch(0.766 0.1179 145.295);
    --secondary-foreground: oklch(0.2941 0.0509 145.0535);
    --muted: oklch(0.3458 0.0388 356.0232);
    --muted-foreground: oklch(0.8178 0.0293 355.5969);
    --accent: oklch(0.8391 0.1615 84.3763);
    --accent-foreground: oklch(0.2482 0.0307 354.5794);
    --destructive: oklch(0.6875 0.142 21.4566);
    --border: oklch(0.4074 0.043 356.7696);
    --input: oklch(0.3001 0.0369 357.054);
    --ring: oklch(0.7716 0.1387 9.6611);
    --chart-1: oklch(0.7716 0.1387 9.6611);
    --chart-2: oklch(0.766 0.1179 145.295);
    --chart-3: oklch(0.8391 0.1615 84.3763);
    --chart-4: oklch(0.6297 0.1321 299.3578);
    --chart-5: oklch(0.7546 0.1512 38.2575);
    --sidebar: oklch(0.2239 0.0279 355.4364);
    --sidebar-foreground: oklch(0.9678 0.0166 3.6461);
    --sidebar-primary: oklch(0.7716 0.1387 9.6611);
    --sidebar-primary-foreground: oklch(0.2482 0.0307 354.5794);
    --sidebar-accent: oklch(0.3001 0.0369 357.054);
    --sidebar-accent-foreground: oklch(0.9678 0.0166 3.6461);
    --sidebar-border: oklch(0.3458 0.0388 356.0232);
    --sidebar-ring: oklch(0.7716 0.1387 9.6611);
}

[data-theme="spring"] body {
    letter-spacing: 0.02em;
}

/* Terminal-Theme (tweakcn „iconic terminal", Dark-Variante):
   Monospace, Teal-Phosphor auf Schwarz, eckig, keine Schatten */
[data-theme="terminal"] {
    --font-sans: 'JetBrains Mono', monospace;
    --font-heading: 'JetBrains Mono', monospace;
    --radius: 0rem;
    --background: oklch(0.1234 0.0134 174.8007);
    --foreground: oklch(0.7678 0.1655 162.189);
    --card: oklch(0.1577 0.018 172.3648);
    --card-foreground: oklch(0.7678 0.1655 162.189);
    --popover: oklch(0.1414 0.0154 174.4925);
    --popover-foreground: oklch(0.7678 0.1655 162.189);
    --primary: oklch(0.7678 0.1655 162.189);
    --primary-foreground: oklch(0.1234 0.0134 174.8007);
    --secondary: oklch(0.2393 0.0298 170.0849);
    --secondary-foreground: oklch(0.7678 0.1655 162.189);
    --muted: oklch(0.2123 0.0248 170.4461);
    --muted-foreground: oklch(0.4814 0.0721 168.7206);
    --accent: oklch(0.304 0.0414 169.4923);
    --accent-foreground: oklch(0.8309 0.1796 162.0706);
    --destructive: oklch(0.4344 0.1466 25.7809);
    --border: oklch(0.4274 0.0886 163.5258);
    --input: oklch(0.3519 0.0714 164.2596);
    --ring: oklch(0.7678 0.1655 162.189);
    --chart-1: oklch(0.7678 0.1655 162.189);
    --chart-2: oklch(0.8052 0.1423 171.7621);
    --chart-3: oklch(0.7935 0.133 163.1545);
    --chart-4: oklch(0.6201 0.0963 179.7192);
    --chart-5: oklch(0.4814 0.0721 168.7206);
    --sidebar: oklch(0.0979 0.0106 174.8007);
    --sidebar-foreground: oklch(0.7678 0.1655 162.189);
    --sidebar-primary: oklch(0.7678 0.1655 162.189);
    --sidebar-primary-foreground: oklch(0.1234 0.0134 174.8007);
    --sidebar-accent: oklch(0.2393 0.0298 170.0849);
    --sidebar-accent-foreground: oklch(0.8309 0.1796 162.0706);
    --sidebar-border: oklch(0.3519 0.0714 164.2596);
    --sidebar-ring: oklch(0.7678 0.1655 162.189);
    --shadow-2xs: 0 0 0 0 transparent;
    --shadow-xs: 0 0 0 0 transparent;
    --shadow-sm: 0 0 0 0 transparent;
    --shadow: 0 0 0 0 transparent;
    --shadow-md: 0 0 0 0 transparent;
    --shadow-lg: 0 0 0 0 transparent;
    --shadow-xl: 0 0 0 0 transparent;
    --shadow-2xl: 0 0 0 0 transparent;
}

[data-theme="terminal"] body {
    letter-spacing: 0.05em;
}

/* Infoseer-Theme (tweakcn, Dark-Variante): schlichtes Monochrome,
   weiße Primary-Buttons mit dunkler Schrift */
[data-theme="infoseer"] {
    --font-sans: 'Fira Sans', ui-sans-serif, sans-serif, system-ui;
    --font-heading: 'Fira Sans', ui-sans-serif, sans-serif, system-ui;
    --radius: 0.625rem;
    --background: oklch(0.2138 0.0019 286.2347);
    --foreground: oklch(0.9851 0 0);
    --card: oklch(0.2138 0.0019 286.2347);
    --card-foreground: oklch(0.9851 0 0);
    --popover: oklch(0.2686 0 0);
    --popover-foreground: oklch(0.9851 0 0);
    --primary: oklch(0.9219 0 0);
    --primary-foreground: oklch(0.2138 0.0019 286.2347);
    --secondary: oklch(0.2686 0 0);
    --secondary-foreground: oklch(0.9851 0 0);
    --muted: oklch(0.2686 0 0);
    --muted-foreground: oklch(0.709 0 0);
    --accent: oklch(0.3715 0 0);
    --accent-foreground: oklch(0.9851 0 0);
    --destructive: oklch(0.709 0.1879 11.8353);
    --border: oklch(0.2768 0 0);
    --input: oklch(0.325 0 0);
    --ring: oklch(0.5555 0 0);
    --chart-1: oklch(0.8497 0.0888 233.6561);
    --chart-2: oklch(0.6874 0.157 248.1539);
    --chart-3: oklch(0.619 0.181 254.6741);
    --chart-4: oklch(0.5528 0.1826 257.4254);
    --chart-5: oklch(0.4684 0.1508 259.5323);
    --sidebar: oklch(0.2138 0.0019 286.2347);
    --sidebar-foreground: oklch(0.9851 0 0);
    --sidebar-primary: oklch(0.5526 0.2035 259.283);
    --sidebar-primary-foreground: oklch(0.9851 0 0);
    --sidebar-accent: oklch(0.2686 0 0);
    --sidebar-accent-foreground: oklch(0.9851 0 0);
    --sidebar-border: oklch(0.2768 0 0);
    --sidebar-ring: oklch(0.4386 0 0);
}

[data-theme="infoseer"] body {
    letter-spacing: 0.025em;
}

/* Homebrew-Theme (tweakcn, Dark-Variante): Matrix-Grün auf Schwarz,
   eckig, grüner Neon-Glow */
[data-theme="homebrew"] {
    --font-sans: 'Inter', ui-sans-serif, sans-serif, system-ui;
    --font-heading: 'JetBrains Mono', ui-monospace, monospace;
    --radius: 0rem;
    --background: oklch(0 0 0);
    --foreground: oklch(0.8686 0.2776 144.4661);
    --card: oklch(0.2295 0.0624 145.0466);
    --card-foreground: oklch(0.8686 0.2776 144.4661);
    --popover: oklch(0 0 0);
    --popover-foreground: oklch(0.8686 0.2776 144.4661);
    --primary: oklch(0.8686 0.2776 144.4661);
    --primary-foreground: oklch(0 0 0);
    --secondary: oklch(0.3053 0.1039 142.4953);
    --secondary-foreground: oklch(0.8686 0.2776 144.4661);
    --muted: oklch(0.1887 0.0642 142.4953);
    --muted-foreground: oklch(0.7556 0.2021 146.5242);
    --accent: oklch(0.3053 0.1039 142.4953);
    --accent-foreground: oklch(0.8686 0.2776 144.4661);
    --destructive: oklch(0.6786 0.2095 24.6583);
    --border: oklch(0.5412 0.175 144.0774);
    --input: oklch(0.1149 0 0);
    --ring: oklch(0.8686 0.2776 144.4661);
    --chart-1: oklch(0.8686 0.2776 144.4661);
    --chart-2: oklch(0.5638 0.1872 143.245);
    --chart-3: oklch(0.3053 0.1039 142.4953);
    --chart-4: oklch(0.1179 0.0327 343.3438);
    --chart-5: oklch(0.8686 0.2776 144.4661);
    --sidebar: oklch(0.1149 0 0);
    --sidebar-foreground: oklch(0.8686 0.2776 144.4661);
    --sidebar-primary: oklch(0.8686 0.2776 144.4661);
    --sidebar-primary-foreground: oklch(0 0 0);
    --sidebar-accent: oklch(0.3053 0.1039 142.4953);
    --sidebar-accent-foreground: oklch(0.8686 0.2776 144.4661);
    --sidebar-border: oklch(0.5412 0.175 144.0774);
    --sidebar-ring: oklch(0.8686 0.2776 144.4661);
    --shadow-2xs: 0 0 15px 2px hsl(135 100% 50% / 0.2);
    --shadow-xs: 0 0 15px 2px hsl(135 100% 50% / 0.2);
    --shadow-sm: 0 0 15px 2px hsl(135 100% 50% / 0.4), 0 1px 2px 1px hsl(135 100% 50% / 0.4);
    --shadow: 0 0 15px 2px hsl(135 100% 50% / 0.4), 0 1px 2px 1px hsl(135 100% 50% / 0.4);
    --shadow-md: 0 0 15px 2px hsl(135 100% 50% / 0.4), 0 2px 4px 1px hsl(135 100% 50% / 0.4);
    --shadow-lg: 0 0 15px 2px hsl(135 100% 50% / 0.4), 0 4px 6px 1px hsl(135 100% 50% / 0.4);
    --shadow-xl: 0 0 15px 2px hsl(135 100% 50% / 0.4), 0 8px 10px 1px hsl(135 100% 50% / 0.4);
    --shadow-2xl: 0 0 15px 2px hsl(135 100% 50%);
}

[data-theme="homebrew"] body {
    letter-spacing: 0.05em;
}

/* Florense-Theme (tweakcn, Dark-Variante): reines Monochrome,
   weiße Primary mit schwarzer Schrift, keine Schatten */
[data-theme="florense"] {
    --font-sans: 'Geist', ui-sans-serif, sans-serif, system-ui;
    --font-heading: 'Lora', ui-serif, serif;
    --radius: 1rem;
    --background: oklch(0.0969 0 0);
    --foreground: oklch(0.9851 0 0);
    --card: oklch(0 0 0);
    --card-foreground: oklch(0.9851 0 0);
    --popover: oklch(0 0 0);
    --popover-foreground: oklch(0.9851 0 0);
    --primary: oklch(1 0 0);
    --primary-foreground: oklch(0 0 0);
    --secondary: oklch(0.2178 0 0);
    --secondary-foreground: oklch(0.9851 0 0);
    --muted: oklch(0.2178 0 0);
    --muted-foreground: oklch(0.683 0 0);
    --accent: oklch(0.2686 0 0);
    --accent-foreground: oklch(1 0 0);
    --destructive: oklch(1 0 0);
    --border: oklch(0.1913 0 0);
    --input: oklch(0.2686 0 0);
    --ring: oklch(1 0 0);
    --chart-1: oklch(1 0 0);
    --chart-2: oklch(0.8452 0 0);
    --chart-3: oklch(0.683 0 0);
    --chart-4: oklch(0.5103 0 0);
    --chart-5: oklch(0.3211 0 0);
    --sidebar: oklch(0 0 0);
    --sidebar-foreground: oklch(0.9851 0 0);
    --sidebar-primary: oklch(1 0 0);
    --sidebar-primary-foreground: oklch(0 0 0);
    --sidebar-accent: oklch(0.2178 0 0);
    --sidebar-accent-foreground: oklch(1 0 0);
    --sidebar-border: oklch(0.2686 0 0);
    --sidebar-ring: oklch(1 0 0);
    --shadow-2xs: 0 0 0 0 transparent;
    --shadow-xs: 0 0 0 0 transparent;
    --shadow-sm: 0 0 0 0 transparent;
    --shadow: 0 0 0 0 transparent;
    --shadow-md: 0 0 0 0 transparent;
    --shadow-lg: 0 0 0 0 transparent;
    --shadow-xl: 0 0 0 0 transparent;
    --shadow-2xl: 0 0 0 0 transparent;
}

/* Kawi-Green-Theme (tweakcn „high tech kawi green", Dark-Variante):
   Schwarz mit Neon-Grün-Borders, roter Secondary, weiße Offset-Schatten */
[data-theme="kawi-green"] {
    --font-sans: 'Inter', sans-serif;
    --font-heading: 'JetBrains Mono', monospace;
    --radius: 0rem;
    --background: oklch(0 0 0);
    --foreground: oklch(1 0 0);
    --card: oklch(0 0 0);
    --card-foreground: oklch(1 0 0);
    --popover: oklch(0 0 0);
    --popover-foreground: oklch(1 0 0);
    --primary: oklch(0.8815 0.275 138.4872);
    --primary-foreground: oklch(0 0 0);
    --secondary: oklch(0.628 0.2577 29.2339);
    --secondary-foreground: oklch(1 0 0);
    --muted: oklch(0.1448 0 0);
    --muted-foreground: oklch(1 0 0);
    --accent: oklch(1 0 0);
    --accent-foreground: oklch(0 0 0);
    --destructive: oklch(0.628 0.2577 29.2339);
    --border: oklch(0.8815 0.275 138.4872);
    --input: oklch(0.8815 0.275 138.4872);
    --ring: oklch(0.8815 0.275 138.4872);
    --chart-1: oklch(0.8815 0.275 138.4872);
    --chart-2: oklch(0.628 0.2577 29.2339);
    --chart-3: oklch(1 0 0);
    --chart-4: oklch(0.8003 0.1821 151.711);
    --chart-5: oklch(0.645 0.2154 16.4393);
    --sidebar: oklch(0 0 0);
    --sidebar-foreground: oklch(1 0 0);
    --sidebar-primary: oklch(0.8815 0.275 138.4872);
    --sidebar-primary-foreground: oklch(0 0 0);
    --sidebar-accent: oklch(0.1776 0 0);
    --sidebar-accent-foreground: oklch(0.8815 0.275 138.4872);
    --sidebar-border: oklch(0.8815 0.275 138.4872);
    --sidebar-ring: oklch(0.8815 0.275 138.4872);
    --shadow-2xs: -4px 4px 0 0 hsl(0 0% 100% / 0.5);
    --shadow-xs: -4px 4px 0 0 hsl(0 0% 100% / 0.5);
    --shadow-sm: -4px 4px 0 0 hsl(0 0% 100%), -4px 1px 2px -1px hsl(0 0% 100%);
    --shadow: -4px 4px 0 0 hsl(0 0% 100%), -4px 1px 2px -1px hsl(0 0% 100%);
    --shadow-md: -4px 4px 0 0 hsl(0 0% 100%), -4px 2px 4px -1px hsl(0 0% 100%);
    --shadow-lg: -4px 4px 0 0 hsl(0 0% 100%), -4px 4px 6px -1px hsl(0 0% 100%);
    --shadow-xl: -4px 4px 0 0 hsl(0 0% 100%), -4px 8px 10px -1px hsl(0 0% 100%);
    --shadow-2xl: -4px 4px 0 0 hsl(0 0% 100%);
}

[data-theme="kawi-green"] body {
    letter-spacing: 0.05em;
}

/* Clo.nz-Theme (tweakcn, Dark-Variante): Slate-Dunkelblau,
   Off-White-Primary, orangener Focus-Ring */
[data-theme="clonz"] {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --radius: 0.5rem;
    --background: oklch(0.2184 0.0079 274.5602);
    --foreground: oklch(0.9596 0.0131 82.4019);
    --card: oklch(0.2614 0.0094 276.7359);
    --card-foreground: oklch(0.9596 0.0131 82.4019);
    --popover: oklch(0.2614 0.0094 276.7359);
    --popover-foreground: oklch(0.9596 0.0131 82.4019);
    --primary: oklch(0.9596 0.0131 82.4019);
    --primary-foreground: oklch(0.2184 0.0079 274.5602);
    --secondary: oklch(0.3225 0.0205 73.1712);
    --secondary-foreground: oklch(0.9596 0.0131 82.4019);
    --muted: oklch(0.3022 0.0091 276.8278);
    --muted-foreground: oklch(0.7333 0.0115 280.4017);
    --accent: oklch(0.3022 0.0091 276.8278);
    --accent-foreground: oklch(0.9596 0.0131 82.4019);
    --destructive: oklch(0.5231 0.1583 27.6707);
    --border: oklch(0.3022 0.0091 276.8278);
    --input: oklch(0.3022 0.0091 276.8278);
    --ring: oklch(0.6711 0.1394 48.3137);
    --chart-1: oklch(0.9596 0.0131 82.4019);
    --chart-2: oklch(0.6711 0.1394 48.3137);
    --chart-3: oklch(0.484 0.0665 184.1633);
    --chart-4: oklch(0.5194 0.0174 277.5749);
    --chart-5: oklch(0.7333 0.0115 280.4017);
    --sidebar: oklch(0.2184 0.0079 274.5602);
    --sidebar-foreground: oklch(0.9596 0.0131 82.4019);
    --sidebar-primary: oklch(0.3022 0.0091 276.8278);
    --sidebar-primary-foreground: oklch(0.9596 0.0131 82.4019);
    --sidebar-accent: oklch(0.3022 0.0091 276.8278);
    --sidebar-accent-foreground: oklch(0.9596 0.0131 82.4019);
    --sidebar-border: oklch(0.3022 0.0091 276.8278);
    --sidebar-ring: oklch(0.6711 0.1394 48.3137);
}

/* Clawmorphism-Theme (tweakcn, Dark-Variante): neutrales Grau,
   markante 6px-Offset-Schatten */
[data-theme="clawmorphism"] {
    --font-sans: 'Inter', sans-serif;
    --font-heading: 'Inter', sans-serif;
    --radius: 0.575rem;
    --background: oklch(0.2972 0 0);
    --foreground: oklch(0.7826 0 0);
    --card: oklch(0.325 0 0);
    --card-foreground: oklch(0.7826 0 0);
    --popover: oklch(0.2603 0 0);
    --popover-foreground: oklch(0.931 0 0);
    --primary: oklch(0.8822 0 0);
    --primary-foreground: oklch(0.2435 0 0);
    --secondary: oklch(0.3092 0 0);
    --secondary-foreground: oklch(0.937 0 0);
    --muted: oklch(0.2435 0 0);
    --muted-foreground: oklch(0.6993 0 0);
    --accent: oklch(0.3329 0 0);
    --accent-foreground: oklch(0.9672 0 0);
    --destructive: oklch(0.6398 0.0838 195.2629);
    --border: oklch(0.36 0 0);
    --input: oklch(0.3753 0 0);
    --ring: oklch(0.2603 0 0);
    --chart-1: oklch(0.9249 0 0);
    --chart-2: oklch(0.7921 0 0);
    --chart-3: oklch(0.66 0 0);
    --chart-4: oklch(0.5208 0 0);
    --chart-5: oklch(0.4017 0 0);
    --sidebar: oklch(0.2435 0 0);
    --sidebar-foreground: oklch(0.931 0 0);
    --sidebar-primary: oklch(0.8822 0 0);
    --sidebar-primary-foreground: oklch(0.2435 0 0);
    --sidebar-accent: oklch(0.2809 0 0);
    --sidebar-accent-foreground: oklch(0.931 0 0);
    --sidebar-border: oklch(0.3171 0 0);
    --sidebar-ring: oklch(0.6401 0 0);
    --shadow-2xs: 6px 6px 16px 0 hsl(0 0% 8% / 0.38);
    --shadow-xs: 6px 6px 16px 0 hsl(0 0% 8% / 0.38);
    --shadow-sm: 6px 6px 16px 0 hsl(0 0% 8% / 0.76), 6px 1px 2px -1px hsl(0 0% 8% / 0.76);
    --shadow: 6px 6px 16px 0 hsl(0 0% 8% / 0.76), 6px 1px 2px -1px hsl(0 0% 8% / 0.76);
    --shadow-md: 6px 6px 16px 0 hsl(0 0% 8% / 0.76), 6px 2px 4px -1px hsl(0 0% 8% / 0.76);
    --shadow-lg: 6px 6px 16px 0 hsl(0 0% 8% / 0.76), 6px 4px 6px -1px hsl(0 0% 8% / 0.76);
    --shadow-xl: 6px 6px 16px 0 hsl(0 0% 8% / 0.76), 6px 8px 10px -1px hsl(0 0% 8% / 0.76);
    --shadow-2xl: 6px 6px 16px 0 hsl(0 0% 8%);
}

/* Realmorphism-Theme (tweakcn, Dark-Variante): dunkles Teal/Forest,
   harte dunkelgrüne Offset-Schatten */
[data-theme="realmorphism"] {
    --font-sans: 'Inter', sans-serif;
    --font-heading: 'Inter', sans-serif;
    --radius: 0.5rem;
    --background: oklch(0.1276 0.0035 245.8087);
    --foreground: oklch(0.9457 0.0091 161.3462);
    --card: oklch(0.1712 0.0039 229.0605);
    --card-foreground: oklch(0.9457 0.0091 161.3462);
    --popover: oklch(0.1712 0.0039 229.0605);
    --popover-foreground: oklch(0.9457 0.0091 161.3462);
    --primary: oklch(0.4794 0.075 168.9054);
    --primary-foreground: oklch(0.9457 0.0091 161.3462);
    --secondary: oklch(0.2201 0.0095 159.2095);
    --secondary-foreground: oklch(0.9457 0.0091 161.3462);
    --muted: oklch(0.2201 0.0095 159.2095);
    --muted-foreground: oklch(0.7341 0.0188 169.8711);
    --accent: oklch(0.5955 0.0953 168.0699);
    --accent-foreground: oklch(0.9457 0.0091 161.3462);
    --destructive: oklch(0.4041 0.112 23.5585);
    --border: oklch(0.317 0.0173 165.969);
    --input: oklch(0.2201 0.0095 159.2095);
    --ring: oklch(0.5955 0.0953 168.0699);
    --chart-1: oklch(0.4794 0.075 168.9054);
    --chart-2: oklch(0.5337 0.0845 74.0079);
    --chart-3: oklch(0.9068 0.1567 156.0616);
    --chart-4: oklch(0.7341 0.0188 169.8711);
    --chart-5: oklch(0.879 0.1534 91.6054);
    --sidebar: oklch(0.1276 0.0035 245.8087);
    --sidebar-foreground: oklch(0.9457 0.0091 161.3462);
    --sidebar-primary: oklch(0.4794 0.075 168.9054);
    --sidebar-primary-foreground: oklch(0.9457 0.0091 161.3462);
    --sidebar-accent: oklch(0.2201 0.0095 159.2095);
    --sidebar-accent-foreground: oklch(0.9457 0.0091 161.3462);
    --sidebar-border: oklch(0.317 0.0173 165.969);
    --sidebar-ring: oklch(0.5955 0.0953 168.0699);
    --shadow-2xs: 2px 2px 0 1px hsl(160.6 43.6% 29.2% / 0.5);
    --shadow-xs: 2px 2px 0 1px hsl(160.6 43.6% 29.2% / 0.5);
    --shadow-sm: 2px 2px 0 1px hsl(160.6 43.6% 29.2%), 2px 1px 2px 0 hsl(160.6 43.6% 29.2%);
    --shadow: 2px 2px 0 1px hsl(160.6 43.6% 29.2%), 2px 1px 2px 0 hsl(160.6 43.6% 29.2%);
    --shadow-md: 2px 2px 0 1px hsl(160.6 43.6% 29.2%), 2px 2px 4px 0 hsl(160.6 43.6% 29.2%);
    --shadow-lg: 2px 2px 0 1px hsl(160.6 43.6% 29.2%), 2px 4px 6px 0 hsl(160.6 43.6% 29.2%);
    --shadow-xl: 2px 2px 0 1px hsl(160.6 43.6% 29.2%), 2px 8px 10px 0 hsl(160.6 43.6% 29.2%);
    --shadow-2xl: 2px 2px 0 1px hsl(160.6 43.6% 29.2%);
}

/* Amber-Theme (tweakcn „my amber theme", Dark-Variante):
   Amber-Phosphor auf Schwarz, eckig, Amber-Glow, Retro-Font Workbench */
[data-theme="amber"] {
    --font-sans: 'Workbench', ui-monospace, monospace;
    --font-heading: 'Workbench', ui-monospace, monospace;
    --radius: 0rem;
    --background: oklch(0 0 0);
    --foreground: oklch(0.8403 0.1724 84.0757);
    --card: oklch(0.1149 0 0);
    --card-foreground: oklch(0.8403 0.1724 84.0757);
    --popover: oklch(0.1149 0 0);
    --popover-foreground: oklch(0.8403 0.1724 84.0757);
    --primary: oklch(0.8403 0.1724 84.0757);
    --primary-foreground: oklch(0 0 0);
    --secondary: oklch(0.266 0.055 80.8676);
    --secondary-foreground: oklch(0.8403 0.1724 84.0757);
    --muted: oklch(0.1845 0.0378 85.8185);
    --muted-foreground: oklch(0.5155 0.107 79.2295);
    --accent: oklch(0.8403 0.1724 84.0757);
    --accent-foreground: oklch(0 0 0);
    --destructive: oklch(0.2428 0.0996 29.2339);
    --border: oklch(0.8403 0.1724 84.0757);
    --input: oklch(0.8403 0.1724 84.0757);
    --ring: oklch(0.8403 0.1724 84.0757);
    --chart-1: oklch(0.8403 0.1724 84.0757);
    --chart-2: oklch(0.7773 0.1595 84.1047);
    --chart-3: oklch(0.7119 0.146 84.6103);
    --chart-4: oklch(0.6462 0.1325 84.7159);
    --chart-5: oklch(0.5775 0.1183 85.4662);
    --sidebar: oklch(0 0 0);
    --sidebar-foreground: oklch(0.8403 0.1724 84.0757);
    --sidebar-primary: oklch(0.8403 0.1724 84.0757);
    --sidebar-primary-foreground: oklch(0 0 0);
    --sidebar-accent: oklch(0.266 0.055 80.8676);
    --sidebar-accent-foreground: oklch(0.8403 0.1724 84.0757);
    --sidebar-border: oklch(0.8403 0.1724 84.0757);
    --sidebar-ring: oklch(0.8403 0.1724 84.0757);
    --shadow-2xs: 0 0 4px 0 hsl(45 100% 50% / 0.1);
    --shadow-xs: 0 0 4px 0 hsl(45 100% 50% / 0.1);
    --shadow-sm: 0 0 4px 0 hsl(45 100% 50% / 0.2), 0 1px 2px -1px hsl(45 100% 50% / 0.2);
    --shadow: 0 0 4px 0 hsl(45 100% 50% / 0.2), 0 1px 2px -1px hsl(45 100% 50% / 0.2);
    --shadow-md: 0 0 4px 0 hsl(45 100% 50% / 0.2), 0 2px 4px -1px hsl(45 100% 50% / 0.2);
    --shadow-lg: 0 0 4px 0 hsl(45 100% 50% / 0.2), 0 4px 6px -1px hsl(45 100% 50% / 0.2);
    --shadow-xl: 0 0 4px 0 hsl(45 100% 50% / 0.2), 0 8px 10px -1px hsl(45 100% 50% / 0.2);
    --shadow-2xl: 0 0 4px 0 hsl(45 100% 50% / 0.5);
}

[data-theme="amber"] body {
    letter-spacing: 0.05em;
}

[data-theme="sunny-sprout"] {
    color-scheme: dark;
    --font-sans: 'Instrument Sans', 'Inter', sans-serif;
    --font-heading: 'Instrument Sans', 'Inter', sans-serif;
    --font-serif: 'Source Serif Pro', serif;
    --font-mono: 'JetBrains Mono', monospace;
    --radius: 0.75rem;
    --background: #2D2F28;
    --foreground: #EEDF86;
    --card: #373A31;
    --card-foreground: #EEDF86;
    --popover: #2D2F28;
    --popover-foreground: #EEDF86;
    --primary: #C7CD88;
    --primary-foreground: #2D2F28;
    --secondary: #969C87;
    --secondary-foreground: #FDFBF7;
    --muted: #3F4238;
    --muted-foreground: #92886D;
    --accent: #E7A552;
    --accent-foreground: #2D2F28;
    --destructive: #92886D;
    --destructive-foreground: #EEDF86;
    --border: #4C5141;
    --input: #3F4238;
    --ring: #C7CD88;
    --chart-1: #C7CD88;
    --chart-2: #969C87;
    --chart-3: #E7A552;
    --chart-4: #EEDF86;
    --chart-5: #92886D;
    --sidebar: #242620;
    --sidebar-foreground: #C7CD88;
    --sidebar-primary: #C7CD88;
    --sidebar-primary-foreground: #2D2F28;
    --sidebar-accent: #969C87;
    --sidebar-accent-foreground: #FDFBF7;
    --sidebar-border: #3F4238;
    --sidebar-ring: #C7CD88;
    --shadow-color: #000000;
    --shadow-opacity: 0.4;
    --shadow-blur: 12px;
    --shadow-spread: 0px;
    --shadow-offset-x: 0px;
    --shadow-offset-y: 6px;
    --shadow-2xs: 0px 6px 12px 0px rgb(0 0 0 / 0.2);
    --shadow-xs: 0px 6px 12px 0px rgb(0 0 0 / 0.2);
    --shadow-sm: 0px 6px 12px 0px rgb(0 0 0 / 0.4), 0px 1px 2px -1px rgb(0 0 0 / 0.4);
    --shadow: 0px 6px 12px 0px rgb(0 0 0 / 0.4), 0px 1px 2px -1px rgb(0 0 0 / 0.4);
    --shadow-md: 0px 6px 12px 0px rgb(0 0 0 / 0.4), 0px 2px 4px -1px rgb(0 0 0 / 0.4);
    --shadow-lg: 0px 6px 12px 0px rgb(0 0 0 / 0.4), 0px 4px 6px -1px rgb(0 0 0 / 0.4);
    --shadow-xl: 0px 6px 12px 0px rgb(0 0 0 / 0.4), 0px 8px 10px -1px rgb(0 0 0 / 0.4);
    --shadow-2xl: 0px 6px 12px 0px rgb(0 0 0 / 1);
    --letter-spacing: 0.01em;
    --spacing: 0.25rem;
}

[data-theme="sunny-sprout"] body {
    letter-spacing: var(--letter-spacing);
}

/* Spotify-Theme (tweakcn „Spotify", Dark-Variante):
   sehr dunkles Graugrün, Spotify-Grün als Primary, dezente Akzente */
[data-theme="spotify"] {
    color-scheme: dark;
    --font-sans: 'Segoe UI', 'Helvetica Neue', Helvetica, 'Lucida Grande', Arial, Ubuntu, Cantarell, 'Fira Sans', sans-serif;
    --font-heading: 'Segoe UI', 'Helvetica Neue', Helvetica, 'Lucida Grande', Arial, Ubuntu, Cantarell, 'Fira Sans', sans-serif;
    --font-serif: Georgia, serif;
    --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --radius: 0.75rem;
    --background: oklch(0.1606 0.0053 145.3237);
    --foreground: oklch(0.9500 0.0034 145.5487);
    --card: oklch(0.2090 0.0074 145.3034);
    --card-foreground: oklch(0.9500 0.0034 145.5487);
    --popover: oklch(0.2392 0.0072 145.3463);
    --popover-foreground: oklch(0.9500 0.0034 145.5487);
    --primary: oklch(0.7892 0.1803 148.7810);
    --primary-foreground: oklch(0.1613 0.0088 4.6340);
    --secondary: oklch(0.2509 0.0081 153.3184);
    --secondary-foreground: oklch(0.9004 0.0103 145.4890);
    --muted: oklch(0.2297 0.0083 153.2517);
    --muted-foreground: oklch(0.6801 0.0199 150.4135);
    --accent: oklch(0.2816 0.0763 148.8490);
    --accent-foreground: oklch(0.8494 0.0990 148.7724);
    --destructive: oklch(0.6789 0.2096 21.9475);
    --destructive-foreground: oklch(1.0000 0 0);
    --border: oklch(0.2988 0.0100 151.4948);
    --input: oklch(0.2988 0.0100 151.4948);
    --ring: oklch(0.7892 0.1803 148.7810);
    --chart-1: oklch(0.7892 0.1803 148.7810);
    --chart-2: oklch(0.8500 0.1550 173.9924);
    --chart-3: oklch(0.8790 0.1436 123.7404);
    --chart-4: oklch(0.6899 0.1121 198.6311);
    --chart-5: oklch(0.9010 0.1081 99.0016);
    --sidebar: oklch(0.1902 0.0086 153.0805);
    --sidebar-foreground: oklch(0.9500 0.0034 145.5487);
    --sidebar-primary: oklch(0.7892 0.1803 148.7810);
    --sidebar-primary-foreground: oklch(0.1613 0.0088 4.6340);
    --sidebar-accent: oklch(0.2816 0.0763 148.8490);
    --sidebar-accent-foreground: oklch(0.8494 0.0990 148.7724);
    --sidebar-border: oklch(0.2988 0.0100 151.4948);
    --sidebar-ring: oklch(0.7892 0.1803 148.7810);
    --shadow-color: #000000;
    --shadow-opacity: 0.35;
    --shadow-blur: 16px;
    --shadow-spread: 0px;
    --shadow-offset-x: 0px;
    --shadow-offset-y: 4px;
    --shadow-2xs: 0px 4px 16px 0px hsl(0 0% 0% / 0.17);
    --shadow-xs: 0px 4px 16px 0px hsl(0 0% 0% / 0.17);
    --shadow-sm: 0px 4px 16px 0px hsl(0 0% 0% / 0.35), 0px 1px 2px -1px hsl(0 0% 0% / 0.35);
    --shadow: 0px 4px 16px 0px hsl(0 0% 0% / 0.35), 0px 1px 2px -1px hsl(0 0% 0% / 0.35);
    --shadow-md: 0px 4px 16px 0px hsl(0 0% 0% / 0.35), 0px 2px 4px -1px hsl(0 0% 0% / 0.35);
    --shadow-lg: 0px 4px 16px 0px hsl(0 0% 0% / 0.35), 0px 4px 6px -1px hsl(0 0% 0% / 0.35);
    --shadow-xl: 0px 4px 16px 0px hsl(0 0% 0% / 0.35), 0px 8px 10px -1px hsl(0 0% 0% / 0.35);
    --shadow-2xl: 0px 4px 16px 0px hsl(0 0% 0% / 0.88);
    --letter-spacing: 0em;
    --tracking-normal: 0em;
    --spacing: 0.25rem;
}

[data-theme="spotify"] body {
    letter-spacing: var(--letter-spacing);
}

/* Nordic Theme (tweakcn, Dark-Variante):
   kühles Blaugrau mit ruhigen, kontrastarmen Akzenten */
[data-theme="nordic"] {
    color-scheme: dark;
    --font-sans: 'Inter', sans-serif;
    --font-heading: 'Inter', sans-serif;
    --font-serif: 'Source Serif 4', serif;
    --font-mono: 'JetBrains Mono', monospace;
    --radius: 0.6rem;
    --background: oklch(0.2890 0.0214 265.8475);
    --foreground: oklch(0.8993 0.0164 262.7493);
    --card: oklch(0.3244 0.0229 264.1820);
    --card-foreground: oklch(0.8993 0.0164 262.7493);
    --popover: oklch(0.2603 0.0179 266.2766);
    --popover-foreground: oklch(0.8993 0.0164 262.7493);
    --primary: oklch(0.4157 0.0324 264.1312);
    --primary-foreground: oklch(0.8993 0.0164 262.7493);
    --secondary: oklch(0.4157 0.0324 264.1312);
    --secondary-foreground: oklch(0.8993 0.0164 262.7493);
    --muted: oklch(0.3555 0.0299 264.0846);
    --muted-foreground: oklch(0.7008 0.0301 263.3734);
    --accent: oklch(0.3555 0.0299 264.0846);
    --accent-foreground: oklch(0.8993 0.0164 262.7493);
    --destructive: oklch(0.6061 0.1206 15.3419);
    --destructive-foreground: oklch(0.8993 0.0164 262.7493);
    --border: oklch(0.3593 0.0223 264.2405);
    --input: oklch(0.3244 0.0229 264.1820);
    --ring: oklch(0.4631 0.0209 264.3476);
    --chart-1: oklch(0.8549 0.0892 84.0933);
    --chart-2: oklch(0.7683 0.0749 131.0631);
    --chart-3: oklch(0.6061 0.1206 15.3419);
    --chart-4: oklch(0.6929 0.0963 38.2407);
    --chart-5: oklch(0.5944 0.0772 254.0278);
    --sidebar: oklch(0.2603 0.0179 266.2766);
    --sidebar-foreground: oklch(0.8993 0.0164 262.7493);
    --sidebar-primary: oklch(0.3555 0.0299 264.0846);
    --sidebar-primary-foreground: oklch(0.8993 0.0164 262.7493);
    --sidebar-accent: oklch(0.3555 0.0299 264.0846);
    --sidebar-accent-foreground: oklch(0.8993 0.0164 262.7493);
    --sidebar-border: oklch(0.3555 0.0299 264.0846);
    --sidebar-ring: oklch(0.3244 0.0229 264.1820);
    --shadow-color: oklch(0 0 0);
    --shadow-opacity: 0.1;
    --shadow-blur: 3px;
    --shadow-spread: 0px;
    --shadow-offset-x: 0;
    --shadow-offset-y: 1px;
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
    --letter-spacing: 0em;
    --tracking-normal: 0em;
    --spacing: 0.25rem;
}

[data-theme="nordic"] body {
    letter-spacing: var(--letter-spacing);
}

/* SS-Theme (tweakcn „ss", Dark-Variante):
   neutrales Schwarz/Grau ohne Farbakzente */
[data-theme="ss"] {
    color-scheme: dark;
    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-heading: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --radius: 0.625rem;
    --background: oklch(0.1450 0 0);
    --foreground: oklch(0.9850 0 0);
    --card: oklch(0.2050 0 0);
    --card-foreground: oklch(0.9850 0 0);
    --popover: oklch(0.2690 0 0);
    --popover-foreground: oklch(0.9850 0 0);
    --primary: oklch(0.9220 0 0);
    --primary-foreground: oklch(0.2050 0 0);
    --secondary: oklch(0.2690 0 0);
    --secondary-foreground: oklch(0.9850 0 0);
    --muted: oklch(0.2690 0 0);
    --muted-foreground: oklch(0.7080 0 0);
    --accent: oklch(0.3710 0 0);
    --accent-foreground: oklch(0.9850 0 0);
    --destructive: oklch(0.7040 0.1910 22.2160);
    --destructive-foreground: oklch(0.9850 0 0);
    --border: oklch(0.2750 0 0);
    --input: oklch(0.3250 0 0);
    --ring: oklch(0.5560 0 0);
    --chart-1: oklch(0.8100 0.1000 252);
    --chart-2: oklch(0.6200 0.1900 260);
    --chart-3: oklch(0.5500 0.2200 263);
    --chart-4: oklch(0.4900 0.2200 264);
    --chart-5: oklch(0.4200 0.1800 266);
    --sidebar: oklch(0.2050 0 0);
    --sidebar-foreground: oklch(0.9850 0 0);
    --sidebar-primary: oklch(0.4880 0.2430 264.3760);
    --sidebar-primary-foreground: oklch(0.9850 0 0);
    --sidebar-accent: oklch(0.2690 0 0);
    --sidebar-accent-foreground: oklch(0.9850 0 0);
    --sidebar-border: oklch(0.2750 0 0);
    --sidebar-ring: oklch(0.4390 0 0);
    --shadow-color: oklch(0 0 0);
    --shadow-opacity: 0.1;
    --shadow-blur: 3px;
    --shadow-spread: 0px;
    --shadow-offset-x: 0;
    --shadow-offset-y: 1px;
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
    --letter-spacing: 0em;
    --tracking-normal: 0em;
    --spacing: 0.25rem;
}

[data-theme="ss"] body {
    letter-spacing: var(--letter-spacing);
}

/* Amethyst-Haze-Theme (tweakcn, Dark-Variante):
   dunkles Violett mit lavendelfarbener Primary und rosé Akzenten */
[data-theme="amethyst-haze"] {
    color-scheme: dark;
    --font-sans: 'Geist', sans-serif;
    --font-heading: 'Geist', sans-serif;
    --font-serif: 'Lora', Georgia, serif;
    --font-mono: 'Fira Code', 'Courier New', monospace;
    --radius: 0.5rem;
    --background: #1a1823;
    --foreground: #e0ddef;
    --card: #232030;
    --card-foreground: #e0ddef;
    --popover: #232030;
    --popover-foreground: #e0ddef;
    --primary: #a995c9;
    --primary-foreground: #1a1823;
    --secondary: #5a5370;
    --secondary-foreground: #e0ddef;
    --muted: #242031;
    --muted-foreground: #a09aad;
    --accent: #372e3f;
    --accent-foreground: #f2b8c6;
    --destructive: #e57373;
    --destructive-foreground: #1a1823;
    --border: #302c40;
    --input: #413d57;
    --ring: #655480;
    --chart-1: #a995c9;
    --chart-2: #f2b8c6;
    --chart-3: #77b8a1;
    --chart-4: #f0c88d;
    --chart-5: #a0bbe3;
    --sidebar: #16141e;
    --sidebar-foreground: #e0ddef;
    --sidebar-primary: #a995c9;
    --sidebar-primary-foreground: #1a1823;
    --sidebar-accent: #372e3f;
    --sidebar-accent-foreground: #f2b8c6;
    --sidebar-border: #2a273a;
    --sidebar-ring: #a995c9;
    --shadow-color: hsl(0 0% 0%);
    --shadow-opacity: 0.06;
    --shadow-blur: 5px;
    --shadow-spread: 1px;
    --shadow-offset-x: 1px;
    --shadow-offset-y: 2px;
    --shadow-2xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
    --shadow-xs: 1px 2px 5px 1px hsl(0 0% 0% / 0.03);
    --shadow-sm: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
    --shadow: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06);
    --shadow-md: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 2px 4px 0px hsl(0 0% 0% / 0.06);
    --shadow-lg: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 4px 6px 0px hsl(0 0% 0% / 0.06);
    --shadow-xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 8px 10px 0px hsl(0 0% 0% / 0.06);
    --shadow-2xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.15);
    --letter-spacing: 0em;
    --tracking-normal: 0em;
    --spacing: 0.25rem;
}

[data-theme="amethyst-haze"] body {
    letter-spacing: var(--letter-spacing);
}

/* Deep-Wine-Theme (tweakcn „Deep Wine (Final)", Dark-Variante):
   dunkles Blaugrau mit weinroter Primary */
[data-theme="deep-wine"] {
    color-scheme: dark;
    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-heading: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --radius: 0.5rem;
    --background: oklch(0.1608 0.0053 219.8085);
    --foreground: oklch(0.9011 0.0051 228.8246);
    --card: oklch(0.2198 0.0060 236.8407);
    --card-foreground: oklch(0.9011 0.0051 228.8246);
    --popover: oklch(0.2198 0.0060 236.8407);
    --popover-foreground: oklch(0.9011 0.0051 228.8246);
    --primary: oklch(0.5158 0.1252 6.4511);
    --primary-foreground: oklch(0.9851 0 0);
    --secondary: oklch(0.2198 0.0060 236.8407);
    --secondary-foreground: oklch(0.9011 0.0051 228.8246);
    --muted: oklch(0.1989 0.0051 248.0841);
    --muted-foreground: oklch(0.5810 0.0047 236.5524);
    --accent: oklch(0.2412 0.0059 236.7944);
    --accent-foreground: oklch(0.9011 0.0051 228.8246);
    --destructive: oklch(0.5010 0.2031 25.0094);
    --destructive-foreground: oklch(0.9791 0 0);
    --border: oklch(0.2791 0.0070 248.0795);
    --input: oklch(0.2585 0.0071 248.1047);
    --ring: oklch(0.5158 0.1252 6.4511);
    --chart-1: oklch(0.5158 0.1252 6.4511);
    --chart-2: oklch(0.6503 0.1704 144.9078);
    --chart-3: oklch(0.7195 0.1780 55.0907);
    --chart-4: oklch(0.6210 0.1998 259.8901);
    --chart-5: oklch(0.6201 0.1591 319.7924);
    --sidebar: oklch(0.1320 0.0049 226.3894);
    --sidebar-foreground: oklch(0.9011 0.0051 228.8246);
    --sidebar-primary: oklch(0.5158 0.1252 6.4511);
    --sidebar-primary-foreground: oklch(0.9851 0 0);
    --sidebar-accent: oklch(0.1989 0.0051 248.0841);
    --sidebar-accent-foreground: oklch(0.9011 0.0051 228.8246);
    --sidebar-border: oklch(0.2023 0.0061 236.8873);
    --sidebar-ring: oklch(0.5158 0.1252 6.4511);
    --shadow-color: oklch(0 0 0);
    --shadow-opacity: 0.1;
    --shadow-blur: 3px;
    --shadow-spread: 0px;
    --shadow-offset-x: 0;
    --shadow-offset-y: 1px;
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
    --letter-spacing: 0em;
    --tracking-normal: 0em;
    --spacing: 0.25rem;
}

[data-theme="deep-wine"] body {
    letter-spacing: var(--letter-spacing);
}

/* myClaude-Theme (tweakcn, Dark-Variante):
   warmes Dunkelgrau mit Claude-Orange und Serif-Schrift */
[data-theme="my-claude"] {
    color-scheme: dark;
    --font-sans: 'Newsreader', ui-serif, serif;
    --font-heading: 'Newsreader', ui-serif, serif;
    --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --radius: 1rem;
    --background: #151515;
    --foreground: #ecebe6;
    --card: #212121;
    --card-foreground: #ecebe6;
    --popover: #20201f;
    --popover-foreground: #ecebe6;
    --primary: #d97757;
    --primary-foreground: #ffffff;
    --secondary: #2d2d2d;
    --secondary-foreground: #ecebe6;
    --muted: #212121;
    --muted-foreground: #a3a29b;
    --accent: #343434;
    --accent-foreground: #ecebe6;
    --destructive: #ef4444;
    --destructive-foreground: #ffffff;
    --border: #292929;
    --input: #20201f;
    --ring: #d97757;
    --chart-1: #6da7ec;
    --chart-2: #9c87f5;
    --chart-3: #1a1915;
    --chart-4: #2f2b48;
    --chart-5: #b4552d;
    --sidebar: #151515;
    --sidebar-foreground: #ecebe6;
    --sidebar-primary: #d97757;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #343434;
    --sidebar-accent-foreground: #ecebe6;
    --sidebar-border: #292929;
    --sidebar-ring: #d97757;
    --shadow-color: oklch(0 0 0);
    --shadow-opacity: 0.1;
    --shadow-blur: 3px;
    --shadow-spread: 0px;
    --shadow-offset-x: 0;
    --shadow-offset-y: 1px;
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
    --letter-spacing: 0em;
    --tracking-normal: 0em;
    --spacing: 0.25rem;
}

[data-theme="my-claude"] body {
    letter-spacing: var(--letter-spacing);
}

/* Neo-Brutalismus: helle Pastell-Flächen, schwarze 2px-Borders,
   harte Offset-Schatten, keine Rundungen */

[data-theme="neo"] {
    --font-sans: 'Space Grotesk', sans-serif;
    --font-heading: 'Archivo Black', sans-serif;
    --radius: 0rem;
    --background: oklch(0.96 0.045 95);
    --foreground: oklch(0.22 0.02 60);
    --card: oklch(0.99 0.01 95);
    --card-foreground: oklch(0.22 0.02 60);
    --popover: oklch(0.99 0.01 95);
    --popover-foreground: oklch(0.22 0.02 60);
    --primary: oklch(0.86 0.17 95);
    --primary-foreground: oklch(0.22 0.02 60);
    --secondary: oklch(0.9 0.06 95);
    --secondary-foreground: oklch(0.22 0.02 60);
    --muted: oklch(0.92 0.04 95);
    --muted-foreground: oklch(0.45 0.03 60);
    --accent: oklch(0.75 0.19 350);
    --accent-foreground: oklch(0.22 0.02 60);
    --destructive: oklch(0.6 0.24 25);
    --border: oklch(0.22 0.02 60);
    --input: oklch(0.22 0.02 60);
    --ring: oklch(0.22 0.02 60);
    --sidebar: oklch(0.99 0.01 95);
    --sidebar-foreground: oklch(0.22 0.02 60);
    --sidebar-primary: oklch(0.86 0.17 95);
    --sidebar-primary-foreground: oklch(0.22 0.02 60);
    --sidebar-accent: oklch(0.9 0.06 95);
    --sidebar-accent-foreground: oklch(0.22 0.02 60);
    --sidebar-border: oklch(0.22 0.02 60);
    --sidebar-ring: oklch(0.22 0.02 60);
}

/* Brutalist-Regeln für alle neo-* Themes:
   2px schwarze Borders + harter 4px-Offset-Schatten auf Karten-Elementen,
   Buttons mit „reingedrückt"-Effekt beim Klick */
[data-theme^="neo"] .border,
[data-theme^="neo"] [data-slot="button"],
[data-theme^="neo"] .upload-tile-media {
    border-width: 2px;
    border-style: solid;
    border-color: var(--border);
    box-shadow: 4px 4px 0 0 var(--border);
}

[data-theme^="neo"] [data-slot="button"] {
    transition: translate 0.1s ease, box-shadow 0.1s ease;
}

[data-theme^="neo"] [data-slot="button"]:hover {
    translate: -1px -1px;
    box-shadow: 5px 5px 0 0 var(--border);
}

[data-theme^="neo"] [data-slot="button"]:active {
    translate: 2px 2px;
    box-shadow: 1px 1px 0 0 var(--border);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
    }
  body {
    @apply bg-background text-foreground;
    @apply font-sans;
    font-weight: 500;
    letter-spacing: -0.01em;
    }
  h1, h2, h3, h4 {
    letter-spacing: -0.02em;
    }
}
/* View Transition für Upload-Media:
   Das Bild morpht geschmeidig vom Thumbnail auf Thread-Größe.
   Old/New nutzen den synchronen Standard-Crossfade (kein Blinken),
   nur Dauer und Easing werden angeglichen. */
::view-transition-group(upload-media) {
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
::view-transition-old(upload-media),
::view-transition-new(upload-media) {
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/* Phosphor-Glyphen haben mehr Innenrand im ViewBox als Lucide —
   leicht hochskalieren, damit sie bei gleicher size-* gleich groß wirken. */
svg.iconify--ph {
  transform: scale(1.15);
}