@import "tailwindcss";
@import "highlight.js/styles/github.css" layer(base);
@plugin "@tailwindcss/typography";
@source "../node_modules/@better-i18n/ui";

/* Self-hosted Geist fonts (variable woff2 from geist npm package) */
@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Dark mode — class-based, toggled via localStorage */
@custom-variant dark (&:is(.dark *));

@theme {
  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;

  --color-mist-50: #f7f8f8;
  --color-mist-100: #eef0f1;
  --color-mist-200: #dfe4e6;
  --color-mist-300: #c9d1d5;
  --color-mist-400: #9ba8af;
  --color-mist-500: #6d7d85;
  --color-mist-600: #566268;
  --color-mist-700: #475257;
  --color-mist-800: #333b3f;
  --color-mist-900: #262d30;
  --color-mist-950: #181c1e;

  --color-background: #ffffff;
  --color-foreground: #181c1e;
  --color-card: #ffffff;
  --color-border: #dfe4e6;
  --color-muted: #eef0f1;
  --color-muted-foreground: #6d7d85;

  --color-white: oklch(1 0 0);
  --color-gray-50: oklch(0.985 0 0);
  --color-gray-100: oklch(0.97 0 0);
  --color-gray-200: oklch(0.922 0 0);
  --color-gray-300: oklch(0.855 0 0);
  --color-gray-400: oklch(0.708 0 0);
  --color-gray-500: oklch(0.556 0 0);
  --color-gray-600: oklch(0.439 0 0);
  --color-gray-700: oklch(0.371 0 0);
  --color-gray-800: oklch(0.269 0 0);
  --color-gray-900: oklch(0.205 0 0);
  --color-black: oklch(0 0 0);
}

@layer base {
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  html {
    scroll-padding-top: 5.25rem;
  }

  body {
    font-family: var(--font-sans);
    background-color: var(--color-background);
    color: var(--color-mist-950);
  }

  /* Dark mode overrides */
  .dark {
    --color-background: #0f1214;
    --color-foreground: #e8eaec;
    --color-card: #181c1e;
    --color-border: #2a3135;
    --color-muted: #1e2428;
    --color-muted-foreground: #9ba8af;

    --color-mist-50: #141a1d;
    --color-mist-100: #1a2226;
    --color-mist-200: #2a3135;
    --color-mist-300: #3a444a;
    --color-mist-400: #6d7d85;
    --color-mist-500: #9ba8af;
    --color-mist-600: #b8c2c8;
    --color-mist-700: #cdd4d8;
    --color-mist-800: #dfe4e6;
    --color-mist-900: #eef0f1;
    --color-mist-950: #f7f8f8;
  }
}

@layer components {
  /* Article prose styling — mist color theme via CSS vars */
  .help-prose {
    @apply prose max-w-none;
    --tw-prose-body: var(--color-mist-700);
    --tw-prose-headings: var(--color-mist-950);
    --tw-prose-lead: var(--color-mist-600);
    --tw-prose-links: var(--color-mist-950);
    --tw-prose-bold: var(--color-mist-950);
    --tw-prose-counters: var(--color-mist-500);
    --tw-prose-bullets: var(--color-mist-400);
    --tw-prose-hr: var(--color-mist-200);
    --tw-prose-quotes: var(--color-mist-600);
    --tw-prose-quote-borders: var(--color-mist-300);
    --tw-prose-captions: var(--color-mist-500);
    --tw-prose-kbd: var(--color-mist-950);
    --tw-prose-kbd-shadows: var(--color-mist-950);
    --tw-prose-code: var(--color-mist-950);
    --tw-prose-th-borders: var(--color-mist-300);
    --tw-prose-td-borders: var(--color-mist-200);
    @apply prose-headings:scroll-mt-20 prose-headings:font-semibold prose-headings:tracking-tight;
    @apply prose-h2:text-xl prose-h2:mt-10 prose-h2:mb-4;
    @apply prose-h3:text-lg prose-h3:mt-8 prose-h3:mb-3;
    @apply prose-p:leading-relaxed;
    @apply prose-a:underline prose-a:decoration-mist-300 hover:prose-a:decoration-mist-500;
    @apply prose-code:rounded prose-code:bg-mist-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:text-sm prose-code:font-medium prose-code:before:content-[''] prose-code:after:content-[''];
    @apply prose-img:rounded-xl prose-img:border prose-img:border-mist-200;
    @apply prose-li:text-mist-700;
  }

  /* Code block styling — uses CSS vars so dark mode remap works */
  .help-prose pre {
    border-radius: 0.75rem;
    border: 1px solid var(--color-mist-200);
    background-color: var(--color-mist-50) !important;
  }

  .help-prose pre code {
    background-color: transparent !important;
    color: var(--color-mist-900);
    padding: 0;
    border-radius: 0;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.625;
  }

  /* Inline code — stronger contrast */
  .help-prose :not(pre) > code {
    color: var(--color-mist-950);
    background-color: var(--color-mist-200);
  }

  /* Dark mode: override highlight.js github theme colors */
  .dark .help-prose pre,
  .dark .hljs {
    background-color: var(--color-mist-50) !important;
    color: var(--color-mist-800);
  }

  .dark .hljs-keyword,
  .dark .hljs-selector-tag,
  .dark .hljs-type { color: #ff7b72; }
  .dark .hljs-string,
  .dark .hljs-attr { color: #a5d6ff; }
  .dark .hljs-title,
  .dark .hljs-function { color: #d2a8ff; }
  .dark .hljs-comment { color: #8b949e; }
  .dark .hljs-number,
  .dark .hljs-literal { color: #79c0ff; }
  .dark .hljs-built_in { color: #ffa657; }
  .dark .hljs-params { color: var(--color-mist-800); }
  .dark .hljs-meta { color: #79c0ff; }

  /* Search highlight */
  .search-highlight mark {
    @apply bg-amber-100 text-amber-900 rounded-sm px-0.5;
  }

  .dark .search-highlight mark {
    @apply bg-amber-900/40 text-amber-200;
  }
}

/* ─── Command Palette Animations ──────────────────────────────────── */

@keyframes cmd-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes cmd-content-in {
  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes cmd-content-out {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.95) translateY(-8px); }
}
