/* YetiSearch Pro Theme Variables
   Shared color palette using Tailwind zinc scale
   Override these variables in your custom CSS for theming
*/

:root {
  /* ═══════════════════════════════════════════════════════════════
     LIGHT MODE (default)
     Using Tailwind zinc scale for neutral grays
     ═══════════════════════════════════════════════════════════════ */

  /* Core palette - Tailwind zinc */
  --ys-zinc-50: #fafafa;
  --ys-zinc-100: #f4f4f5;
  --ys-zinc-200: #e4e4e7;
  --ys-zinc-300: #d4d4d8;
  --ys-zinc-400: #a1a1aa;
  --ys-zinc-500: #71717a;
  --ys-zinc-600: #52525b;
  --ys-zinc-700: #3f3f46;
  --ys-zinc-800: #27272a;
  --ys-zinc-900: #18181b;
  --ys-zinc-950: #09090b;

  /* Accent color */
  --ys-accent: #3b82f6;
  --ys-accent-hover: #2563eb;
  --ys-accent-subtle: rgba(59, 130, 246, 0.1);
  --ys-accent-ring: rgba(59, 130, 246, 0.25);

  /* Semantic colors - Light mode */
  --ys-overlay-bg: rgba(0, 0, 0, 0.5);
  --ys-overlay-blur: blur(4px);

  --ys-dialog-bg: var(--ys-zinc-50);
  --ys-dialog-border: var(--ys-zinc-200);
  --ys-dialog-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  --ys-panel-bg: #ffffff;
  --ys-panel-alt: var(--ys-zinc-100);

  --ys-text: var(--ys-zinc-900);
  --ys-text-secondary: var(--ys-zinc-600);
  --ys-text-muted: var(--ys-zinc-400);

  --ys-border: var(--ys-zinc-200);
  --ys-border-subtle: var(--ys-zinc-100);

  --ys-input-bg: transparent;
  --ys-input-text: var(--ys-zinc-900);
  --ys-input-placeholder: var(--ys-zinc-400);

  --ys-result-hover: var(--ys-zinc-100);
  --ys-result-selected-bg: var(--ys-accent-subtle);
  --ys-result-selected-ring: var(--ys-accent-ring);

  --ys-highlight-bg: #fef08a;
  --ys-highlight-text: inherit;

  --ys-kbd-bg: var(--ys-zinc-100);
  --ys-kbd-text: var(--ys-zinc-600);

  --ys-scrollbar-track: transparent;
  --ys-scrollbar-thumb: rgba(161, 161, 170, 0.3);
  --ys-scrollbar-thumb-hover: rgba(161, 161, 170, 0.5);

  /* Segment/toggle controls */
  --ys-segment-bg: transparent;
  --ys-segment-active-bg: var(--ys-zinc-800);
  --ys-segment-active-text: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   Triggered by data-theme="dark", class="dark", or data-ys-theme="dark"
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"],
.dark,
[data-ys-theme="dark"] {
  --ys-overlay-bg: rgba(0, 0, 0, 0.7);

  --ys-dialog-bg: var(--ys-zinc-900);
  --ys-dialog-border: var(--ys-zinc-700);

  --ys-panel-bg: var(--ys-zinc-900);
  --ys-panel-alt: var(--ys-zinc-800);

  --ys-text: var(--ys-zinc-100);
  --ys-text-secondary: var(--ys-zinc-400);
  --ys-text-muted: var(--ys-zinc-500);

  --ys-border: var(--ys-zinc-700);
  --ys-border-subtle: var(--ys-zinc-800);

  --ys-input-text: var(--ys-zinc-100);
  --ys-input-placeholder: var(--ys-zinc-500);

  --ys-result-hover: rgba(63, 63, 70, 0.5);
  --ys-result-selected-bg: rgba(59, 130, 246, 0.15);

  --ys-highlight-bg: rgba(234, 179, 8, 0.35);
  --ys-highlight-text: var(--ys-zinc-100);

  --ys-kbd-bg: var(--ys-zinc-800);
  --ys-kbd-text: var(--ys-zinc-400);

  --ys-scrollbar-thumb: rgba(82, 82, 91, 0.5);
  --ys-scrollbar-thumb-hover: rgba(82, 82, 91, 0.7);

  --ys-segment-active-bg: rgba(255, 255, 255, 0.12);
}