/* Claude-like theme overrides for Bootstrap 5 (subset of tokens). */

:root {
  --claude-gray-050: #faf9f5;
  --claude-gray-100: #f5f4ed;
  --claude-gray-150: #f0eee6;
  --claude-gray-200: #e8e6dc;
  --claude-gray-300: #d1cfc5;
  --claude-gray-400: #b0aea5;
  --claude-gray-500: #87867f;
  --claude-gray-600: #5e5d59;
  --claude-gray-700: #3d3d3a;
  --claude-gray-750: #30302e;
  --claude-gray-850: #1f1e1d;
  --claude-gray-900: #1a1918;
  --claude-gray-950: #141413;

  --claude-clay: #d97757;
  --claude-clay-interactive: #c96442;
  --claude-clay-rgb: 217, 119, 87;
  --claude-gray-950-rgb: 20, 20, 19;
  --claude-gray-050-rgb: 250, 249, 245;

  --claude-font-sans: "Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --claude-font-serif: "Noto Serif", "Noto Serif SC", "Songti SC", "STSong", "Times New Roman", serif;
  --claude-font-mono: "JetBrains Mono", "Noto Sans Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --site--viewport-min: 20;
  --site--viewport-max: 90;

  --claude-font-size-body: clamp(1.0625 * 1rem, ((1.0625 - ((1.0625 - 1.0625) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((1.0625 - 1.0625) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 1.0625 * 1rem);
  --claude-font-size-body-large: clamp(1.1875 * 1rem, ((1.1875 - ((1.25 - 1.1875) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((1.25 - 1.1875) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 1.25 * 1rem);

  --claude-font-size-h1: clamp(2.125 * 1rem, ((2.125 - ((3.25 - 2.125) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((3.25 - 2.125) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 3.25 * 1rem);
  --claude-font-size-h2: clamp(1.875 * 1rem, ((1.875 - ((2.75 - 1.875) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((2.75 - 1.875) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 2.75 * 1rem);
  --claude-font-size-h3: clamp(1.75 * 1rem, ((1.75 - ((2.25 - 1.75) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((2.25 - 1.75) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 2.25 * 1rem);
  --claude-font-size-h4: clamp(1.4375 * 1rem, ((1.4375 - ((2 - 1.4375) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((2 - 1.4375) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 2 * 1rem);
  --claude-font-size-h5: clamp(1.25 * 1rem, ((1.25 - ((1.5625 - 1.25) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((1.5625 - 1.25) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 1.5625 * 1rem);
  --claude-font-size-h6: clamp(1 * 1rem, ((1 - ((1.1875 - 1) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem + ((1.1875 - 1) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw), 1.1875 * 1rem);

  --claude-line-height-body: 1.6;
  --claude-line-height-heading: 1.2;

  --claude-bg: #faf9f5;
  --claude-bg-secondary: #faf9f5;
  --claude-bg-tertiary: #faf9f5;
  --claude-text: var(--claude-gray-950);
  --claude-text-secondary: var(--claude-gray-750);
  --claude-text-tertiary: var(--claude-gray-600);
  --claude-border: var(--claude-gray-400);

  --bs-body-font-family: var(--claude-font-sans);
  --bs-font-sans-serif: var(--claude-font-sans);
  --bs-font-monospace: var(--claude-font-mono);
  --bs-body-font-size: var(--claude-font-size-body);
  --bs-body-line-height: var(--claude-line-height-body);
  --bs-headings-font-family: var(--claude-font-serif);
  --bs-headings-line-height: var(--claude-line-height-heading);

  --bs-body-bg: var(--claude-bg);
  --bs-body-color: var(--claude-text);
  --bs-secondary-color: var(--claude-text-secondary);
  --bs-tertiary-color: var(--claude-text-tertiary);

  --bs-secondary-bg: var(--claude-bg-secondary);
  --bs-tertiary-bg: var(--claude-bg-tertiary);

  --bs-border-color: var(--claude-border);
  --bs-border-color-translucent: rgba(var(--claude-gray-950-rgb), 0.12);

  --bs-primary: var(--claude-clay);
  --bs-primary-rgb: var(--claude-clay-rgb);
  --bs-link-color: var(--claude-clay);
  --bs-link-hover-color: var(--claude-clay-interactive);
  --bs-info: var(--claude-clay);
  --bs-info-rgb: var(--claude-clay-rgb);

  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 1rem;
}

[data-bs-theme="dark"] {
  --claude-bg: var(--claude-gray-950);
  --claude-bg-secondary: var(--claude-gray-900);
  --claude-bg-tertiary: var(--claude-gray-850);
  --claude-text: var(--claude-gray-050);
  --claude-text-secondary: var(--claude-gray-400);
  --claude-text-tertiary: var(--claude-gray-500);
  --claude-border: var(--claude-gray-600);

  --bs-body-bg: var(--claude-bg);
  --bs-body-color: var(--claude-text);
  --bs-secondary-color: var(--claude-text-secondary);
  --bs-tertiary-color: var(--claude-text-tertiary);

  --bs-secondary-bg: var(--claude-bg-secondary);
  --bs-tertiary-bg: var(--claude-bg-tertiary);

  --bs-border-color: var(--claude-border);
  --bs-border-color-translucent: rgba(var(--claude-gray-050-rgb), 0.12);

  --bs-primary: var(--claude-clay);
  --bs-primary-rgb: var(--claude-clay-rgb);
  --bs-link-color: var(--claude-clay);
  --bs-link-hover-color: var(--claude-clay-interactive);
  --bs-info: var(--claude-clay);
  --bs-info-rgb: var(--claude-clay-rgb);
}

h1,
.h1 {
  font-size: var(--claude-font-size-h1);
  line-height: var(--claude-line-height-heading);
}

h2,
.h2 {
  font-size: var(--claude-font-size-h2);
  line-height: var(--claude-line-height-heading);
}

h3,
.h3 {
  font-size: var(--claude-font-size-h3);
  line-height: var(--claude-line-height-heading);
}

h4,
.h4 {
  font-size: var(--claude-font-size-h4);
  line-height: var(--claude-line-height-heading);
}

h5,
.h5 {
  font-size: var(--claude-font-size-h5);
  line-height: var(--claude-line-height-heading);
}

h6,
.h6 {
  font-size: var(--claude-font-size-h6);
  line-height: var(--claude-line-height-heading);
}

.markdown-content {
  font-size: var(--claude-font-size-body-large);
  line-height: 1.7;
}

.markdown-content p {
  line-height: 1.7;
}