@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Core Theme Palette */
  --color-primary-brown: #713600;
  --color-accent-orange: #C05800;
  --color-warm-bg: #FDFBD4;
  --color-dark-brown: #38240D;

  /* Surface & Container Colors */
  --color-surface-white: #FFFFFF;
  --color-surface-card: #F8F3DC;
  --color-surface-card-hover: #F2EBC6;
  --color-surface-sidebar: #F5EFCF;
  --color-border-subtle: #E8DEB6;
  --color-border-strong: #CFC194;

  /* Typography Colors */
  --color-text-main: #38240D;
  --color-text-muted: #6B5539;
  --color-text-light: #8C7558;
  --color-text-inverse: #FDFBD4;
  --color-link: #C05800;
  --color-link-hover: #713600;

  /* 9 Specialized Callout & Feedback Palette Tokens */
  --color-note-bg: #EFF6FF;
  --color-note-border: #3B82F6;
  --color-note-text: #1E3A8A;
  --color-note-icon: #2563EB;

  --color-tip-bg: #F0FDF4;
  --color-tip-border: #22C55E;
  --color-tip-text: #14532D;
  --color-tip-icon: #16A34A;

  --color-warning-bg: #FFFBEB;
  --color-warning-border: #F59E0B;
  --color-warning-text: #78350F;
  --color-warning-icon: #D97706;

  --color-danger-bg: #FEF2F2;
  --color-danger-border: #EF4444;
  --color-danger-text: #7F1D1D;
  --color-danger-icon: #DC2626;

  --color-bestpractice-bg: #F5F3FF;
  --color-bestpractice-border: #8B5CF6;
  --color-bestpractice-text: #4C1D95;
  --color-bestpractice-icon: #7C3AED;

  --color-transwave-bg: #FFF7ED;
  --color-transwave-border: #C05800;
  --color-transwave-text: #713600;
  --color-transwave-icon: #C05800;

  --color-riverpod-bg: #ECFEFF;
  --color-riverpod-border: #06B6D4;
  --color-riverpod-text: #164E63;
  --color-riverpod-icon: #0891B2;

  --color-mistake-bg: #FFF1F2;
  --color-mistake-border: #F43F5E;
  --color-mistake-text: #881337;
  --color-mistake-icon: #E11D48;

  --color-perf-bg: #F0FDF4;
  --color-perf-border: #10B981;
  --color-perf-text: #064E3B;
  --color-perf-icon: #059669;

  /* Code Syntax Highlighting Palette */
  --color-code-bg: #22170C;
  --color-code-header: #1A1108;
  --color-code-text: #EADCB9;
  --color-code-keyword: #FF944D;
  --color-code-annotation: #FFB366;
  --color-code-type: #FFD1A3;
  --color-code-string: #BCEE68;
  --color-code-comment: #8C7862;
  --color-code-function: #66C2FF;
  --color-code-number: #FF7597;

  /* Code Diff Tokens */
  --color-diff-add-bg: rgba(40, 167, 69, 0.18);
  --color-diff-add-text: #BCEE68;
  --color-diff-remove-bg: rgba(220, 53, 69, 0.22);
  --color-diff-remove-text: #FF7597;
  --color-line-highlight-bg: rgba(192, 88, 0, 0.25);

  /* Geometry & Layout Tokens */
  --sidebar-width: 300px;
  --toc-width: 240px;
  --header-height: 64px;
  --content-max-width: 860px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(56, 36, 13, 0.06);
  --shadow-md: 0 4px 12px rgba(56, 36, 13, 0.08);
  --shadow-lg: 0 12px 32px rgba(56, 36, 13, 0.12);

  /* Typography Stacks */
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;
}

/* Reset & Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-main);
  background-color: var(--color-warm-bg);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background-color: var(--color-warm-bg);
  overflow-x: hidden;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover);
}

/* Focus Visible for Accessibility */
:focus-visible {
  outline: 3px solid var(--color-accent-orange);
  outline-offset: 2px;
  border-radius: 4px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: rgba(56, 36, 13, 0.07);
  color: var(--color-primary-brown);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(56, 36, 13, 0.12);
}

::selection {
  background-color: var(--color-accent-orange);
  color: var(--color-surface-white);
}