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

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

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-heading: var(--font-geist-sans);
  --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);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

:root {
  /* Lavender, light. Surfaces stay near-neutral; the hue lives in the accent. */
  --background: oklch(0.99 0.002 290);
  --foreground: oklch(0.2 0.012 290);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2 0.012 290);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2 0.012 290);
  --primary: oklch(0.53 0.15 292);
  --primary-foreground: oklch(0.985 0.004 292);
  --secondary: oklch(0.965 0.005 290);
  --secondary-foreground: oklch(0.28 0.02 290);
  --muted: oklch(0.967 0.004 290);
  --muted-foreground: oklch(0.52 0.014 290);
  --accent: oklch(0.955 0.018 292);
  --accent-foreground: oklch(0.36 0.09 292);
  --destructive: oklch(0.577 0.215 27.325);
  --border: oklch(0.92 0.005 290);
  --input: oklch(0.9 0.006 290);
  --ring: oklch(0.53 0.15 292);
  --chart-1: oklch(0.53 0.15 292);
  --chart-2: oklch(0.65 0.13 250);
  --chart-3: oklch(0.66 0.14 340);
  --chart-4: oklch(0.72 0.11 200);
  --chart-5: oklch(0.72 0.12 70);
  --radius: 0.625rem;
  --sidebar: oklch(0.978 0.003 290);
  --sidebar-foreground: oklch(0.2 0.012 290);
  --sidebar-primary: oklch(0.53 0.15 292);
  --sidebar-primary-foreground: oklch(0.985 0.004 292);
  --sidebar-accent: oklch(0.955 0.018 292);
  --sidebar-accent-foreground: oklch(0.36 0.09 292);
  --sidebar-border: oklch(0.92 0.005 290);
  --sidebar-ring: oklch(0.53 0.15 292);
}

.dark {
  /* Lavender, dark. Vesper's recipe: near-black surfaces, a pastel accent with dark text on it. */
  --background: oklch(0.155 0.005 290);
  --foreground: oklch(0.96 0.004 290);
  --card: oklch(0.185 0.006 290);
  --card-foreground: oklch(0.96 0.004 290);
  --popover: oklch(0.19 0.006 290);
  --popover-foreground: oklch(0.96 0.004 290);
  --primary: oklch(0.8 0.1 295);
  --primary-foreground: oklch(0.2 0.04 295);
  --secondary: oklch(0.225 0.007 290);
  --secondary-foreground: oklch(0.93 0.005 290);
  --muted: oklch(0.21 0.006 290);
  --muted-foreground: oklch(0.7 0.012 290);
  --accent: oklch(0.25 0.025 295);
  --accent-foreground: oklch(0.88 0.07 295);
  --destructive: oklch(0.7 0.18 22);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 14%);
  --ring: oklch(0.8 0.1 295);
  --chart-1: oklch(0.8 0.1 295);
  --chart-2: oklch(0.78 0.1 250);
  --chart-3: oklch(0.78 0.11 340);
  --chart-4: oklch(0.8 0.09 200);
  --chart-5: oklch(0.82 0.1 70);
  --sidebar: oklch(0.14 0.005 290);
  --sidebar-foreground: oklch(0.96 0.004 290);
  --sidebar-primary: oklch(0.8 0.1 295);
  --sidebar-primary-foreground: oklch(0.2 0.04 295);
  --sidebar-accent: oklch(0.25 0.025 295);
  --sidebar-accent-foreground: oklch(0.88 0.07 295);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.8 0.1 295);
}

/* ---- extra app themes (next-themes sets these as <html> classes) ---- */

.vesper {
  --background: #101010;
  --foreground: #ffffff;
  --card: #161616;
  --card-foreground: #ffffff;
  --popover: #161616;
  --popover-foreground: #ffffff;
  --primary: #ffc799;
  --primary-foreground: #1a1206;
  --secondary: #1f1f1f;
  --secondary-foreground: #e8e6e3;
  --muted: #1c1c1c;
  --muted-foreground: #a8a29e;
  --accent: #26211b;
  --accent-foreground: #ffc799;
  --destructive: #f2555a;
  --border: #ffffff1f;
  --input: #ffffff26;
  --ring: #ffc799;
  --chart-1: #ffc799;
  --chart-2: #7dd3c0;
  --chart-3: #c4b5fd;
  --chart-4: #f0abfc;
  --chart-5: #94a3b8;
  --sidebar: #0c0c0c;
  --sidebar-foreground: #ffffff;
  --sidebar-primary: #ffc799;
  --sidebar-primary-foreground: #1a1206;
  --sidebar-accent: #26211b;
  --sidebar-accent-foreground: #ffc799;
  --sidebar-border: #ffffff1f;
  --sidebar-ring: #ffc799;
}

.dracula {
  --background: #282a36;
  --foreground: #f8f8f2;
  --card: #323442;
  --card-foreground: #f8f8f2;
  --popover: #323442;
  --popover-foreground: #f8f8f2;
  --primary: #bd93f9;
  --primary-foreground: #241b3a;
  --secondary: #44475a;
  --secondary-foreground: #f8f8f2;
  --muted: #343746;
  --muted-foreground: #b9bccf;
  --accent: #44475a;
  --accent-foreground: #f8f8f2;
  --destructive: #ff5555;
  --border: #ffffff1f;
  --input: #ffffff26;
  --ring: #bd93f9;
  --chart-1: #bd93f9;
  --chart-2: #50fa7b;
  --chart-3: #ff79c6;
  --chart-4: #8be9fd;
  --chart-5: #ffb86c;
  --sidebar: #21222c;
  --sidebar-foreground: #f8f8f2;
  --sidebar-primary: #bd93f9;
  --sidebar-primary-foreground: #241b3a;
  --sidebar-accent: #44475a;
  --sidebar-accent-foreground: #f8f8f2;
  --sidebar-border: #ffffff1f;
  --sidebar-ring: #bd93f9;
}

.tokyo-night {
  --background: #1a1b26;
  --foreground: #c0caf5;
  --card: #24283b;
  --card-foreground: #c0caf5;
  --popover: #24283b;
  --popover-foreground: #c0caf5;
  --primary: #7aa2f7;
  --primary-foreground: #111726;
  --secondary: #2f334d;
  --secondary-foreground: #c0caf5;
  --muted: #232433;
  --muted-foreground: #9aa0c3;
  --accent: #2f334d;
  --accent-foreground: #c0caf5;
  --destructive: #f7768e;
  --border: #ffffff1a;
  --input: #ffffff24;
  --ring: #7aa2f7;
  --chart-1: #7aa2f7;
  --chart-2: #9ece6a;
  --chart-3: #bb9af7;
  --chart-4: #7dcfff;
  --chart-5: #e0af68;
  --sidebar: #16161e;
  --sidebar-foreground: #c0caf5;
  --sidebar-primary: #7aa2f7;
  --sidebar-primary-foreground: #111726;
  --sidebar-accent: #2f334d;
  --sidebar-accent-foreground: #c0caf5;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #7aa2f7;
}

.catppuccin {
  --background: #1e1e2e;
  --foreground: #cdd6f4;
  --card: #313244;
  --card-foreground: #cdd6f4;
  --popover: #313244;
  --popover-foreground: #cdd6f4;
  --primary: #cba6f7;
  --primary-foreground: #241d34;
  --secondary: #45475a;
  --secondary-foreground: #cdd6f4;
  --muted: #292938;
  --muted-foreground: #a6adc8;
  --accent: #45475a;
  --accent-foreground: #cdd6f4;
  --destructive: #f38ba8;
  --border: #ffffff1a;
  --input: #ffffff24;
  --ring: #cba6f7;
  --chart-1: #cba6f7;
  --chart-2: #a6e3a1;
  --chart-3: #f5c2e7;
  --chart-4: #89dceb;
  --chart-5: #fab387;
  --sidebar: #181825;
  --sidebar-foreground: #cdd6f4;
  --sidebar-primary: #cba6f7;
  --sidebar-primary-foreground: #241d34;
  --sidebar-accent: #45475a;
  --sidebar-accent-foreground: #cdd6f4;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #cba6f7;
}

.nord {
  --background: #2e3440;
  --foreground: #eceff4;
  --card: #3b4252;
  --card-foreground: #eceff4;
  --popover: #3b4252;
  --popover-foreground: #eceff4;
  --primary: #88c0d0;
  --primary-foreground: #1d2b33;
  --secondary: #434c5e;
  --secondary-foreground: #eceff4;
  --muted: #353c4b;
  --muted-foreground: #b8c0d0;
  --accent: #434c5e;
  --accent-foreground: #eceff4;
  --destructive: #bf616a;
  --border: #ffffff1a;
  --input: #ffffff24;
  --ring: #88c0d0;
  --chart-1: #88c0d0;
  --chart-2: #a3be8c;
  --chart-3: #b48ead;
  --chart-4: #81a1c1;
  --chart-5: #ebcb8b;
  --sidebar: #242933;
  --sidebar-foreground: #eceff4;
  --sidebar-primary: #88c0d0;
  --sidebar-primary-foreground: #1d2b33;
  --sidebar-accent: #434c5e;
  --sidebar-accent-foreground: #eceff4;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #88c0d0;
}

.one-dark-pro {
  --background: #282c34;
  --foreground: #abb2bf;
  --card: #21252b;
  --card-foreground: #dde1e8;
  --popover: #21252b;
  --popover-foreground: #dde1e8;
  --primary: #61afef;
  --primary-foreground: #0f1c28;
  --secondary: #353b45;
  --secondary-foreground: #dde1e8;
  --muted: #2c313a;
  --muted-foreground: #8b93a5;
  --accent: #353b45;
  --accent-foreground: #dde1e8;
  --destructive: #e06c75;
  --border: #ffffff1a;
  --input: #ffffff24;
  --ring: #61afef;
  --chart-1: #61afef;
  --chart-2: #98c379;
  --chart-3: #c678dd;
  --chart-4: #56b6c2;
  --chart-5: #e5c07b;
  --sidebar: #21252b;
  --sidebar-foreground: #abb2bf;
  --sidebar-primary: #61afef;
  --sidebar-primary-foreground: #0f1c28;
  --sidebar-accent: #353b45;
  --sidebar-accent-foreground: #dde1e8;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #61afef;
}

.monokai {
  --background: #272822;
  --foreground: #f8f8f2;
  --card: #34352f;
  --card-foreground: #f8f8f2;
  --popover: #34352f;
  --popover-foreground: #f8f8f2;
  --primary: #a6e22e;
  --primary-foreground: #1c2407;
  --secondary: #49483e;
  --secondary-foreground: #f8f8f2;
  --muted: #33342d;
  --muted-foreground: #c2c0b5;
  --accent: #49483e;
  --accent-foreground: #f8f8f2;
  --destructive: #f92672;
  --border: #ffffff1f;
  --input: #ffffff26;
  --ring: #a6e22e;
  --chart-1: #a6e22e;
  --chart-2: #66d9ef;
  --chart-3: #fd971f;
  --chart-4: #ae81ff;
  --chart-5: #f92672;
  --sidebar: #1e1f1c;
  --sidebar-foreground: #f8f8f2;
  --sidebar-primary: #a6e22e;
  --sidebar-primary-foreground: #1c2407;
  --sidebar-accent: #49483e;
  --sidebar-accent-foreground: #f8f8f2;
  --sidebar-border: #ffffff1f;
  --sidebar-ring: #a6e22e;
}

.gruvbox {
  --background: #282828;
  --foreground: #ebdbb2;
  --card: #3c3836;
  --card-foreground: #ebdbb2;
  --popover: #3c3836;
  --popover-foreground: #ebdbb2;
  --primary: #fabd2f;
  --primary-foreground: #241a02;
  --secondary: #504945;
  --secondary-foreground: #ebdbb2;
  --muted: #32302f;
  --muted-foreground: #bdae93;
  --accent: #504945;
  --accent-foreground: #ebdbb2;
  --destructive: #fb4934;
  --border: #ffffff1a;
  --input: #ffffff24;
  --ring: #fabd2f;
  --chart-1: #fabd2f;
  --chart-2: #b8bb26;
  --chart-3: #d3869b;
  --chart-4: #83a598;
  --chart-5: #fe8019;
  --sidebar: #1d2021;
  --sidebar-foreground: #ebdbb2;
  --sidebar-primary: #fabd2f;
  --sidebar-primary-foreground: #241a02;
  --sidebar-accent: #504945;
  --sidebar-accent-foreground: #ebdbb2;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #fabd2f;
}

.github-dark {
  --background: #0d1117;
  --foreground: #e6edf3;
  --card: #161b22;
  --card-foreground: #e6edf3;
  --popover: #161b22;
  --popover-foreground: #e6edf3;
  --primary: #2f81f7;
  --primary-foreground: #ffffff;
  --secondary: #21262d;
  --secondary-foreground: #e6edf3;
  --muted: #151a22;
  --muted-foreground: #8d959f;
  --accent: #21262d;
  --accent-foreground: #e6edf3;
  --destructive: #f85149;
  --border: #ffffff1a;
  --input: #ffffff24;
  --ring: #2f81f7;
  --chart-1: #2f81f7;
  --chart-2: #3fb950;
  --chart-3: #d2a8ff;
  --chart-4: #39c5cf;
  --chart-5: #d29922;
  --sidebar: #010409;
  --sidebar-foreground: #e6edf3;
  --sidebar-primary: #2f81f7;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #21262d;
  --sidebar-accent-foreground: #e6edf3;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #2f81f7;
}

.rose-pine {
  --background: #232136;
  --foreground: #e0def4;
  --card: #2a273f;
  --card-foreground: #e0def4;
  --popover: #2a273f;
  --popover-foreground: #e0def4;
  --primary: #c4a7e7;
  --primary-foreground: #241d34;
  --secondary: #393552;
  --secondary-foreground: #e0def4;
  --muted: #282433;
  --muted-foreground: #9d9bb8;
  --accent: #393552;
  --accent-foreground: #e0def4;
  --destructive: #eb6f92;
  --border: #ffffff1a;
  --input: #ffffff24;
  --ring: #c4a7e7;
  --chart-1: #c4a7e7;
  --chart-2: #9ccfd8;
  --chart-3: #ebbcba;
  --chart-4: #f6c177;
  --chart-5: #31748f;
  --sidebar: #1f1d2e;
  --sidebar-foreground: #e0def4;
  --sidebar-primary: #c4a7e7;
  --sidebar-primary-foreground: #241d34;
  --sidebar-accent: #393552;
  --sidebar-accent-foreground: #e0def4;
  --sidebar-border: #ffffff1a;
  --sidebar-ring: #c4a7e7;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    @apply font-sans;
  }
}

[data-shiki] span {
  color: var(--shiki-light);
}

.dark [data-shiki] span {
  color: var(--shiki-dark);
}

.vesper [data-shiki] span {
  color: var(--shiki-vesper);
}

.dracula [data-shiki] span {
  color: var(--shiki-dracula);
}

.tokyo-night [data-shiki] span {
  color: var(--shiki-tokyo-night);
}

.catppuccin [data-shiki] span {
  color: var(--shiki-catppuccin);
}

.nord [data-shiki] span {
  color: var(--shiki-nord);
}

.one-dark-pro [data-shiki] span {
  color: var(--shiki-one-dark-pro);
}

.monokai [data-shiki] span {
  color: var(--shiki-monokai);
}

.gruvbox [data-shiki] span {
  color: var(--shiki-gruvbox);
}

.github-dark [data-shiki] span {
  color: var(--shiki-github-dark);
}

.rose-pine [data-shiki] span {
  color: var(--shiki-rose-pine);
}

.custom [data-shiki] span {
  color: var(--shiki-custom);
}