@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --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 72.2% 50.6%;
    --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.625rem;
  }

  .dark {
    --background: 222.2 47.4% 7%;
    --foreground: 210 40% 98%;

    --card: 222.2 47.4% 9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 47.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%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }
  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
  :focus-visible {
    @apply outline-2 outline-offset-2 outline-ring;
  }
  /* Respect users that prefer reduced motion. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer components {
  /* The editor route uses a full-height layout (see SiteShell): the parent
   * <main> is exactly 100dvh - header-height, so the shell can simply fill
   * its parent. */
  .editor-shell {
    height: 100%;
  }
  /* Focus mode: expand the editor to fill the entire viewport. */
  .editor-shell[data-focus="true"] {
    position: fixed;
    inset: 0;
    height: 100dvh;
    z-index: 50;
  }

  /* Custom scrollbar for editor surfaces. */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--muted-foreground) / 0.4) transparent;
  }
  .scrollbar-thin::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: hsl(var(--muted-foreground) / 0.35);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--muted-foreground) / 0.6);
  }

  /* Markdown preview styling: extends Tailwind Typography. */
  .markdown-preview {
    @apply prose prose-slate max-w-none dark:prose-invert
      prose-headings:scroll-mt-24 prose-headings:font-semibold prose-headings:tracking-tight
      prose-a:font-medium prose-a:text-primary hover:prose-a:underline
      prose-code:rounded prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:text-[0.9em] prose-code:font-medium prose-code:before:hidden prose-code:after:hidden
      prose-pre:rounded-xl prose-pre:border prose-pre:border-border prose-pre:bg-muted/40 prose-pre:p-0
      prose-img:rounded-lg prose-img:border prose-img:border-border
      prose-blockquote:not-italic prose-blockquote:border-l-4 prose-blockquote:border-primary/40
      prose-table:overflow-hidden prose-table:rounded-lg prose-table:border prose-table:border-border
      prose-th:bg-muted prose-th:px-4 prose-th:py-2
      prose-td:px-4 prose-td:py-2 prose-tr:border-border;
  }

  .markdown-preview pre code {
    @apply block bg-transparent p-4 text-sm;
  }

  /* Highlight.js minimal theme bridge — neutral, respects dark/light. */
  .markdown-preview .hljs {
    background: transparent;
    color: hsl(var(--foreground));
  }
  .markdown-preview .hljs-comment,
  .markdown-preview .hljs-quote {
    color: hsl(var(--muted-foreground));
    font-style: italic;
  }
  .markdown-preview .hljs-keyword,
  .markdown-preview .hljs-selector-tag,
  .markdown-preview .hljs-subst {
    color: hsl(221 83% 53%);
  }
  .markdown-preview .hljs-string,
  .markdown-preview .hljs-doctag {
    color: hsl(142 71% 45%);
  }
  .markdown-preview .hljs-number,
  .markdown-preview .hljs-literal {
    color: hsl(25 95% 53%);
  }
  .markdown-preview .hljs-title,
  .markdown-preview .hljs-section,
  .markdown-preview .hljs-name {
    color: hsl(262 83% 58%);
  }
  .markdown-preview .hljs-attribute,
  .markdown-preview .hljs-symbol,
  .markdown-preview .hljs-bullet {
    color: hsl(330 81% 60%);
  }

  /* Task list checkboxes from remark-gfm. */
  .markdown-preview input[type="checkbox"] {
    @apply mr-2 h-4 w-4 rounded border-border align-middle;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .text-pretty {
    text-wrap: pretty;
  }
  .bg-grid {
    background-image:
      linear-gradient(to right, hsl(var(--border) / 0.4) 1px, transparent 1px),
      linear-gradient(to bottom, hsl(var(--border) / 0.4) 1px, transparent 1px);
    background-size: 32px 32px;
  }
  /* Radial gradient used as a hero glow. */
  .hero-glow {
    background:
      radial-gradient(ellipse at 50% 0%, hsl(var(--primary) / 0.18), transparent 60%),
      radial-gradient(ellipse at 80% 30%, hsl(280 90% 60% / 0.12), transparent 55%);
  }
}

/* Print styles — used by "Print preview" toolbar action. */
@media print {
  nav,
  footer,
  .no-print {
    display: none !important;
  }
  body {
    background: white !important;
    color: black !important;
  }
  .markdown-preview {
    max-width: 100% !important;
  }
}