/* Design Tokens */

:root {
  /* Color palette */
  --color-ink: #1a1a18;
  --color-paper: #f7f5f0;
  --color-paper-alt: #edeae3;
  --color-mid: #8a8578;
  --color-accent: #2d6a4f;
  --color-accent-light: #40916c;
  --color-warm: #c17f3e;
  --color-red: #b44636;
  --color-border: #d4d0c8;
  --color-card: #ffffff;
  --color-card-border: #e2dfd8;
  --color-code-bg: #f0ede6;
  --color-tag-bg: #e8f5ee;
  --color-tag-text: #2d6a4f;
  --color-success: #40916c;
  --color-warning: #c17f3e;
  --color-error: #b44636;

  /* Typography */
  --font-serif: 'Georgia', 'Times New Roman', serif;
  --font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Menlo', monospace;

  /* Type scale */
  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-base: 1rem;
  --text-lg: 1.05rem;
  --text-xl: 1.3rem;
  --text-2xl: 1.6rem;
  --text-3xl: 2rem;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3rem;

  /* Borders and Radii */
  --border-sm: 1px;
  --border-md: 2px;
  --radius-sm: 3px;
  --radius-md: 6px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* Z-index */
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-toast: 2000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-ink: #e8e4dc;
    --color-paper: #191917;
    --color-paper-alt: #222220;
    --color-mid: #8a8578;
    --color-accent: #52b788;
    --color-accent-light: #74c69d;
    --color-warm: #d4943f;
    --color-red: #d4645a;
    --color-border: #3a3832;
    --color-card: #242422;
    --color-card-border: #3a3832;
    --color-code-bg: #2a2926;
    --color-tag-bg: #1e3a2c;
    --color-tag-text: #74c69d;
    --color-success: #74c69d;
    --color-warning: #d4943f;
    --color-error: #d4645a;
  }
}

:root[data-theme="dark"] {
  --color-ink: #e8e4dc;
  --color-paper: #191917;
  --color-paper-alt: #222220;
  --color-mid: #8a8578;
  --color-accent: #52b788;
  --color-accent-light: #74c69d;
  --color-warm: #d4943f;
  --color-red: #d4645a;
  --color-border: #3a3832;
  --color-card: #242422;
  --color-card-border: #3a3832;
  --color-code-bg: #2a2926;
  --color-tag-bg: #1e3a2c;
  --color-tag-text: #74c69d;
  --color-success: #74c69d;
  --color-warning: #d4943f;
  --color-error: #d4645a;
}

:root[data-theme="light"] {
  --color-ink: #1a1a18;
  --color-paper: #f7f5f0;
  --color-paper-alt: #edeae3;
  --color-mid: #8a8578;
  --color-accent: #2d6a4f;
  --color-accent-light: #40916c;
  --color-warm: #c17f3e;
  --color-red: #b44636;
  --color-border: #d4d0c8;
  --color-card: #ffffff;
  --color-card-border: #e2dfd8;
  --color-code-bg: #f0ede6;
  --color-tag-bg: #e8f5ee;
  --color-tag-text: #2d6a4f;
  --color-success: #40916c;
  --color-warning: #c17f3e;
  --color-error: #b44636;
}