/*
 * Lernwerk-KI — design tokens (vanilla port of the original Tailwind theme).
 * Four selectable themes are exposed as classes on <html>:
 *   .theme-navy  .theme-ocean  .theme-ember  .theme-forest
 */

:root,
.theme-navy {
  --radius: 0.5rem;
  --shade-1: oklch(0.233 0.067 266.6);
  --shade-2: oklch(0.346 0.074 256.0);
  --shade-3: oklch(0.528 0.096 248.8);
  --shade-4: oklch(0.944 0.01 252.8);
}

.theme-ocean {
  --shade-1: oklch(0.255 0.062 255.5);
  --shade-2: oklch(0.395 0.08 244.7);
  --shade-3: oklch(0.588 0.09 215.1);
  --shade-4: oklch(0.739 0.092 191.8);
}

.theme-ember {
  --shade-1: oklch(0.218 0 89.9);
  --shade-2: oklch(0.297 0 89.9);
  --shade-3: oklch(0.409 0 89.9);
  --shade-4: oklch(0.652 0.18 35.2);
}

.theme-forest {
  --shade-1: oklch(0.325 0.052 158.5);
  --shade-2: oklch(0.427 0.07 154.0);
  --shade-3: oklch(0.586 0.087 145.3);
  --shade-4: oklch(0.783 0.067 142.9);
}

:root {
  --background: color-mix(in oklab, var(--shade-1) 62%, oklch(0.11 0.02 265));
  --foreground: oklch(0.965 0.006 250);

  --surface: color-mix(in oklab, var(--shade-1) 78%, oklch(0.12 0.02 265));
  --surface-foreground: oklch(0.965 0.006 250);

  --card: color-mix(in oklab, var(--shade-1) 85%, oklch(0.14 0.02 265));
  --card-foreground: oklch(0.965 0.006 250);
  --popover: color-mix(in oklab, var(--shade-1) 90%, oklch(0.14 0.02 265));
  --popover-foreground: oklch(0.965 0.006 250);

  --primary: var(--shade-4);
  --primary-foreground: oklch(0.16 0.02 265);

  --secondary: color-mix(in oklab, var(--shade-2) 70%, oklch(0.18 0.02 265));
  --secondary-foreground: oklch(0.965 0.006 250);

  --muted: color-mix(in oklab, var(--shade-2) 45%, oklch(0.18 0.02 265));
  --muted-foreground: color-mix(in oklab, var(--shade-4) 60%, oklch(0.72 0.01 250));

  --accent: var(--shade-3);
  --accent-foreground: oklch(0.98 0.005 250);

  --destructive: oklch(0.62 0.22 25);
  --destructive-foreground: oklch(0.98 0.005 250);
  --success: oklch(0.7 0.16 155);
  --success-foreground: oklch(0.16 0.02 265);
  --warning: oklch(0.79 0.16 78);
  --warning-foreground: oklch(0.18 0.02 265);

  --border: color-mix(in oklab, var(--shade-3) 32%, transparent);
  --input: color-mix(in oklab, var(--shade-3) 28%, transparent);
  --ring: var(--shade-3);

  --chart-1: var(--shade-4);
  --chart-2: var(--shade-3);
  --chart-3: var(--shade-2);
  --chart-4: oklch(0.79 0.16 78);
  --chart-5: oklch(0.7 0.16 155);

  --sidebar: color-mix(in oklab, var(--shade-1) 88%, oklch(0.1 0.02 265));
  --sidebar-foreground: oklch(0.94 0.006 250);
  --sidebar-primary: var(--shade-4);
  --sidebar-primary-foreground: oklch(0.16 0.02 265);
  --sidebar-accent: color-mix(in oklab, var(--shade-2) 55%, transparent);
  --sidebar-accent-foreground: oklch(0.98 0.005 250);
  --sidebar-border: color-mix(in oklab, var(--shade-3) 26%, transparent);
  --sidebar-ring: var(--shade-3);

  --gradient-brand: linear-gradient(135deg, color-mix(in oklab, var(--shade-3) 90%, transparent), var(--shade-4));
  --gradient-surface: linear-gradient(160deg, color-mix(in oklab, var(--shade-2) 55%, transparent), transparent 60%);
  --shadow-elevated: 0 24px 60px -30px color-mix(in oklab, var(--shade-4) 55%, transparent);
  --shadow-glow: 0 0 0 1px color-mix(in oklab, var(--shade-4) 22%, transparent),
    0 18px 50px -24px color-mix(in oklab, var(--shade-4) 45%, transparent);

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

* {
  border-color: var(--border);
}

html {
  color-scheme: dark;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.bg-gradient-brand { background-image: var(--gradient-brand); }
.text-gradient-brand {
  background-image: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.shadow-elevated { box-shadow: var(--shadow-elevated); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.grid-safety {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--shade-3) 12%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--shade-3) 12%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Small helpers not worth a Tailwind class */
.font-display { font-family: var(--font-display); }
input::placeholder, textarea::placeholder { color: var(--muted-foreground); opacity: 1; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--shade-3) 40%, transparent); border-radius: 999px; }