@layer base, starlight, theme, components, utilities;

@import '@astrojs/starlight-tailwind';
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

@theme {
  --color-accent-50: var(--color-sky-50);
  --color-accent-100: var(--color-sky-100);
  --color-accent-200: var(--color-sky-200);
  --color-accent-300: var(--color-sky-300);
  --color-accent-400: var(--color-sky-400);
  --color-accent-500: var(--color-sky-500);
  --color-accent-600: var(--color-sky-600);
  --color-accent-700: var(--color-sky-700);
  --color-accent-800: var(--color-sky-800);
  --color-accent-900: var(--color-sky-900);
  --color-accent-950: var(--color-sky-950);

  --color-gray-50: var(--color-slate-50);
  --color-gray-100: var(--color-slate-100);
  --color-gray-200: var(--color-slate-200);
  --color-gray-300: var(--color-slate-300);
  --color-gray-400: var(--color-slate-400);
  --color-gray-500: var(--color-slate-500);
  --color-gray-600: var(--color-slate-600);
  --color-gray-700: var(--color-slate-700);
  --color-gray-800: var(--color-slate-800);
  --color-gray-900: var(--color-slate-900);
  --color-gray-950: var(--color-slate-950);
}

:root {
  /* Colors (dark mode) */
  --sl-color-white: theme('colors.slate.100');
  --sl-color-gray-1: theme('colors.slate.200');
  --sl-color-gray-2: theme('colors.slate.300');
  --sl-color-gray-3: theme('colors.slate.400');
  --sl-color-gray-4: theme('colors.slate.600');
  --sl-color-gray-5: theme('colors.slate.700');
  --sl-color-gray-6: theme('colors.slate.800');
  --sl-color-black: theme('colors.slate.900');

  --sl-color-orange-low: theme('colors.orange.900');
  --sl-color-orange: theme('colors.orange.500');
  --sl-color-orange-high: theme('colors.orange.200');

  --sl-color-green-low: theme('colors.green.800');
  --sl-color-green: theme('colors.green.500');
  --sl-color-green-high: theme('colors.green.200');

  --sl-color-blue-low: theme('colors.sky.800');
  --sl-color-blue: theme('colors.sky.500');
  --sl-color-blue-high: theme('colors.sky.200');

  --sl-color-purple-low: theme('colors.violet.800');
  --sl-color-purple: theme('colors.violet.500');
  --sl-color-purple-high: theme('colors.violet.200');

  --sl-color-red-low: theme('colors.red.800');
  --sl-color-red: theme('colors.red.500');
  --sl-color-red-high: theme('colors.red.200');

  --sl-color-accent-low: theme('colors.slate.900');
  --sl-color-accent: theme('colors.sky.700');
  --sl-color-accent-high: theme('colors.slate.100');

  --sl-color-text: theme('colors.slate.300');
  --sl-color-text-accent: theme('colors.slate.100');
  --sl-color-text-invert: theme('colors.slate.900');
  --sl-color-bg: theme('colors.slate.900');
  --sl-color-bg-nav: theme('colors.slate.800');
  --sl-color-bg-sidebar: theme('colors.slate.800');
  --sl-color-bg-inline-code: theme('colors.slate.700');
  --sl-color-bg-accent: var(--sl-color-accent-high);
  --sl-color-hairline-light: theme('colors.slate.700');
  --sl-color-hairline: theme('colors.slate.800');
  --sl-color-hairline-shade: theme('colors.slate.900');

  --sl-color-backdrop-overlay: rgb(15, 23, 42, 0.66); /* Shadows (dark mode) */
  --sl-shadow-sm: 0px 1px 1px hsla(15, 23, 42, 0.12), 0px 2px 1px hsla(0, 0%, 0%, 0.24);
  --sl-shadow-md:
    0px 8px 4px hsla(0, 0%, 0%, 0.08), 0px 5px 2px hsla(0, 0%, 0%, 0.08), 0px 3px 2px hsla(0, 0%, 0%, 0.12),
    0px 1px 1px hsla(0, 0%, 0%, 0.15);
  --sl-shadow-lg:
    0px 25px 7px hsla(0, 0%, 0%, 0.03), 0px 16px 6px hsla(0, 0%, 0%, 0.1), 0px 9px 5px hsla(15, 23, 42, 0.33),
    0px 4px 4px hsla(0, 0%, 0%, 0.75), 0px 4px 2px hsla(0, 0%, 0%, 0.25);

  /* Text size and line height */
  --sl-text-xs: 0.8125rem; /* 13px */
  --sl-text-sm: 0.875rem; /* 14px */
  --sl-text-base: 1rem; /* 16px */
  --sl-text-lg: 1.125rem; /* 18px */
  --sl-text-xl: 1.25rem; /* 20px */
  --sl-text-2xl: 1.5rem; /* 24px */
  --sl-text-3xl: 1.8125rem; /* 29px */
  --sl-text-4xl: 2.1875rem; /* 35px */
  --sl-text-5xl: 2.625rem; /* 42px */
  --sl-text-6xl: 4rem; /* 64px */

  --sl-text-body: var(--sl-text-sm);
  --sl-text-body-sm: var(--sl-text-xs);
  --sl-text-code: var(--sl-text-sm);
  --sl-text-code-sm: var(--sl-text-xs);
  --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-line-height: 1.5;
  --sl-line-height-headings: 1.2;

  --sl-font-system:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --sl-font-system-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --__sl-font: var(--sl-font, var(--sl-font-system)), var(--sl-font-system);
  --__sl-font-mono: var(--sl-font-mono, var(--sl-font-system-mono)), var(--sl-font-system-mono);

  /** Key layout values */
  --sl-nav-height: 3.5rem;
  --sl-nav-pad-x: 1rem;
  --sl-nav-pad-y: 0.75rem;
  --sl-mobile-toc-height: 3rem;
  --sl-sidebar-width: 18.75rem;
  --sl-sidebar-pad-x: 1rem;
  --sl-content-width: 45rem;
  --sl-content-pad-x: 1rem;
  --sl-menu-button-size: 2rem;
  --sl-nav-gap: var(--sl-content-pad-x);
  /* Offset required to show outline inside an element instead of round the outside */
  --sl-outline-offset-inside: -0.1875rem;

  /* Global z-index values */
  --sl-z-index-toc: 4;
  --sl-z-index-menu: 5;
  --sl-z-index-navbar: 10;
  --sl-z-index-skiplink: 20;
}

:root[data-theme='light'] {
  /* Colours (light mode) */
  --sl-color-white: theme('colors.slate.900');
  --sl-color-gray-1: theme('colors.slate.800');
  --sl-color-gray-2: theme('colors.slate.700');
  --sl-color-gray-3: theme('colors.slate.600');
  --sl-color-gray-4: theme('colors.slate.400');
  --sl-color-gray-5: theme('colors.slate.300');
  --sl-color-gray-6: theme('colors.slate.200');
  --sl-color-black: theme('colors.slate.100');

  --sl-color-orange-low: theme('colors.orange.300');
  --sl-color-orange: theme('colors.orange.600');
  --sl-color-orange-high: theme('colors.orange.900');

  --sl-color-green-low: theme('colors.green.300');
  --sl-color-green: theme('colors.green.600');
  --sl-color-green-high: theme('colors.green.900');

  --sl-color-blue-low: theme('colors.sky.200');
  --sl-color-blue: theme('colors.sky.500');
  --sl-color-blue-high: theme('colors.sky.900');

  --sl-color-purple-low: theme('colors.violet.300');
  --sl-color-purple: theme('colors.violet.600');
  --sl-color-purple-high: theme('colors.violet.900');

  --sl-color-red-low: theme('colors.red.300');
  --sl-color-red: theme('colors.red.600');
  --sl-color-red-high: theme('colors.red.900');

  --sl-color-accent-low: theme('colors.slate.100');
  --sl-color-accent: theme('colors.sky.500');
  --sl-color-accent-high: theme('colors.slate.700');

  --sl-color-text: theme('colors.slate.700');
  --sl-color-text-accent: theme('colors.slate.700');
  --sl-color-text-invert: theme('colors.slate.100');
  --sl-color-bg: theme('colors.slate.100');
  --sl-color-bg-nav: theme('colors.slate.50');
  --sl-color-bg-sidebar: theme('colors.slate.50');
  --sl-color-bg-inline-code: theme('colors.slate.200');
  --sl-color-bg-accent: var(--sl-color-accent-high);
  --sl-color-hairline-light: theme('colors.slate.100');
  --sl-color-hairline: theme('colors.slate.300');
  --sl-color-hairline-shade: theme('colors.slate.200');

  --sl-color-backdrop-overlay: hsla(225, 9%, 36%, 0.66);

  /* Shadows (light mode) */
  --sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.06), 0px 2px 1px hsla(0, 0%, 0%, 0.06);
  --sl-shadow-md:
    0px 8px 4px hsla(0, 0%, 0%, 0.03), 0px 5px 2px hsla(0, 0%, 0%, 0.03), 0px 3px 2px hsla(0, 0%, 0%, 0.06),
    0px 1px 1px hsla(0, 0%, 0%, 0.06);
  --sl-shadow-lg:
    0px 25px 7px rgba(0, 0, 0, 0.01), 0px 16px 6px hsla(0, 0%, 0%, 0.03), 0px 9px 5px hsla(223, 13%, 10%, 0.08),
    0px 4px 4px hsla(0, 0%, 0%, 0.16), 0px 4px 2px hsla(0, 0%, 0%, 0.04);
}

@media (min-width: 50em) {
  :root {
    --sl-nav-height: 4rem;
    --sl-nav-pad-x: 1.5rem;
    --sl-text-h1: var(--sl-text-4xl);
    --sl-text-h2: var(--sl-text-3xl);
    --sl-text-h3: var(--sl-text-2xl);
    --sl-text-h4: var(--sl-text-xl);
  }
}

@media (min-width: 72rem) {
  :root {
    --sl-content-pad-x: 1.5rem;
    --sl-mobile-toc-height: 0rem;
  }
}

.sl-markdown-content a {
  color: var(--sl-color-text);
  text-decoration: underline;
}

.pagination-links {
  /* display: none; */
  font-size: var(--sl-text-sm);
}

.pagination-links .link-title {
  /* display: none; */
  font-size: var(--sl-text-xl);
}

.pagination-links > a:hover {
  border-color: var(--sl-color-gray-4);
}

.tab > a {
  padding: 0.5rem 1.5rem !important;
}

.underline {
  text-decoration: underline;
}
