/* ============================================
   DESIGN TOKENS — Atoms (Level 0)
   Single source of truth for all design values.
   ============================================ */

:root {
  /* --- Colors: Backgrounds --- */
  --bg: #111213;
  --surface: #17181a;
  --surface-raised: #1b1c1f;
  --surface-hover: #2a2a2a;
  --surface-float: rgba(24, 25, 27, 0.92);

  /* --- Colors: Borders --- */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* --- Colors: Text --- */
  --text: #e7e4dc;
  --text-muted: rgba(210, 206, 198, 0.66);
  --text-soft: rgba(210, 206, 198, 0.42);

  /* --- Colors: Brand --- */
  --accent: #d97a49;
  --accent-hover: #c55a32;
  --accent-dim: rgba(217, 122, 73, 0.12);

  /* --- Colors: Semantic --- */
  --success: #7cc18b;
  --success-dim: rgba(106, 173, 106, 0.15);
  --danger: #d06f6f;
  --danger-dim: rgba(199, 80, 80, 0.15);
  --warning: #d4a84b;
  --warning-dim: rgba(212, 168, 75, 0.15);
  --info: #5a9bcf;
  --info-dim: rgba(218, 109, 66, 0.15);

  /* --- Typography --- */
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-mono: "SF Mono", "Consolas", "Monaco", monospace;

  /* --- Elevation --- */
  --shadow: 0 26px 70px rgba(0, 0, 0, 0.34);

  /* --- Spacing --- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 14px;
  --space-lg: 18px;
  --space-xl: 26px;

  /* --- Radii --- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* --- Transitions --- */
  --ease-default: 0.16s ease;
  --ease-slow: 0.24s ease;
  --ease-fast: 0.14s ease;

  /* --- Scrollbar --- */
  --scrollbar-track: var(--bg);
  --scrollbar-thumb: rgba(255, 255, 255, 0.12);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.22);
  color-scheme: dark;

  /* --- Domain: Diff viewer --- */
  --diff-added: #7ee787;
  --diff-added-bg: #244032;
  --diff-removed: #f85149;
  --diff-removed-bg: #462c32;
  --diff-changed: #d29922;
  --diff-changed-bg: #3d3421;
  --diff-unchanged: #6e7681;

  /* --- Domain: Wine types --- */
  --wine-red: #8b2252;
  --wine-white: #c4a84f;
  --wine-rose: #d4879c;
  --wine-sparkling: #e8d5a3;
  --wine-orange: #c47a2f;
  --wine-dessert: #9b6b3d;
  --wine-fortified: #6b3a5c;

  /* --- Domain: Heat map (0=cool, 9=hot) --- */
  --heat-0: #1e3a5f;
  --heat-1: #2d5a87;
  --heat-2: #3d7aaf;
  --heat-3: #5c9ad4;
  --heat-4: #7bb8e8;
  --heat-5: #f0c674;
  --heat-6: #e8a33d;
  --heat-7: #de8f1e;
  --heat-8: #d97706;
  --heat-9: #c2410c;
}

/* --- Light theme override --- */
[data-theme="light"] {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --surface-raised: #f0f0f0;
  --surface-hover: #e4e4e4;
  --surface-float: rgba(255, 255, 255, 0.92);

  --border: rgba(0, 0, 0, 0.1);
  --border-strong: rgba(0, 0, 0, 0.18);

  --text: #333333;
  --text-muted: #666666;
  --text-soft: #999999;

  --accent: #d97a49;
  --accent-hover: #c55a32;
  --accent-dim: rgba(217, 122, 73, 0.08);

  --success: #2d8a4e;
  --success-dim: rgba(45, 138, 78, 0.1);
  --danger: #c0392b;
  --danger-dim: rgba(192, 57, 43, 0.1);
  --warning: #d4a017;
  --warning-dim: rgba(212, 160, 23, 0.1);
  --info: #2563eb;
  --info-dim: rgba(37, 99, 235, 0.1);

  --shadow: 0 26px 70px rgba(0, 0, 0, 0.08);

  --diff-added: #2d8a4e;
  --diff-added-bg: #dafbe1;
  --diff-removed: #c0392b;
  --diff-removed-bg: #ffe0e0;
  --diff-changed: #b58900;
  --diff-changed-bg: #fff3cd;
  --diff-unchanged: #999999;

  --scrollbar-track: var(--bg);
  --scrollbar-thumb: rgba(0, 0, 0, 0.15);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.28);
  color-scheme: light;
}

/* --- Global scrollbar styling --- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-full);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}