@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@fontsource-variable/geist";
@import "katex/dist/katex.min.css";

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

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --radius: 0.625rem;
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --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.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --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.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

:root[data-color-theme="catppuccin"] {
  --background: #eff1f5;
  --foreground: #4c4f69;
  --card: #e6e9ef;
  --card-foreground: #4c4f69;
  --popover: #e6e9ef;
  --popover-foreground: #4c4f69;
  --primary: #8839ef;
  --primary-foreground: #eff1f5;
  --secondary: #ccd0da;
  --secondary-foreground: #4c4f69;
  --muted: #e6e9ef;
  --muted-foreground: #6c6f85;
  --accent: #dce0e8;
  --accent-foreground: #4c4f69;
  --destructive: #d20f39;
  --border: #bcc0cc;
  --input: #bcc0cc;
  --ring: #8839ef;
  --chart-1: #8839ef;
  --chart-2: #1e66f5;
  --chart-3: #40a02b;
  --chart-4: #df8e1d;
  --chart-5: #d20f39;
  --sidebar: #e6e9ef;
  --sidebar-foreground: #4c4f69;
  --sidebar-primary: #8839ef;
  --sidebar-primary-foreground: #eff1f5;
  --sidebar-accent: #dce0e8;
  --sidebar-accent-foreground: #4c4f69;
  --sidebar-border: #bcc0cc;
  --sidebar-ring: #8839ef;
}

.dark[data-color-theme="catppuccin"] {
  --background: #1e1e2e;
  --foreground: #cdd6f4;
  --card: #181825;
  --card-foreground: #cdd6f4;
  --popover: #181825;
  --popover-foreground: #cdd6f4;
  --primary: #cba6f7;
  --primary-foreground: #11111b;
  --secondary: #313244;
  --secondary-foreground: #cdd6f4;
  --muted: #313244;
  --muted-foreground: #a6adc8;
  --accent: #45475a;
  --accent-foreground: #cdd6f4;
  --destructive: #f38ba8;
  --border: #45475a;
  --input: #45475a;
  --ring: #cba6f7;
  --chart-1: #cba6f7;
  --chart-2: #89b4fa;
  --chart-3: #a6e3a1;
  --chart-4: #f9e2af;
  --chart-5: #f38ba8;
  --sidebar: #181825;
  --sidebar-foreground: #cdd6f4;
  --sidebar-primary: #cba6f7;
  --sidebar-primary-foreground: #11111b;
  --sidebar-accent: #313244;
  --sidebar-accent-foreground: #cdd6f4;
  --sidebar-border: #45475a;
  --sidebar-ring: #cba6f7;
}

:root[data-color-theme="gruvbox"] {
  --background: #fbf1c7;
  --foreground: #282828;
  --card: #f2e5bc;
  --card-foreground: #282828;
  --popover: #f2e5bc;
  --popover-foreground: #282828;
  --primary: #458588;
  --primary-foreground: #fbf1c7;
  --secondary: #ebdbb2;
  --secondary-foreground: #282828;
  --muted: #ebdbb2;
  --muted-foreground: #7c6f64;
  --accent: #d5c4a1;
  --accent-foreground: #282828;
  --destructive: #cc241d;
  --border: #d5c4a1;
  --input: #d5c4a1;
  --ring: #d79921;
  --chart-1: #cc241d;
  --chart-2: #98971a;
  --chart-3: #d79921;
  --chart-4: #458588;
  --chart-5: #b16286;
  --sidebar: #f2e5bc;
  --sidebar-foreground: #282828;
  --sidebar-primary: #458588;
  --sidebar-primary-foreground: #fbf1c7;
  --sidebar-accent: #ebdbb2;
  --sidebar-accent-foreground: #282828;
  --sidebar-border: #d5c4a1;
  --sidebar-ring: #d79921;
}

.dark[data-color-theme="gruvbox"] {
  --background: #282828;
  --foreground: #fbf1c7;
  --card: #32302f;
  --card-foreground: #fbf1c7;
  --popover: #32302f;
  --popover-foreground: #fbf1c7;
  --primary: #fabd2f;
  --primary-foreground: #282828;
  --secondary: #3c3836;
  --secondary-foreground: #fbf1c7;
  --muted: #3c3836;
  --muted-foreground: #a89984;
  --accent: #504945;
  --accent-foreground: #fbf1c7;
  --destructive: #fb4934;
  --border: #504945;
  --input: #504945;
  --ring: #83a598;
  --chart-1: #fb4934;
  --chart-2: #b8bb26;
  --chart-3: #fabd2f;
  --chart-4: #83a598;
  --chart-5: #d3869b;
  --sidebar: #32302f;
  --sidebar-foreground: #fbf1c7;
  --sidebar-primary: #fabd2f;
  --sidebar-primary-foreground: #282828;
  --sidebar-accent: #3c3836;
  --sidebar-accent-foreground: #fbf1c7;
  --sidebar-border: #504945;
  --sidebar-ring: #83a598;
}

:root[data-color-theme="ayu"] {
  --background: #fafafa;
  --foreground: #5c6773;
  --card: #ffffff;
  --card-foreground: #5c6773;
  --popover: #ffffff;
  --popover-foreground: #5c6773;
  --primary: #ff6a00;
  --primary-foreground: #ffffff;
  --secondary: #f3f3f3;
  --secondary-foreground: #5c6773;
  --muted: #f3f3f3;
  --muted-foreground: #828c99;
  --accent: #f0eee4;
  --accent-foreground: #5c6773;
  --destructive: #ff3333;
  --border: #d9d8d7;
  --input: #d9d8d7;
  --ring: #ff6a00;
  --chart-1: #ff6a00;
  --chart-2: #36a3d9;
  --chart-3: #86b300;
  --chart-4: #a37acc;
  --chart-5: #f07178;
  --sidebar: #ffffff;
  --sidebar-foreground: #5c6773;
  --sidebar-primary: #ff6a00;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f0eee4;
  --sidebar-accent-foreground: #5c6773;
  --sidebar-border: #d9d8d7;
  --sidebar-ring: #ff6a00;
}

.dark[data-color-theme="ayu"] {
  --background: #0f1419;
  --foreground: #e6e1cf;
  --card: #14191f;
  --card-foreground: #e6e1cf;
  --popover: #14191f;
  --popover-foreground: #e6e1cf;
  --primary: #f29718;
  --primary-foreground: #0f1419;
  --secondary: #151a1e;
  --secondary-foreground: #e6e1cf;
  --muted: #151a1e;
  --muted-foreground: #5c6773;
  --accent: #253340;
  --accent-foreground: #e6e1cf;
  --destructive: #ff3333;
  --border: #2d3640;
  --input: #2d3640;
  --ring: #f29718;
  --chart-1: #f29718;
  --chart-2: #36a3d9;
  --chart-3: #b8cc52;
  --chart-4: #ff7733;
  --chart-5: #f07178;
  --sidebar: #14191f;
  --sidebar-foreground: #e6e1cf;
  --sidebar-primary: #f29718;
  --sidebar-primary-foreground: #0f1419;
  --sidebar-accent: #253340;
  --sidebar-accent-foreground: #e6e1cf;
  --sidebar-border: #2d3640;
  --sidebar-ring: #f29718;
}

:root[data-color-theme="everforest"] {
  --background: #fdf6e3;
  --foreground: #5c6a72;
  --card: #f4f0d9;
  --card-foreground: #5c6a72;
  --popover: #f4f0d9;
  --popover-foreground: #5c6a72;
  --primary: #8da101;
  --primary-foreground: #fdf6e3;
  --secondary: #efebd4;
  --secondary-foreground: #5c6a72;
  --muted: #efebd4;
  --muted-foreground: #829181;
  --accent: #e6e2cc;
  --accent-foreground: #5c6a72;
  --destructive: #f85552;
  --border: #e0dcc7;
  --input: #e0dcc7;
  --ring: #3a94c5;
  --chart-1: #f85552;
  --chart-2: #f57d26;
  --chart-3: #dfa000;
  --chart-4: #8da101;
  --chart-5: #3a94c5;
  --sidebar: #f4f0d9;
  --sidebar-foreground: #5c6a72;
  --sidebar-primary: #8da101;
  --sidebar-primary-foreground: #fdf6e3;
  --sidebar-accent: #efebd4;
  --sidebar-accent-foreground: #5c6a72;
  --sidebar-border: #e0dcc7;
  --sidebar-ring: #3a94c5;
}

.dark[data-color-theme="everforest"] {
  --background: #2d353b;
  --foreground: #d3c6aa;
  --card: #343f44;
  --card-foreground: #d3c6aa;
  --popover: #343f44;
  --popover-foreground: #d3c6aa;
  --primary: #a7c080;
  --primary-foreground: #232a2e;
  --secondary: #3d484d;
  --secondary-foreground: #d3c6aa;
  --muted: #3d484d;
  --muted-foreground: #9da9a0;
  --accent: #475258;
  --accent-foreground: #d3c6aa;
  --destructive: #e67e80;
  --border: #4f585e;
  --input: #4f585e;
  --ring: #7fbbb3;
  --chart-1: #e67e80;
  --chart-2: #e69875;
  --chart-3: #dbbc7f;
  --chart-4: #a7c080;
  --chart-5: #7fbbb3;
  --sidebar: #343f44;
  --sidebar-foreground: #d3c6aa;
  --sidebar-primary: #a7c080;
  --sidebar-primary-foreground: #232a2e;
  --sidebar-accent: #3d484d;
  --sidebar-accent-foreground: #d3c6aa;
  --sidebar-border: #4f585e;
  --sidebar-ring: #7fbbb3;
}

:root[data-color-theme="nord"] {
  --background: #eceff4;
  --foreground: #2e3440;
  --card: #e5e9f0;
  --card-foreground: #2e3440;
  --popover: #e5e9f0;
  --popover-foreground: #2e3440;
  --primary: #5e81ac;
  --primary-foreground: #eceff4;
  --secondary: #d8dee9;
  --secondary-foreground: #2e3440;
  --muted: #d8dee9;
  --muted-foreground: #4c566a;
  --accent: #d8dee9;
  --accent-foreground: #2e3440;
  --destructive: #bf616a;
  --border: #c8d0dc;
  --input: #c8d0dc;
  --ring: #5e81ac;
  --chart-1: #5e81ac;
  --chart-2: #88c0d0;
  --chart-3: #a3be8c;
  --chart-4: #ebcb8b;
  --chart-5: #b48ead;
  --sidebar: #e5e9f0;
  --sidebar-foreground: #2e3440;
  --sidebar-primary: #5e81ac;
  --sidebar-primary-foreground: #eceff4;
  --sidebar-accent: #d8dee9;
  --sidebar-accent-foreground: #2e3440;
  --sidebar-border: #c8d0dc;
  --sidebar-ring: #5e81ac;
}

.dark[data-color-theme="nord"] {
  --background: #2e3440;
  --foreground: #eceff4;
  --card: #3b4252;
  --card-foreground: #eceff4;
  --popover: #3b4252;
  --popover-foreground: #eceff4;
  --primary: #88c0d0;
  --primary-foreground: #2e3440;
  --secondary: #434c5e;
  --secondary-foreground: #eceff4;
  --muted: #434c5e;
  --muted-foreground: #d8dee9;
  --accent: #4c566a;
  --accent-foreground: #eceff4;
  --destructive: #bf616a;
  --border: #4c566a;
  --input: #4c566a;
  --ring: #88c0d0;
  --chart-1: #88c0d0;
  --chart-2: #81a1c1;
  --chart-3: #a3be8c;
  --chart-4: #ebcb8b;
  --chart-5: #b48ead;
  --sidebar: #3b4252;
  --sidebar-foreground: #eceff4;
  --sidebar-primary: #88c0d0;
  --sidebar-primary-foreground: #2e3440;
  --sidebar-accent: #434c5e;
  --sidebar-accent-foreground: #eceff4;
  --sidebar-border: #4c566a;
  --sidebar-ring: #88c0d0;
}

:root[data-color-theme="rose-pine"] {
  --background: #faf4ed;
  --foreground: #464261;
  --card: #fffaf3;
  --card-foreground: #464261;
  --popover: #fffaf3;
  --popover-foreground: #464261;
  --primary: #b4637a;
  --primary-foreground: #fffaf3;
  --secondary: #f2e9e1;
  --secondary-foreground: #464261;
  --muted: #f2e9e1;
  --muted-foreground: #797593;
  --accent: #f2e9e1;
  --accent-foreground: #464261;
  --destructive: #b4637a;
  --border: #e6ddd5;
  --input: #e6ddd5;
  --ring: #907aa9;
  --chart-1: #b4637a;
  --chart-2: #ea9d34;
  --chart-3: #286983;
  --chart-4: #56949f;
  --chart-5: #907aa9;
  --sidebar: #fffaf3;
  --sidebar-foreground: #464261;
  --sidebar-primary: #b4637a;
  --sidebar-primary-foreground: #fffaf3;
  --sidebar-accent: #f2e9e1;
  --sidebar-accent-foreground: #464261;
  --sidebar-border: #e6ddd5;
  --sidebar-ring: #907aa9;
}

.dark[data-color-theme="rose-pine"] {
  --background: #191724;
  --foreground: #e0def4;
  --card: #1f1d2e;
  --card-foreground: #e0def4;
  --popover: #1f1d2e;
  --popover-foreground: #e0def4;
  --primary: #c4a7e7;
  --primary-foreground: #191724;
  --secondary: #26233a;
  --secondary-foreground: #e0def4;
  --muted: #26233a;
  --muted-foreground: #908caa;
  --accent: #393552;
  --accent-foreground: #e0def4;
  --destructive: #eb6f92;
  --border: #393552;
  --input: #393552;
  --ring: #c4a7e7;
  --chart-1: #eb6f92;
  --chart-2: #f6c177;
  --chart-3: #31748f;
  --chart-4: #9ccfd8;
  --chart-5: #c4a7e7;
  --sidebar: #1f1d2e;
  --sidebar-foreground: #e0def4;
  --sidebar-primary: #c4a7e7;
  --sidebar-primary-foreground: #191724;
  --sidebar-accent: #26233a;
  --sidebar-accent-foreground: #e0def4;
  --sidebar-border: #393552;
  --sidebar-ring: #c4a7e7;
}

/* Vesper light is app-derived from the official dark palette accents. */
:root[data-color-theme="vesper"] {
  --background: #fffaf3;
  --foreground: #101010;
  --card: #fff4e5;
  --card-foreground: #101010;
  --popover: #fff4e5;
  --popover-foreground: #101010;
  --primary: #8a4b00;
  --primary-foreground: #fffaf3;
  --secondary: #ffe6c7;
  --secondary-foreground: #101010;
  --muted: #fff0db;
  --muted-foreground: #666666;
  --accent: #ffe3c2;
  --accent-foreground: #101010;
  --destructive: #d04747;
  --border: #f0d4b8;
  --input: #f0d4b8;
  --ring: #d88434;
  --chart-1: #8a4b00;
  --chart-2: #008a72;
  --chart-3: #d04747;
  --chart-4: #d88434;
  --chart-5: #666666;
  --sidebar: #fff4e5;
  --sidebar-foreground: #101010;
  --sidebar-primary: #8a4b00;
  --sidebar-primary-foreground: #fffaf3;
  --sidebar-accent: #ffe3c2;
  --sidebar-accent-foreground: #101010;
  --sidebar-border: #f0d4b8;
  --sidebar-ring: #d88434;
}

.dark[data-color-theme="vesper"] {
  --background: #101010;
  --foreground: #ffffff;
  --card: #161616;
  --card-foreground: #ffffff;
  --popover: #161616;
  --popover-foreground: #ffffff;
  --primary: #ffc799;
  --primary-foreground: #000000;
  --secondary: #1c1c1c;
  --secondary-foreground: #ffffff;
  --muted: #1c1c1c;
  --muted-foreground: #a0a0a0;
  --accent: #232323;
  --accent-foreground: #ffc799;
  --destructive: #ff8080;
  --border: #282828;
  --input: #1c1c1c;
  --ring: #ffc799;
  --chart-1: #ffc799;
  --chart-2: #99ffe4;
  --chart-3: #ff8080;
  --chart-4: #ff7300;
  --chart-5: #a0a0a0;
  --sidebar: #101010;
  --sidebar-foreground: #a0a0a0;
  --sidebar-primary: #ffc799;
  --sidebar-primary-foreground: #000000;
  --sidebar-accent: #232323;
  --sidebar-accent-foreground: #ffc799;
  --sidebar-border: #282828;
  --sidebar-ring: #ffc799;
}

@theme inline {
  --font-sans: "Geist Variable", sans-serif;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --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);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  html {
    @apply font-sans;
  }

  body {
    @apply bg-background text-foreground;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .page-transition {
    view-transition-name: page;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  ::view-transition-old(page) {
    animation: page-out 220ms cubic-bezier(0.4, 0, 1, 1) both;
  }

  ::view-transition-new(page) {
    animation: page-in 300ms cubic-bezier(0, 0, 0.2, 1) 140ms both;
  }

  @keyframes page-out {
    from {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    to {
      opacity: 0;
      transform: translateY(4px) scale(0.99);
    }
  }

  @keyframes page-in {
    from {
      opacity: 0;
      transform: translateY(6px) scale(0.99);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

.article-body {
  line-height: 1.75;
}

.article-body :where(p, ul, ol, blockquote, pre, figure) {
  margin-block: 1em;
}

.article-body :where(a) {
  text-decoration: underline;
}

.article-body :where(img) {
  max-width: 100%;
}

.article-body :where(pre) {
  overflow-x: auto;
}