@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;
}

/* 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);
}

[data-theme="neo-pink"] {
    --font-sans: 'Space Grotesk', sans-serif;
    --font-heading: 'Archivo Black', sans-serif;
    --radius: 0rem;
    --background: oklch(0.93 0.07 355);
    --foreground: oklch(0.25 0.05 340);
    --card: oklch(0.97 0.04 355);
    --card-foreground: oklch(0.25 0.05 340);
    --popover: oklch(0.97 0.04 355);
    --popover-foreground: oklch(0.25 0.05 340);
    --primary: oklch(0.85 0.15 200);
    --primary-foreground: oklch(0.25 0.05 340);
    --secondary: oklch(0.88 0.08 350);
    --secondary-foreground: oklch(0.25 0.05 340);
    --muted: oklch(0.9 0.06 355);
    --muted-foreground: oklch(0.48 0.07 340);
    --accent: oklch(0.88 0.17 95);
    --accent-foreground: oklch(0.25 0.05 340);
    --destructive: oklch(0.58 0.24 25);
    --border: oklch(0.25 0.05 340);
    --input: oklch(0.25 0.05 340);
    --ring: oklch(0.25 0.05 340);
    --sidebar: oklch(0.97 0.04 355);
    --sidebar-foreground: oklch(0.25 0.05 340);
    --sidebar-primary: oklch(0.85 0.15 200);
    --sidebar-primary-foreground: oklch(0.25 0.05 340);
    --sidebar-accent: oklch(0.88 0.08 350);
    --sidebar-accent-foreground: oklch(0.25 0.05 340);
    --sidebar-border: oklch(0.25 0.05 340);
    --sidebar-ring: oklch(0.25 0.05 340);
}

[data-theme="neo-mint"] {
    --font-sans: 'Space Grotesk', sans-serif;
    --font-heading: 'Archivo Black', sans-serif;
    --radius: 0rem;
    --background: oklch(0.93 0.08 160);
    --foreground: oklch(0.25 0.05 200);
    --card: oklch(0.97 0.04 160);
    --card-foreground: oklch(0.25 0.05 200);
    --popover: oklch(0.97 0.04 160);
    --popover-foreground: oklch(0.25 0.05 200);
    --primary: oklch(0.68 0.2 305);
    --primary-foreground: oklch(0.98 0.02 300);
    --secondary: oklch(0.88 0.08 165);
    --secondary-foreground: oklch(0.25 0.05 200);
    --muted: oklch(0.89 0.07 160);
    --muted-foreground: oklch(0.45 0.06 200);
    --accent: oklch(0.8 0.18 60);
    --accent-foreground: oklch(0.25 0.05 200);
    --destructive: oklch(0.58 0.24 25);
    --border: oklch(0.25 0.05 200);
    --input: oklch(0.25 0.05 200);
    --ring: oklch(0.25 0.05 200);
    --sidebar: oklch(0.97 0.04 160);
    --sidebar-foreground: oklch(0.25 0.05 200);
    --sidebar-primary: oklch(0.68 0.2 305);
    --sidebar-primary-foreground: oklch(0.98 0.02 300);
    --sidebar-accent: oklch(0.88 0.08 165);
    --sidebar-accent-foreground: oklch(0.25 0.05 200);
    --sidebar-border: oklch(0.25 0.05 200);
    --sidebar-ring: oklch(0.25 0.05 200);
}

/* 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);
}