@import "tailwindcss";

@theme {
  /* Notion-inspired color palette */
  --color-zinc-50: #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-300: #d4d4d8;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-600: #52525b;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-zinc-950: #09090b;

  /* Notion accent colors */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;

  /* Typography - Notion style */
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Spacing - Notion style */
  --spacing-0: 0px;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;

  /* Border radius - Notion style */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  /* Shadows - Notion style (subtle) */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

@layer base {
  * {
    @apply border-zinc-200 dark:border-zinc-800;
  }

  body {
    @apply bg-white text-zinc-950 dark:bg-zinc-950 dark:text-zinc-50;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

@layer components {
  /* Notion-style page layout */
  .notion-page {
    @apply max-w-[900px] mx-auto px-24 py-12;
  }

  /* Notion-style headings */
  .notion-h1 {
    @apply text-4xl font-bold mb-2 text-zinc-900 dark:text-zinc-50;
  }

  .notion-h2 {
    @apply text-2xl font-semibold mb-2 text-zinc-900 dark:text-zinc-50;
  }

  .notion-h3 {
    @apply text-xl font-semibold mb-2 text-zinc-900 dark:text-zinc-50;
  }

  /* Notion-style text */
  .notion-text {
    @apply text-base leading-relaxed text-zinc-700 dark:text-zinc-300;
  }

  /* Notion-style divider */
  .notion-divider {
    @apply border-t border-zinc-200 dark:border-zinc-800 my-4;
  }

  /* Notion-style hover effects */
  .notion-hover {
    @apply transition-all duration-150 hover:bg-zinc-50 dark:hover:bg-zinc-900;
  }

  /* Post Editor Grid - Notion style */
  .post-editor-grid {
    @apply grid gap-4 h-[calc(100vh-4rem)];
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {
    .post-editor-grid {
      grid-template-columns: 1fr 2fr;
    }
  }

  @media (min-width: 1024px) {
    .post-editor-grid {
      grid-template-columns: 3fr 2fr 5fr;
    }
  }

  /* Resizable panels */
  .resizable-panel {
    @apply relative overflow-hidden;
  }

  .resize-handle {
    @apply absolute top-0 right-0 w-1 h-full cursor-col-resize hover:bg-primary-500 transition-colors;
  }

  /* Scrollbar styling - Notion style */
  .notion-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgb(209 213 219) transparent;
  }

  .notion-scrollbar::-webkit-scrollbar {
    width: 8px;
  }

  .notion-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  .notion-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgb(209 213 219);
    border-radius: 4px;
  }

  .notion-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgb(156 163 175);
  }

  /* Dark mode scrollbar */
  .dark .notion-scrollbar {
    scrollbar-color: rgb(63 63 70) transparent;
  }

  .dark .notion-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgb(63 63 70);
  }

  .dark .notion-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgb(82 82 91);
  }

  /* Telegram Content Styles */
  .telegram-content {
    @apply text-[15px] leading-[1.6];
  }

  .telegram-content p {
    @apply mb-1;
  }

  .telegram-content p:last-child {
    @apply mb-0;
  }

  .telegram-content strong {
    @apply font-semibold text-zinc-900 dark:text-zinc-50;
  }

  .telegram-content em {
    @apply italic;
  }

  .telegram-content code {
    @apply bg-zinc-100 dark:bg-zinc-800 px-1.5 py-0.5 rounded text-[13px] font-mono;
  }

  .telegram-content a {
    @apply text-blue-600 dark:text-blue-400 hover:underline font-medium;
  }

  /* Telegram quote blocks */
  .telegram-content blockquote,
  .telegram-content .quote {
    @apply border-l-4 border-blue-500 bg-blue-50 dark:bg-blue-950/20 pl-3 py-2 my-2 rounded-r;
  }

  /* Telegram emoji sizing */
  .telegram-content img.emoji {
    @apply inline-block w-5 h-5 align-text-bottom;
  }

  /* Telegram list styles */
  .telegram-content ul {
    @apply list-disc list-inside space-y-1 my-2;
  }

  .telegram-content ol {
    @apply list-decimal list-inside space-y-1 my-2;
  }

  .telegram-content li {
    @apply text-zinc-900 dark:text-zinc-50;
  }
}

@layer utilities {
  /* Custom utilities */
  .text-balance {
    text-wrap: balance;
  }
}