/* CSS Variables - Single source of truth */
:root {
  /* Layout */
  --gap: 24px;
  --content-gap: 20px;
  --nav-width: 1024px;
  --main-width: 720px;
  --header-height: 60px;
  --footer-height: 60px;
  --radius: 8px;

  /* Colors - Light theme base */
  --theme: rgb(255, 255, 255);
  --entry: rgb(255, 255, 255);
  --primary: rgb(30, 30, 30);
  --secondary: rgb(108, 108, 108);
  --tertiary: rgb(214, 214, 214);
  --content: rgb(31, 31, 31);
  --hljs-bg: rgb(28, 29, 33);
  --code-bg: rgb(245, 245, 245);
  --border: rgb(238, 238, 238);
  --link: #0b82b9;

  /* Typography colors */
  --background-primary: #101010;
  --text-primary: #e5e5e5;
  --text-secondary: #999;
  --text-accent: #ff9800;
  --text-muted: #666;

  /* Component colors */
  --card-bg: #1a1a1a;
  --border-color: #333;
  --hover-bg: rgba(255, 152, 0, 0.1);

  /* Anthropic-style font stack - Modern, clean sans-serif */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --default-font: var(--font-sans);

  /* Spacing System */
  --spacing-xs: 0.25rem;  /* 4px - Minimal spacing, inner padding */
  --spacing-sm: 0.5rem;   /* 8px - Small gaps, list items */
  --spacing-md: 1rem;     /* 16px - Default spacing, paragraph margins */
  --spacing-lg: 1.5rem;   /* 24px - Section spacing, image margins */
  --spacing-xl: 2rem;     /* 32px - Large section breaks, heading top margin */
  --spacing-2xl: 3rem;    /* 48px - Major section divisions */
}

/* Dark theme overrides */
.dark {
  --theme: rgb(29, 30, 32);
  --entry: rgb(46, 46, 51);
  --primary: rgb(218, 218, 219);
  --secondary: rgb(155, 156, 157);
  --tertiary: rgb(65, 66, 68);
  --content: rgb(196, 196, 197);
  --hljs-bg: rgb(46, 46, 51);
  --code-bg: rgb(13, 13, 13);
  --border: rgb(51, 51, 51);
}

/* Material Design theme variables */
.md-content,
.post-content,
.theme-dark {
  --background-primary: #101010;
  --text-primary: #e5e5e5;
  --text-secondary: #999;
  --text-accent: #ff9800;
  --text-muted: #666;
  --card-bg: #1a1a1a;
  --border-color: #333;
  --hover-bg: rgba(255, 152, 0, 0.1);
}