@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;700&display=swap');

:root {
  --font-logo: 'Jost', 'DM Sans', 'Segoe UI', sans-serif;
  --font-primary: 'DM Sans', 'Segoe UI', sans-serif;
}

body[data-theme=dark] {
  --colors-primary-base: #38bdf8;
  --colors-primary-light: #93c5fd;
  --colors-primary-dark: #0ea5e9;

  --colors-gray-100: #171717;
  --colors-gray-200: #262626;
  --colors-gray-300: #404040;
  --colors-gray-400: #525252;
  --colors-gray-500: #737373;
  --colors-gray-600: #a3a3a3;
  --colors-gray-700: #d4d4d8;
  --colors-gray-800: #e5e5e5;
  --colors-gray-900: #f5f5f5;

  --colors-blue-100: #0c4a6e;
  --colors-blue-200: #075985;
  --colors-blue-300: #0369a1;
  --colors-blue-400: #0284c7;
  --colors-blue-500: #0ea5e9;
  --colors-blue-600: #38bdf8;
  --colors-blue-700: #93c5fd;
  --colors-blue-800: #bfdbfe;
  --colors-blue-900: #dbf0ff;
}

body {
  font-family: var(--font-primary);
}

.border-primary-base {
  border-color: var(--primary-400) !important;
}

/* headings */
h1,h2,h3 {
  font-family: var(--font-logo) !important;
  font-weight: 700;
  letter-spacing: -0.05em;
}
h1.text-header {  
  margin-left: 0;
}

/* tags */
a.c-tag {
  color: var(--colors-gray-700);
  background-color: var(--colors-gray-300);
  border: 1px solid var(--colors-gray-400);
  font-size: 11px;
  padding: 3px 6px;
}
a.c-tag > span {
  width: 10px;
  height: 10px;
}

/* color fixes */
body[data-theme=dark] .text-blue-700 {
  color: var(--colors-blue-700)
}
body[data-theme=dark] .bg-blue-100 {
  background-color: var(--colors-blue-100);
}

/* post list items */
div.c-posts-container__post h3.c-posts-container__post-title {
  font-size: 1.25rem;
}
body[data-theme=dark] div.c-posts-container__post p.c-posts-container__postdescription {
  color: var(--colors-gray-700);
}

/* view more posts link */
div.c-posts-container__list > div.my-4.text-center:last-child > a {
  display: block;
  background: var(--colors-gray-200);
  border: 1px solid var(--colors-gray-300);
  border-radius: 0.5rem;
  text-align: center;
  padding: 0.5rem;
}