@import "tailwindcss";
@import "tw-animate-css";

@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";

@config '../tailwind.config.ts';

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

/* Helper theme */

@theme inline {
  --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-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --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-bright: var(--bright);
  --color-bright-foreground: var(--bright-foreground);
  --color-sidebar: var(--sidebar-background);
  --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);
  --color-gumroad-pink: #ff90e8;
  --color-gumroad-bg: #f4f4f0;

  --text-xxs: 0.625rem;
  --text-xxs--line-height: 0.75rem;

  --font-system-ui:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;

  @keyframes default-pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
  @keyframes pulsing {
    0% {
      box-shadow: 0 0 0 0 rgba(254, 184, 29, 1);
    }
    100% {
      box-shadow: 0 0 0 32px rgba(254, 184, 29, 0);
    }
  }
  @keyframes bounce {
    0%,
    100% {
      transform: translateY(-5px);
    }
    50% {
      transform: translateY(0);
    }
  }
  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }

  --animate-default-pulse: default-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-pulse: pulsing 1s ease-in-out infinite;
  --animate-bounce: bounce 0.75s ease-in infinite;
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-skeleton: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
}

@import "../components/tiptap/editor.css";

@layer base {
  :root,
  .light {
    --sidebar-width: 16rem;
    --sidebar-width-icon: 3rem;
    --sidebar-width-mobile: 60%; /* Mobile sidebar width */
    --sidebar-background: hsl(0 69% 17%); /* Sidebar background color */
    --sidebar-foreground: hsl(0 0% 100%); /* Sidebar text color */
    --sidebar-primary: hsl(0 69% 17%); /* Sidebar primary color */
    --sidebar-primary-foreground: hsl(0 0% 100%); /* Sidebar primary text color */
    --sidebar-accent: hsl(0 0% 100% / 10%); /* Sidebar accent color */
    --sidebar-accent-foreground: hsl(0 0% 100%); /* Sidebar accent text color */
    --sidebar-border: hsl(0 0% 100% / 20%); /* Sidebar border color */
    --sidebar-ring: hsl(0 0% 100%); /* Sidebar focus ring color */
    --background: hsl(0 0% 100%); /* Default background color of <body> */
    --foreground: hsl(0 58% 10%); /* Default text color */
    --card: hsl(0 0% 100%); /* Background color for <Card> */
    --card-foreground: hsl(0 58% 10%); /* Text color for <Card> */
    --popover: hsl(0 0% 100%); /* Background color for popovers */
    --popover-foreground: hsl(0 58% 10%); /* Text color for popovers */
    --primary: hsl(0 67% 17%); /* Primary colors for <Button> */
    --primary-foreground: hsl(0 0% 100%); /* Primary text color for <Button> */
    --secondary: hsl(42 100% 95%); /* Secondary colors for <Button> */
    --secondary-foreground: hsl(0 58% 10%); /* Secondary text color for <Button> */
    --muted: hsl(210 20% 98%); /* Muted backgrounds for <TabsList>, <Skeleton>, <Switch> */
    --muted-foreground: hsl(224 8% 46%); /* Muted text color */
    --accent: hsl(220 14% 96%); /* Used for accents like hover effects */
    --accent-foreground: hsl(0 58% 10%); /* Text color for accent elements */
    --destructive: hsl(17 88% 40%); /* Used for destructive actions */
    --destructive-foreground: hsl(0 0% 100%); /* Text color for destructive elements */
    --success: hsl(142 72% 29%); /* Used for success states */
    --success-foreground: hsl(0 0% 100%); /* Text color for success elements */
    --border: hsl(218 10% 84%); /* Default border color */
    --input: hsl(218 10% 84%); /* Border color for inputs */
    --ring: hsl(218 10% 84%); /* Used for focus ring */
    --chart-1: hsl(12 76% 61%); /* Chart color 1 */
    --chart-2: hsl(173 58% 39%); /* Chart color 2 */
    --chart-3: hsl(197 37% 24%); /* Chart color 3 */
    --chart-4: hsl(43 74% 66%); /* Chart color 4 */
    --chart-5: hsl(27 87% 67%); /* Chart color 5 */
    --radius: 0.5rem; /* Border radius */
    --bright: hsl(41 99% 55%); /* Pop of bright color */
    --bright-foreground: hsl(0 58% 10%); /* Text on top of pop of bright color */
    --syntax-plain: #24292e;
    --syntax-comment: #6a737d;
    --syntax-keyword: #d73a49;
    --syntax-function: #6f42c1;
    --syntax-string: #032f62;
    --syntax-number: #005cc5;
    --chart-open: hsl(1 75% 17%);
    --chart-closed-manual: hsl(45 99% 55%);
    --chart-closed-ai: hsl(73 58% 56%);
    --chart-negative: hsl(17 88% 40%); /* Same as light mode destructive */
  }

  .dark {
    --sidebar-width: 16rem;
    --sidebar-width-icon: 3rem;
    --sidebar-width-mobile: 60%; /* Mobile sidebar width */
    --sidebar-background: hsl(0 58% 10%); /* Updated to match background color */
    --sidebar-foreground: hsl(0 0% 100%);
    --sidebar-primary: hsl(0 58% 10%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(0 0% 100% / 10%);
    --sidebar-accent-foreground: hsl(0 0% 100%);
    --sidebar-border: hsl(0 0% 100% / 20%);
    --sidebar-ring: hsl(0 0% 100%);
    --background: hsl(0 58% 10%); /* Default background color of <body> */
    --foreground: hsl(0 0% 100%); /* Default text color */
    --card: hsl(0 58% 10%); /* Background color for <Card> */
    --card-foreground: hsl(0 0% 100%); /* Text color for <Card> */
    --popover: hsl(0 58% 10%); /* Background color for popovers */
    --popover-foreground: hsl(0 0% 100%); /* Text color for popovers */
    --primary: hsl(0 0% 100%); /* Primary colors for <Button> */
    --primary-foreground: hsl(0 58% 10%); /* Primary text color for <Button> */
    --secondary: hsl(0 20% 22%); /* Secondary colors for <Button> */
    --secondary-foreground: hsl(0 0% 100%); /* Secondary text color for <Button> */
    --muted: hsl(0 20% 22%); /* Muted backgrounds for <TabsList>, <Skeleton>, <Switch> */
    --muted-foreground: hsl(0 0% 100% / 70%); /* Muted text color */
    --accent: hsl(0 20% 22%); /* Used for accents like hover effects */
    --accent-foreground: hsl(0 0% 100%); /* Text color for accent elements */
    --destructive: hsl(0 84% 65%); /* Used for destructive actions */
    --destructive-foreground: hsl(0 0% 100%); /* Text color for destructive elements */
    --success: hsl(142 72% 29%); /* Used for success states */
    --success-foreground: hsl(0 0% 100%); /* Text color for success elements */
    --border: hsl(0 0% 100% / 20%); /* Default border color */
    --input: hsl(0 0% 100% / 20%); /* Border color for inputs */
    --ring: hsl(0 0% 100% / 20%); /* Used for focus ring */
    --chart-1: hsl(12 76% 41%); /* Chart color 1 */
    --chart-2: hsl(173 58% 29%); /* Chart color 2 */
    --chart-3: hsl(197 37% 14%); /* Chart color 3 */
    --chart-4: hsl(43 74% 46%); /* Chart color 4 */
    --chart-5: hsl(27 87% 47%); /* Chart color 5 */
    --radius: 0.5rem; /* Border radius */
    --bright: hsl(41 99% 55%); /* Pop of bright color */
    --bright-foreground: hsl(0 58% 10%); /* Text on top of pop of bright color */
    --syntax-plain: #d4d4d4;
    --syntax-comment: #6a9955;
    --syntax-keyword: #569cd6;
    --syntax-function: #dcdcaa;
    --syntax-string: #ce9178;
    --syntax-number: #9cdcfe;
    --chart-open: hsl(17 90% 49%); /* Slightly lighter in dark mode for better visibility */
  }
}

/* Docs theme */

@theme {
  --color-fd-background: hsl(0, 0%, 98%);
  --color-fd-foreground: hsl(0, 0%, 3.9%);
  --color-fd-muted: hsl(350, 64%, 96.1%);
  --color-fd-muted-foreground: hsl(0, 0%, 45%);
  --color-fd-popover: hsl(0, 0%, 98%);
  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
  --color-fd-card: hsl(350, 50%, 98%);
  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
  --color-fd-border: hsl(350, 50%, 89.8%);
  --color-fd-primary: hsl(350, 64%, 60%);
  --color-fd-primary-foreground: hsl(0, 0%, 98%);
  --color-fd-secondary: hsl(350, 64%, 96.1%);
  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
  --color-fd-accent: hsl(350, 50%, 94.1%);
  --color-fd-accent-foreground: hsl(0, 0%, 9%);
  --color-fd-ring: hsl(350, 64%, 14%);
}

.dark {
  --color-fd-background: hsl(0, 50%, 10%);
  --color-fd-foreground: hsl(0, 30%, 94.5%);
  --color-fd-muted: hsl(0, 50%, 14%);
  --color-fd-muted-foreground: hsl(0, 30%, 90%);
  --color-fd-popover: hsl(0, 50%, 14%);
  --color-fd-popover-foreground: hsl(0, 30%, 94.5%);
  --color-fd-card: hsl(0, 50%, 14%);
  --color-fd-card-foreground: hsl(0, 30%, 94.5%);
  --color-fd-border: hsl(0, 50%, 20%);
  --color-fd-primary: #feb81d;
  --color-fd-primary-foreground: hsl(0, 0%, 9%);
  --color-fd-secondary: hsl(15, 25%, 20%);
  --color-fd-secondary-foreground: hsl(15, 25%, 90%);
  --color-fd-accent: hsl(15, 25%, 25%);
  --color-fd-accent-foreground: hsl(15, 25%, 90%);
  --color-fd-ring: hsl(350, 64%, 80%);
}

/* Additional styles */

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
  [role="button"],
  button {
    @apply cursor-pointer;
  }
}

@utility responsive-break-words {
  overflow-wrap: break-word;
  word-break: break-word;
}

@utility scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@utility scrollbar-hidden {
  &::-webkit-scrollbar {
    display: none;
  }
}

@layer components {
  .btn-group {
    @apply flex;
  }
  .btn-group .btn-group-item:first-child:not(:only-child),
  .btn-group :first-child:not(:only-child) .btn-group-item {
    @apply mr-[-1px] rounded-r-none;
  }
  .btn-group .btn-group-item:last-child:not(:only-child),
  .btn-group :last-child:not(:only-child) .btn-group-item {
    @apply rounded-l-none;
  }
  .btn-group .btn-group-item:not(:first-child):not(:last-child),
  .btn-group :not(:first-child):not(:last-child) .btn-group-item {
    @apply mr-[-1px] rounded-none;
  }
  pre.code {
    counter-reset: step;
    counter-increment: step 0;
  }
  pre.code .token-line::before {
    counter-increment: step;
    @apply mr-4 inline-block w-4 text-right text-muted-foreground/40 content-[counter(step)];
  }
}

:root {
  --sidebar-width: 16rem;
  --sidebar-width-icon: 3rem;
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 100%;
    --sidebar-width-icon: 100%;
  }
}
