:root {
  --gray-1: #fcfcfc;
  --gray-2: #f9f9f9;
  --gray-3: #f0f0f0;
  --gray-4: #e8e8e8;
  --gray-5: #e0e0e0;
  --gray-6: #d9d9d9;
  --gray-7: #cecece;
  --gray-8: #bbbbbb;
  --gray-9: #8d8d8d;
  --gray-10: #838383;
  --gray-11: #646464;
  --gray-12: #202020;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --gray-1: color(display-p3 0.988 0.988 0.988);
      --gray-2: color(display-p3 0.975 0.975 0.975);
      --gray-3: color(display-p3 0.939 0.939 0.939);
      --gray-4: color(display-p3 0.908 0.908 0.908);
      --gray-5: color(display-p3 0.88 0.88 0.88);
      --gray-6: color(display-p3 0.849 0.849 0.849);
      --gray-7: color(display-p3 0.807 0.807 0.807);
      --gray-8: color(display-p3 0.732 0.732 0.732);
      --gray-9: color(display-p3 0.553 0.553 0.553);
      --gray-10: color(display-p3 0.512 0.512 0.512);
      --gray-11: color(display-p3 0.392 0.392 0.392);
      --gray-12: color(display-p3 0.125 0.125 0.125);
    }
  }
}

:root,
:is(.dark, [data-theme="dark"]) {
  --gray-dark-1: #111111;
  --gray-dark-2: #191919;
  --gray-dark-3: #222222;
  --gray-dark-4: #2a2a2a;
  --gray-dark-5: #313131;
  --gray-dark-6: #3a3a3a;
  --gray-dark-7: #484848;
  --gray-dark-8: #606060;
  --gray-dark-9: #6e6e6e;
  --gray-dark-10: #7b7b7b;
  --gray-dark-11: #b4b4b4;
  --gray-dark-12: #eeeeee;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root,
    .dark {
      --gray-dark-1: color(display-p3 0.067 0.067 0.067);
      --gray-dark-2: color(display-p3 0.098 0.098 0.098);
      --gray-dark-3: color(display-p3 0.135 0.135 0.135);
      --gray-dark-4: color(display-p3 0.163 0.163 0.163);
      --gray-dark-5: color(display-p3 0.192 0.192 0.192);
      --gray-dark-6: color(display-p3 0.228 0.228 0.228);
      --gray-dark-7: color(display-p3 0.283 0.283 0.283);
      --gray-dark-8: color(display-p3 0.375 0.375 0.375);
      --gray-dark-9: color(display-p3 0.431 0.431 0.431);
      --gray-dark-10: color(display-p3 0.484 0.484 0.484);
      --gray-dark-11: color(display-p3 0.706 0.706 0.706);
      --gray-dark-12: color(display-p3 0.933 0.933 0.933);
    }
  }
}

@custom-variant dark (&:where(:is(.dark, [data-theme="dark"]), :is(.dark, [data-theme="dark"]) *));
@custom-variant light (&:where([data-theme=light], [data-theme=light] *));

@layer base {
  *,
  *::before,
  *::after {
    --tw-ring-color: var(--ring-color-neutral-strong);
  }

  :where(
    a[href],
    button,
    input,
    textarea,
    select,
    summary,
    [role='button'],
    [role='link'],
    [tabindex]:not([tabindex='-1'])
  ):focus-visible {
    outline: 2px solid var(--ring-color-neutral-strong);
    outline-offset: 2px;
  }
}

@utility drag-none {
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

@utility rounded {
  --r: var(--radius);
  @apply border-shape-squircle;
}

@utility rounded-* {
  --r: --value(--radius-*, [length]);
  @apply border-shape-squircle;
}

@utility border-shape-squircle {
  corner-shape: squircle;

  @supports (border-shape: shape(from 0 0, close)) {
    border-shape: shape(
      from calc(1.6 * var(--r)) 0,
      hline to calc(100% - 1.6 * var(--r)),
      curve to calc(100% - 0.546 * var(--r)) calc(0.109 * var(--r)) with calc(100% - 1.04 * var(--r)) 0 /
        calc(100% - 0.76 * var(--r)) 0,
      arc to calc(100% - 0.109 * var(--r)) calc(0.546 * var(--r)) of var(--r) cw,
      curve to 100% calc(1.6 * var(--r)) with 100% calc(0.76 * var(--r)) / 100% calc(1.04 * var(--r)),
      vline to calc(100% - 1.6 * var(--r)),
      curve to calc(100% - 0.109 * var(--r)) calc(100% - 0.546 * var(--r)) with 100% calc(100% - 1.04 * var(--r)) / 100%
        calc(100% - 0.76 * var(--r)),
      arc to calc(100% - 0.546 * var(--r)) calc(100% - 0.109 * var(--r)) of var(--r) cw,
      curve to calc(100% - 1.6 * var(--r)) 100% with calc(100% - 1.04 * var(--r)) 100% / calc(100% - 0.76 * var(--r)) 100%,
      hline to calc(1.6 * var(--r)),
      curve to calc(0.546 * var(--r)) calc(100% - 0.109 * var(--r)) with calc(1.04 * var(--r)) 100% /
        calc(0.76 * var(--r)) 100%,
      arc to calc(0.109 * var(--r)) calc(100% - 0.546 * var(--r)) of var(--r) cw,
      curve to 0 calc(100% - 1.6 * var(--r)) with 0 calc(100% - 0.76 * var(--r)) / 0 calc(100% - 1.04 * var(--r)),
      vline to calc(1.6 * var(--r)),
      curve to calc(0.109 * var(--r)) calc(0.546 * var(--r)) with 0 calc(1.04 * var(--r)) / 0 calc(0.76 * var(--r)),
      arc to calc(0.546 * var(--r)) calc(0.109 * var(--r)) of var(--r) cw,
      curve to calc(1.6 * var(--r)) 0 with calc(0.76 * var(--r)) 0 / calc(1.04 * var(--r)) 0
    );
  }
}

@utility border-shape-initial {
  border-shape: none !important;
  corner-shape: round !important;
}

@utility rounded-full {
  @apply border-shape-initial;
}

@theme {
  --font-sans:
    'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  --font-playfair: ui-serif, Georgia, serif;
  --font-family-sans: 'Inter', sans-serif;

  /**
   * Neutral Colors
   */

  /* Background colors */
  --background-color-neutral: var(--gray-1);
  --background-color-neutral-subtle: var(--gray-2);
  --background-color-neutral-strong: var(--gray-3);
  --background-color-neutral-inverse: var(--gray-12);

  /* Solid colors */
  --background-color-surface: #fff;
  --background-color-surface-weak: var(--gray-2);
  --background-color-surface-subtle: var(--gray-3);
  --background-color-surface-strong: var(--gray-4);
  --background-color-surface-intense: var(--gray-6);

  /* On Surface */
  --background-color-onsurface: var(--color-white);
  --background-color-onsurface-subtle: oklch(1 0 0 / 0.05);
  --background-color-onsurface-strong: oklch(1 0 0 / 0.08);

  /* Content colors */
  --text-color-neutral: var(--gray-12);
  --text-color-neutral-subtle: var(--gray-11);
  --text-color-neutral-weak: var(--gray-9);
  --text-color-neutral-strong: var(--color-black);
  --text-color-neutral-inverse: var(--gray-1);
  --text-color-neutral-onsurface: var(--color-white);

  /* Border colors */
  --border-color-neutral: var(--gray-5);
  --border-color-neutral-subtle: var(--gray-4);
  --border-color-neutral-strong: var(--gray-8);
  --border-color-neutral-onsurface: var(--color-black);

  /* Ring colors */
  --ring-color-neutral: var(--gray-4);
  --ring-color-neutral-subtle: var(--gray-3);
  --ring-color-neutral-strong: var(--gray-9);

  /* Ring to mimic bg */
  --ring-color-bg-neutral: var(--gray-1);
  --ring-color-bg-neutral-subtle: var(--gray-2);
  --ring-color-bg-neutral-strong: var(--gray-3);
  --ring-color-bg-neutral-inverse: var(--gray-12);

  /* Ring to mimic surface */
  --ring-color-bg-surface: var(--gray-1);
  --ring-color-bg-surface-weak: var(--gray-2);
  --ring-color-bg-surface-subtle: var(--gray-3);
  --ring-color-bg-surface-strong: var(--gray-4);

  /**
   * Accent Colors
   */

  --background-color-accent: var(--color-blue-500);
  --background-color-accent-subtle: var(--color-blue-50);
  --background-color-accent-strong: var(--color-blue-600);
  --background-color-accent-inverse: var(--color-white);

  --text-color-accent: var(--color-blue-500);
  --text-color-accent-onsurface: var(--color-white);
  --text-color-accent-subtle: var(--color-blue-400);
  --text-color-accent-muted: var(--color-blue-300);
  --text-color-accent-inverse: var(--color-white);

  --border-color-accent: var(--color-blue-200);
  --border-color-accent-subtle: var(--color-blue-100);
  --border-color-accent-strong: var(--color-blue-300);

  /**
   * AI Colors
   */

  --background-color-ai: var(--color-purple-500);
  --background-color-ai-subtle: var(--color-purple-50);
  --background-color-ai-strong: var(--color-purple-600);
  --background-color-ai-inverse: var(--color-white);

  --text-color-ai: var(--color-purple-500);
  --text-color-ai-onsurface: var(--color-white);
  --text-color-ai-subtle: var(--color-purple-400);
  --text-color-ai-muted: var(--color-purple-300);
  --text-color-ai-inverse: var(--color-white);

  --border-color-ai: var(--color-purple-200);
  --border-color-ai-subtle: var(--color-purple-100);
  --border-color-ai-strong: var(--color-purple-300);

  /**
   * Danger Colors
   */

  --color-danger: #db0007b8;

  --background-color-danger: var(--color-danger);
  --background-color-danger-subtle: #fef2f2;
  --background-color-danger-strong: #a00005;
  --background-color-danger-inverse: var(--color-white);

  --text-color-danger: var(--color-danger);
  --text-color-danger-onsurface: var(--color-white);
  --text-color-danger-subtle: #f87171;
  --text-color-danger-muted: #fca5a5;
  --text-color-danger-inverse: var(--color-white);

  --border-color-danger: #fecaca;
  --border-color-danger-subtle: #fee2e2;
  --border-color-danger-strong: var(--color-danger);

  /**
   * Warning Colors
   */

  --background-color-warn: var(--color-amber-500);
  --background-color-warn-subtle: var(--color-amber-50);
  --background-color-warn-strong: var(--color-amber-700);
  --background-color-warn-inverse: var(--color-white);

  --text-color-warn: var(--color-amber-950);
  --text-color-warn-onsurface: var(--color-black);
  --text-color-warn-subtle: var(--color-amber-400);
  --text-color-warn-muted: var(--color-amber-300);
  --text-color-warn-inverse: var(--color-white);

  --border-color-warn: var(--color-amber-200);
  --border-color-warn-subtle: var(--color-amber-100);
  --border-color-warn-strong: var(--color-amber-300);

  /**
   * Success Colors
   */

  --color-success: #008647d8;

  --background-color-success: var(--color-success);
  --background-color-success-subtle: #f0fdf4;
  --background-color-success-strong: #005a31;
  --background-color-success-inverse: var(--color-white);

  --text-color-success: var(--color-success);
  --text-color-success-onsurface: var(--color-white);
  --text-color-success-subtle: #4ade80;
  --text-color-success-muted: #86efac;
  --text-color-success-inverse: var(--color-white);

  --border-color-success: #bbf7d0;
  --border-color-success-subtle: #dcfce7;
  --border-color-success-strong: var(--color-success);
}

:is(.dark, [data-theme="dark"]) {
  /* Neutral Colors */
  --background-color-neutral: var(--gray-dark-1);
  --background-color-neutral-subtle: var(--gray-dark-2);
  --background-color-neutral-strong: var(--gray-dark-3);
  --background-color-neutral-inverse: var(--gray-dark-12);

  --background-color-surface: var(--gray-dark-6);
  --background-color-surface-weak: var(--gray-dark-3);
  --background-color-surface-subtle: var(--gray-dark-4);
  --background-color-surface-strong: var(--gray-dark-5);
  --background-color-surface-intense: var(--gray-dark-7);

  --text-color-neutral: var(--gray-dark-12);
  --text-color-neutral-subtle: var(--gray-dark-11);
  --text-color-neutral-weak: var(--gray-dark-9);
  --text-color-neutral-strong: var(--color-white);
  --text-color-neutral-inverse: var(--gray-dark-1);

  --border-color-neutral: var(--gray-dark-7);
  --border-color-neutral-subtle: var(--gray-dark-4);
  --border-color-neutral-strong: var(--gray-dark-9);
  --border-color-neutral-onsurface: var(--color-white);

  --ring-color-neutral: var(--gray-dark-4);
  --ring-color-neutral-subtle: var(--gray-dark-3);
  --ring-color-neutral-strong: var(--gray-dark-9);

  --ring-color-bg-neutral: var(--gray-dark-1);
  --ring-color-bg-neutral-subtle: var(--gray-dark-2);
  --ring-color-bg-neutral-strong: var(--gray-dark-3);
  --ring-color-bg-neutral-inverse: var(--gray-dark-12);

  --ring-color-bg-surface: var(--gray-dark-7);
  --ring-color-bg-surface-weak: var(--gray-dark-4);
  --ring-color-bg-surface-subtle: var(--gray-dark-5);
  --ring-color-bg-surface-strong: var(--gray-dark-6);

  /* Accent Colors */
  --background-color-accent: var(--color-blue-400);
  --background-color-accent-subtle: var(--color-blue-900);
  --background-color-accent-strong: var(--color-blue-400);
  --background-color-accent-inverse: var(--color-neutral-900);

  --text-color-accent: var(--color-blue-400);
  --text-color-accent-subtle: var(--color-blue-200);
  --text-color-accent-muted: var(--color-blue-200);

  --border-color-accent: var(--color-blue-700);
  --border-color-accent-subtle: var(--color-blue-800);
  --border-color-accent-strong: var(--color-blue-600);

  /* AI Colors */
  --background-color-ai: var(--color-purple-500);
  --background-color-ai-subtle: var(--color-purple-900);
  --background-color-ai-strong: var(--color-purple-400);
  --background-color-ai-inverse: var(--color-purple-900);

  --text-color-ai: var(--color-purple-400);
  --text-color-ai-subtle: var(--color-purple-200);
  --text-color-ai-muted: var(--color-purple-200);

  --border-color-ai: var(--color-purple-700);
  --border-color-ai-subtle: var(--color-purple-800);
  --border-color-ai-strong: var(--color-purple-600);

  /* Danger Colors */
  --background-color-danger: #ef4444;
  --background-color-danger-subtle: #450a0a;
  --background-color-danger-strong: #f87171;
  --background-color-danger-inverse: #1c1917;

  --text-color-danger: #fca5a5;
  --text-color-danger-subtle: #fecaca;
  --text-color-danger-muted: #fecaca;

  --border-color-danger: #b91c1c;
  --border-color-danger-subtle: #7f1d1d;
  --border-color-danger-strong: #dc2626;

  /* Warning Colors */
  --background-color-warn: var(--color-amber-500);
  --background-color-warn-subtle: var(--color-amber-900);
  --background-color-warn-strong: var(--color-amber-400);

  --text-color-warn: var(--color-amber-300);
  --text-color-warn-onsurface: var(--color-amber-950);
  --text-color-warn-subtle: var(--color-amber-200);
  --text-color-warn-muted: var(--color-amber-200);

  --border-color-warn: var(--color-amber-700);
  --border-color-warn-subtle: var(--color-amber-800);
  --border-color-warn-strong: var(--color-amber-600);

  /* Success Colors */
  --color-success: #22c55e;

  --background-color-success: var(--color-success);
  --background-color-success-subtle: #052e16;
  --background-color-success-strong: #4ade80;
  --background-color-success-inverse: #1c1917;

  --text-color-success: #86efac;
  --text-color-success-subtle: #bbf7d0;
  --text-color-success-muted: #bbf7d0;

  --border-color-success: #15803d;
  --border-color-success-subtle: #14532d;
  --border-color-success-strong: #22c55e;

  /* Danger Colors */
  --color-danger: #ef4444;
}

@theme {
  /**
   * Typography
   */
  /* Titles */
  --text-title-lg: var(--text-5xl);
  --text-title-lg--font-weight: 400;

  --text-title: var(--text-4xl);
  --text-title--font-weight: 400;

  --text-title-md: var(--text-2xl);
  --text-title-md--font-weight: 400;

  --text-title-sm: var(--text-xl);
  --text-title-sm--font-weight: 400;

  --text-copy-xl: var(--text-lg);
  --text-copy-xl--font-weight: 400;

  --text-copy-lg: var(--text-base);
  --text-copy-lg--font-weight: 400;

  --text-copy: var(--text-sm);
  --text-copy--font-weight: 400;

  --text-copy-sm: var(--text-xs);
  --text-copy-sm--font-weight: 400;
  --text-copy-sm--line-height: 1.1rem;

  --text-copy-xs: 0.625rem;
  --text-copy-xs--font-weight: 400;

  /* Labels */
  --text-label: var(--text-sm);
  --text-label--font-weight: 500;

  --animate-overlayShow: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --animate-contentShow: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);

  --animate-pulse-size: pulseSize 800ms var(--ease-in-out-expo) infinite;

  @keyframes pulseSize {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.5);
    }
    100% {
      transform: scale(1);
    }
  }

  /**
   * Shadows
   */
  --shadow-xs: 0 1px 1px 0 rgba(0, 0, 0, 0.1);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);

  --shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.04), 0 8px 8px -8px rgba(0, 0, 0, 0.04);

  --shadow-md: 0px 0px 10px 3px rgba(0, 0, 0, 0.08);

  --shadow-lg: 0 1px 1px 0 rgba(0, 0, 0, 0.02), 0 4px 8px 0 rgba(0, 0, 0, 0.04);

  --shadow-xl:
    0 1px 1px 0 rgba(0, 0, 0, 0.02), 0 4px 8px -4px rgba(0, 0, 0, 0.04),
    0 16px 24px -8px rgba(0, 0, 0, 0.06);

  --shadow-2xl:
    0 1px 1px 0 rgba(0, 0, 0, 0.02), 0 8px 16px -4px rgba(0, 0, 0, 0.04),
    0 24px 32px -8px rgba(0, 0, 0, 0.06);

  --inset-shadow-xs: 0 2px 1px 0 rgba(0, 0, 0, 0.1) inset;
  --inset-shadow-xs-strong: 0 2px 1px 0 rgba(0, 0, 0, 0.5) inset;

  /**
  * Gradients
  */
  --button-gradient: linear-gradient(
    0deg,
    var(--background-color-neutral-solid-inverse),
    var(--background-color-neutral)
  );

  /**
  * Easing Functions
  */
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);

  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);

  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.slide-fade-leave-active,
.slide-fade-enter-active {
  transition: all 0.2s ease-in-out;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(30px) scale(0.98);
  opacity: 0;
}

.slide-fade-up-enter-active,
.slide-fade-up-leave-active {
  transition: all 0.3s cubic-bezier(0.12, 0.32, 0.16, 0.86);
}

.slide-fade-up-enter-from,
.slide-fade-up-leave-to {
  transform: translateY(20px);
  opacity: 0;
}

:is(.dark, [data-theme="dark"]),
:is(.dark, [data-theme="dark"]) body {
  color-scheme: dark;
}

/* Dialog animations */
@keyframes dialog-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dialog-overlay-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes dialog-content-in {
  from {
    opacity: 0;
    scale: 0.95;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes dialog-content-out {
  from {
    opacity: 1;
    scale: 1;
  }
  to {
    opacity: 0;
    scale: 0.95;
  }
}

/* Green markers for success content lists */
.prose-success ul > li::marker,
.prose-success ol > li::marker {
  color: var(--color-success);
}