:root {
  /* Light theme (default) */
  --color-background: #fff1e5;
  --color-background-lighter: #fcf7f2;
  --color-text-primary: #444444;
  --color-text-medium: #666666;
  --color-text-light: #8a8a8a;
  --color-text-body: #6f6f6f;

  --color-primary: #d7634a;
  --color-primary-hover: #c15540;
  --color-secondary: #96cdd4;
  --color-secondary-hover: #10596f;
  --color-tertiary: #b6af9c;
  --color-tertiary-hover: #a09987;
  --color-success: #3d7652;
  --color-warning: #cb8d38;
  --color-error: #b33a3a;
  --color-info: #3b6789;

  --color-scrollbar-thumb: #d7634a;
  --color-scrollbar-thumb-hover: #c15540;
  --color-scrollbar-track: #fff1e5;

  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;

  --border-radius: 4px;

  /* Scrollbar properties */
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #1a1a1a;
    --color-text-primary: #e5e5e5;
    --color-text-medium: #cccccc;
    --color-text-light: #999999;
    --color-text-body: #b3b3b3;

    --color-primary: #ff7a5c;
    --color-primary-hover: #ff6542;
    --color-secondary: #7db8c4;
    --color-secondary-hover: #6ba3b0;
    --color-tertiary: #c4bda8;
    --color-tertiary-hover: #b8b099;
    --color-success: #5a9c73;
    --color-warning: #e5a64a;
    --color-error: #d64545;
    --color-info: #5c8db8;

    --color-scrollbar-thumb: #666666;
    --color-scrollbar-thumb-hover: #777777;
    --color-scrollbar-track: rgba(0, 0, 0, 0);
  }
}

/* WebKit scrollbars (separate from :root) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  transition: width 0.2s ease-in-out;
}

::-webkit-scrollbar:hover {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-hover);
}

/* Source Sans Pro */
@font-face {
  font-family: "Source Sans Pro";
  src: url("/source-sans-pro/SourceSansPro-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/source-sans-pro/SourceSansPro-LightIt.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/source-sans-pro/SourceSansPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/source-sans-pro/SourceSansPro-It.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/source-sans-pro/SourceSansPro-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/source-sans-pro/SourceSansPro-SemiboldIt.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/source-sans-pro/SourceSansPro-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("/source-sans-pro/SourceSansPro-BoldIt.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
}

/* Source Serif Pro */
@font-face {
  font-family: "Source Serif Pro";
  src: url("/source-serif-pro/SourceSerifPro-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Source Serif Pro";
  src: url("/source-serif-pro/SourceSerifPro-LightIt.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Source Serif Pro";
  src: url("/source-serif-pro/SourceSerifPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Source Serif Pro";
  src: url("/source-serif-pro/SourceSerifPro-It.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Source Serif Pro";
  src: url("/source-serif-pro/SourceSerifPro-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Source Serif Pro";
  src: url("/source-serif-pro/SourceSerifPro-SemiboldIt.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "Source Serif Pro";
  src: url("/source-serif-pro/SourceSerifPro-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Source Serif Pro";
  src: url("/source-serif-pro/SourceSerifPro-BoldIt.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
}

html,
body {
  margin: 0;
  padding: 0;
  moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-size: 18px;
  max-width: 100vw;
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: "Source Sans Pro", sans-serif;
}

@media (max-width: 768px) {
  html,
  body {
    font-size: 16px;
  }
}

a {
  color: inherit;
}

a:visited {
  color: var(--color-secondary);
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.625em;
}

h3 {
  font-size: 1.375em;
}

h4 {
  font-size: 1.125em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: inherit;
  margin: 0;
  font-weight: 400;
}

markdown-renderer pre {
  overflow: auto;
  font-size: 0.875em;
  scrollbar-width: thin;
  padding: var(--spacing-sm);
  background-color: var(--color-background-lighter);
  border-radius: var(--border-radius);
}

markdown-renderer table {
  border-collapse: collapse;
}

markdown-renderer table th,
markdown-renderer table td {
  border: solid var(--color-text-light) 1px;
  padding: 0.3em 0.4em;
}

markdown-renderer h1,
markdown-renderer h2,
markdown-renderer h3,
markdown-renderer h4,
markdown-renderer h5,
markdown-renderer h6 {
  margin: 1em 0 0.625em 0;
}

markdown-renderer strong {
  font-weight: 600;
}