@source '../src/**/*.ts';
@source '../src/**/*.astro';

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

@theme {
  /* 
   Match Starlight breakpoints 
   https://github.com/withastro/starlight/blob/893be3b4a106ab75b706142bbd06b00268ccc298/packages/starlight/style/util.css#L22-L43 
  */
  --breakpoint-md: 50rem;
  --breakpoint-lg: 72rem;
}

@layer utilities {
  /* Wire up Starlight theme to use Tailwind config. */
  :root {
    /* Use Tailwind-configured font families. */
    --sl-font: var(--font-sans);
    --sl-font-mono: var(--font-mono);
  }
}

:root,
::backdrop {
  --sl-content-width: 50rem;

  --sl-text-h1: var(--sl-text-3xl);
  --sl-text-h2: var(--sl-text-2xl);
  --sl-text-h3: var(--sl-text-xl);
  --sl-text-h4: var(--sl-text-lg);
  --sl-text-h5: var(--sl-text-base);
  --sl-text-h6: var(--sl-text-sm);

  /* Prevent adjustments of font size after orientation changes in iOS. */
  -webkit-text-size-adjust: 100%;
}

/* Dark mode Starlight theme variables. */
:root {
  --sl-color-white: white;
  --sl-color-gray-1: var(--color-gray-200);
  --sl-color-gray-2: var(--color-gray-300);
  --sl-color-gray-3: var(--color-gray-400);
  --sl-color-gray-4: var(--color-gray-600);
  --sl-color-gray-5: var(--color-gray-700);
  --sl-color-gray-6: var(--color-gray-800);
  --sl-color-black: var(--color-gray-950);

  --sl-color-accent-low: var(--color-gray-950);
  --sl-color-accent: var(--color-gray-600);
  --sl-color-accent-high: var(--color-gray-100);

  --sl-color-bg-inline-code: var(--color-gray-800);
  --sl-color-border-inline-code: var(--color-gray-700);
  --sl-color-bg-nav: color-mix(in oklch, var(--color-gray-950) 50%, transparent);

  --sl-color-orange-low: var(--color-amber-950);
  --sl-color-orange: var(--color-amber-900);
  --sl-color-orange-high: var(--color-amber-200);

  --sl-color-green-low: var(--color-green-950);
  --sl-color-green: var(--color-green-900);
  --sl-color-green-high: var(--color-green-200);

  --sl-color-blue-low: var(--color-blue-950);
  --sl-color-blue: var(--color-blue-900);
  --sl-color-blue-high: var(--color-blue-200);

  --sl-color-purple-low: var(--color-purple-950);
  --sl-color-purple: var(--color-purple-900);
  --sl-color-purple-high: var(--color-purple-200);

  --sl-color-red-low: var(--color-red-950);
  --sl-color-red: var(--color-red-900);
  --sl-color-red-high: var(--color-red-200);

  --nano-color-highlight: var(--sl-color-gray-5);
}

/* Light mode Starlight theme variables */
:root[data-theme='light'] {
  --sl-color-white: var(--color-gray-900);
  --sl-color-gray-1: var(--color-gray-800);
  --sl-color-gray-2: var(--color-gray-700);
  --sl-color-gray-3: var(--color-gray-500);
  --sl-color-gray-4: var(--color-gray-400);
  --sl-color-gray-5: var(--color-gray-300);
  --sl-color-gray-6: var(--color-gray-200);
  --sl-color-gray-7: var(--color-gray-100);
  --sl-color-black: white;

  --sl-color-accent-low: var(--color-gray-200);
  --sl-color-accent: var(--color-gray-800);
  --sl-color-accent-high: var(--color-gray-900);

  --sl-color-bg-inline-code: var(--color-gray-100);
  --sl-color-border-inline-code: var(--color-gray-300);
  --sl-color-bg-nav: color-mix(in oklch, var(--color-white) 80%, transparent);

  --sl-color-orange-low: var(--color-amber-100);
  --sl-color-orange: var(--color-amber-400);
  --sl-color-orange-high: var(--color-amber-800);

  --sl-color-green-low: var(--color-green-100);
  --sl-color-green: var(--color-green-400);
  --sl-color-green-high: var(--color-green-800);

  --sl-color-blue-low: var(--color-blue-100);
  --sl-color-blue: var(--color-blue-400);
  --sl-color-blue-high: var(--color-blue-800);

  --sl-color-purple-low: var(--color-purple-100);
  --sl-color-purple: var(--color-purple-400);
  --sl-color-purple-high: var(--color-purple-800);

  --sl-color-red-low: var(--color-red-100);
  --sl-color-red: var(--color-red-400);
  --sl-color-red-high: var(--color-red-800);

  --nano-color-highlight: var(--sl-color-gray-6);
}

.sl-markdown-content [data-nova-code-container] pre.astro-code,
.sl-markdown-content [data-nova-code-container] pre.astro-code code {
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  border-radius: 0;
}

@utility nova-scroll-container {
  scrollbar-width: thin;
  scrollbar-color: var(--sl-color-gray-5) transparent;
}

.sl-markdown-content .code-tabs .tablist-wrapper {
  @apply nova-scroll-container;
}