@import 'tailwindcss';
@import 'tw-animate-css';
@import '@measured/puck/dist/index.css';

/* Custom utilities */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

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

@theme {
  --font-sans:
    var(--font-sans), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';

  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

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

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-fade-in: fade-in 0.8s ease-out;
  --animate-slide-up: slide-up 0.8s ease-out;
  --animate-slide-down: slide-down 0.8s ease-out;

  @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;
    }
  }
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes slide-up {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes slide-down {
    from {
      opacity: 0;
      transform: translateY(-30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
  @media (width >= --theme(--breakpoint-sm)) {
    max-width: none;
  }
  @media (width >= 1400px) {
    max-width: 1400px;
  }
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

/* Prose styling for page content */
.prose {
  @apply text-foreground;
}

.prose h1 {
  @apply text-foreground mb-4 text-2xl font-bold;
}

.prose h2 {
  @apply text-foreground mb-3 text-xl font-semibold;
}

.prose h3 {
  @apply text-foreground mb-2 text-lg font-medium;
}

.prose p {
  @apply text-foreground mb-4;
}

.prose ul {
  @apply text-foreground mb-4 list-inside list-disc;
}

.prose ol {
  @apply text-foreground mb-4 list-inside list-decimal;
}

.prose li {
  @apply text-foreground mb-1;
}

.prose a {
  @apply text-primary hover:underline;
}

.prose blockquote {
  @apply border-muted text-muted-foreground border-l-4 pl-4 italic;
}

.prose code {
  @apply bg-muted rounded px-1 py-0.5 font-mono text-sm;
}

.prose pre {
  @apply bg-muted overflow-x-auto rounded p-4;
}

.prose img {
  @apply h-auto max-w-full rounded;
}

.prose table {
  @apply border-border w-full border-collapse border;
}

.prose th,
.prose td {
  @apply border-border border p-2 text-left;
}

.prose th {
  @apply bg-muted font-semibold;
}

/* Puck Editor Custom Styles */
.puck-editor {
  @apply bg-background text-foreground h-full;
}

.puck-editor .puck {
  @apply h-full;
}

.puck-editor .puck-canvas {
  @apply h-full;
}

.puck-editor .puck-sidebar {
  @apply bg-card border-border;
}

.puck-editor .puck-sidebar-header {
  @apply bg-card text-card-foreground;
}

.puck-editor .puck-component-list {
  @apply bg-card;
}

.puck-editor .puck-component-item {
  @apply hover:bg-muted border-border;
}

.puck-editor .puck-field {
  @apply bg-background text-foreground border-border;
}

.puck-editor .puck-field input,
.puck-editor .puck-field textarea,
.puck-editor .puck-field select {
  @apply bg-background text-foreground border-border;
}

.puck-editor .puck-field input:focus,
.puck-editor .puck-field textarea:focus,
.puck-editor .puck-field select:focus {
  @apply ring-ring border-ring;
}

.puck-editor .puck-button {
  @apply bg-primary text-primary-foreground hover:bg-primary/90;
}

.puck-editor .puck-button-secondary {
  @apply bg-secondary text-secondary-foreground hover:bg-secondary/90;
}

.puck-editor .puck-button-outline {
  @apply bg-background text-foreground border-border hover:bg-muted border;
}

.puck-editor .puck-dropzone {
  @apply border-border bg-muted/50 border-dashed;
}

.puck-editor .puck-dropzone:hover {
  @apply border-primary bg-muted;
}

.puck-editor .puck-dropzone-active {
  @apply border-primary bg-primary/10;
}

.puck-editor .puck-selected {
  @apply ring-primary ring-2;
}

.puck-editor .puck-toolbar {
  @apply bg-card border-border;
}

.puck-editor .puck-toolbar-button {
  @apply bg-background text-foreground hover:bg-muted border-border;
}

.puck-editor .puck-toolbar-button:hover {
  @apply bg-muted;
}

.puck-editor .puck-toolbar-button-active {
  @apply bg-primary text-primary-foreground;
}

.puck-editor .puck-modal {
  @apply bg-background text-foreground;
}

.puck-editor .puck-modal-overlay {
  @apply bg-background/80;
}

.puck-editor .puck-modal-content {
  @apply bg-card border-border;
}

.puck-editor .puck-modal-header {
  @apply bg-card text-card-foreground border-border;
}

.puck-editor .puck-modal-body {
  @apply bg-card text-card-foreground;
}

.puck-editor .puck-modal-footer {
  @apply bg-card text-card-foreground border-border;
}

/* Enhanced Puck Editor Styles for Full-Screen Experience */
.puck-editor .puck-sidebar {
  @apply border-border border-r;
}

.puck-editor .puck-canvas {
  @apply bg-background;
}

.puck-editor .puck-dropzone {
  @apply border-muted-foreground/25 hover:border-primary/50 border-2 border-dashed transition-colors;
}

.puck-editor .puck-dropzone-active {
  @apply border-primary bg-primary/5;
}

/* Welcome Block Styles */
.puck-editor .welcome-block {
  @apply animate-in fade-in duration-300;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

/*
  ---break---
*/

:root {
  --sidebar: hsl(0 0% 98%);
  --sidebar-foreground: hsl(240 5.3% 26.1%);
  --sidebar-primary: hsl(240 5.9% 10%);
  --sidebar-primary-foreground: hsl(0 0% 98%);
  --sidebar-accent: hsl(240 4.8% 95.9%);
  --sidebar-accent-foreground: hsl(240 5.9% 10%);
  --sidebar-border: hsl(220 13% 91%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
}

/*
  ---break---
*/

.dark {
  --sidebar: hsl(240 5.9% 10%);
  --sidebar-foreground: hsl(240 4.8% 95.9%);
  --sidebar-primary: hsl(224.3 76.3% 48%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(240 3.7% 15.9%);
  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
  --sidebar-border: hsl(240 3.7% 15.9%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
}

/*
  ---break---
*/

@theme inline {
  --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);
}

/*
  ---break---
*/

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