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

:root {
  --background-light: #f9f9f9;
  --text-primary-light: #222222;
  --text-secondary-light: #4a4a4a;
  --accent-light: #007aff;
  --border-light: #e0e0e0;
  --shadow-light: rgba(0, 0, 0, 0.1);

  --background-dark: #1a1a1a;
  --text-primary-dark: #f5f5f5;
  --text-secondary-dark: #cccccc;
  --accent-dark: #00bfff;
  --border-dark: #333333;
  --shadow-dark: rgba(255, 255, 255, 0.1);

  --font-stack: Chalkboard, ChalkboardSE-Regular, ChalkboardSE, ChalkDuster,
    Comic Sans MS, comic-sans, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-stack);
}

body {
  background-color: var(--background-light);
  color: var(--text-primary-light);
}

a {
  color: var(--accent-light);
}

header a {
  color: var(--text-primary-light);
}

a:hover {
  color: var(--accent-dark);
}

.prose h1 a,
.prose h2 a,
.prose h3 a,
.prose h4 a,
.prose h5 a,
.prose h6 a {
  color: var(--text-primary-light);
}

.prose h1 a:hover,
.prose h2 a:hover,
.prose h3 a:hover,
.prose h4 a:hover,
.prose h5 a:hover,
.prose h6 a:hover {
  color: var(--text-secondary-light);
}

.prose {
  color: var(--text-primary-light);
}

.prose a {
  color: var(--accent-light);
}

.prose a:hover {
  color: var(--accent-dark);
}

.shiki {
  margin: 0 !important;
}

.shiki code {
  font-family: monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-light: #1a1a1a;
    --text-primary-light: #f5f5f5;
    --text-secondary-light: #cccccc;
    --accent-light: #00bfff;
    --border-light: #333333;
    --shadow-light: rgba(255, 255, 255, 0.1);

    --background-dark: #f9f9f9;
    --text-primary-dark: #222222;
    --text-secondary-dark: #4a4a4a;
    --accent-dark: #007aff;
    --border-dark: #e0e0e0;
    --shadow-dark: rgba(0, 0, 0, 0.1);
  }
  .shiki,
  .shiki span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    /* Optional, if you also want font styles */
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }
}