/* ── Warm neutral surfaces, saturated accents on the meaningful hues ── */
:root {
  --base3:  #fffaf5;
  --base2:  #e7e3da;
  --base1:  #a8a49b;
  --base0:  #8b8880;
  --base00: #6d6a63;
  --base01: #4a4842;
  --base02: #2b2e30;
  --yellow: #a8842a;
  --orange: #b56338;
  --red:    #b04a44;
  --magenta:#a35480;
  --violet: #63639e;
  --blue:   #2d6da3;
  --cyan:   #2f8b85;
  --green:  #55884a;
  
  --sidebar-width: 220px;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, monospace;

  --bg:         var(--base3);
  --bg-hl:      var(--base2);
  --bg-card:    #fbfaf7;
  --text:       var(--base02);
  --text-muted: var(--base00);
  --text-faint: var(--base1);
  --border:     #ded9d0;
  --border-strong: #c9c3b8;
  --sidebar-bg: #343548;
  --pre-bg:     #efece4;
  --pre-border: #ded9d0;

  --accent:       var(--blue);
  --accent-hover: #23578a;
  --accent-soft:  #e0eaf5;
  --focus:        #6ea6d4;

  --radius-sm: 5px;
  --radius:    7px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgba(43, 46, 48, 0.05);
  --shadow:    0 1px 3px rgba(43, 46, 48, 0.07), 0 1px 1px rgba(43, 46, 48, 0.04);
}

/* ── Dark — blue slate ─────────────────────────────────── */
html.dark {
  --base1:  #8d928f;
  --base01: #5c625f;

  --bg:         #1b1e20;
  --bg-hl:      #2a2f32;
  --bg-card:    #23272a;
  --text:       #d9d5cd;
  --text-muted: #9a9a93;
  --text-faint: #6f7573;
  --border:     #333a3d;
  --border-strong: #454d51;
  --sidebar-bg: #141a22;
  --pre-bg:     #1e2224;
  --pre-border: #333a3d;

  --yellow: #c0a24e;
  --orange: #cf8352;
  --red:    #d3716a;
  --magenta:#c07ba4;
  --violet: #8f8fc8;
  --blue:   #6ba6d4;
  --cyan:   #52b2ab;
  --green:  #84b374;

  --accent:       var(--blue);
  --accent-hover: #8fbde4;
  --accent-soft:  #223444;
  --focus:        #6ba6d4;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow:    0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
}