/* CSS Custom Properties */
:root {
  /* Light theme colors */
  --color-primary: #a28a65;
  --color-primary-hover: #a28a65;
  --color-border: #3c096f;
  --color-callout: #a28a65;
  --color-text: #232333;
  --color-text-muted: #880b0b;
  --color-text-meta: #999999;
  --color-background: #e0d7c2;
  --color-background-code: #cccccc;
  --color-background-pre: #cccccc;
  --color-background-toc: #ececec;
  --color-background-draft: #f9f2f4;
  
  /* Dark theme colors */
  --color-primary-dark: #0e5f3f;
  --color-primary-hover-dark: #3dd458;
  --color-border-dark: #002a60;
  --color-text-dark: #a28a65;
  --color-text-muted-dark: #a28a65;
  --color-background-dark: #000000;
  --color-background-code-dark: #3a3131;
  --color-background-pre-dark: #272822;
  --color-background-toc-dark: #272822;
  --color-background-draft-dark: #0066ff;
  
  /* Spacing and sizing */
  --content-max-width: 800px;
  --content-padding: 1ch;
  --border-radius: 5px;
  --font-size-base: 15px;
  --line-height-base: 1.6;
  --line-height-content: 1.5;
}

/* Callout variants */
.callout-alert {
  color: #880b0b;
  background-color: #f8d7da;
  border: 3px solid #880b0b;
}

.callout-tip {
  color: #002a65;
  background-color: #d1ecf1;
  border: 3px solid #002a65;
}

.callout-warning {
  color: #664d03;
  background-color: #fff3cd;
  border: 3px solid #a28a65;
}