/* ---------------------------
   Theme tokens (based on your attached light/dark examples)
   - warmer backgrounds
   - no purple
   - less-rounded corners (still rounded)
---------------------------- */
:root {
  /* Layout */
  --w: 1120px;
  --radius: 10px; /* less rounded */
  --radius-pill: 12px; /* pills still slightly rounded, not bubbles */

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Roboto",
    "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Georgia", "Times New Roman", "Times", serif;
  --font-heading: "Crimson Pro", "Georgia", "Times New Roman", serif;
  --font-mono: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono",
    "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;

  /* Motion */
  --t: 160ms ease;

  /* Light (warm paper) */
  --bg: #f7f4ee; /* warm off-white */
  --surface: #ffffff; /* main surfaces look like paper panels */
  --surface-2: #fbf8f2; /* slightly tinted for pills/inputs */
  --text: #2a2a28;
  --text-heading: #1a1a18; /* Slightly darker for better contrast on headers */
  --muted: rgba(42, 42, 40, 0.65);

  --border: rgba(42, 42, 40, 0.14);
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.08);

  /* Warm accent (Claude-like) */
  --accent: #d07a5c; /* warm orange/salmon */
  --accent-2: #b96b52;

  --chip: rgba(42, 42, 40, 0.05);
  --chip-hover: rgba(42, 42, 40, 0.08);

  --topbar: rgba(247, 244, 238, 0.72);
}

/* Dark (warm charcoal) */
html[data-theme="dark"] {
  --bg: #232323;
  --surface: #2b2b2b;
  --surface-2: #2f2f2f;

  --text: rgba(245, 242, 235, 0.92);
  --text-heading: rgba(
    255,
    255,
    255,
    0.98
  ); /* Slightly brighter for better contrast on headers */
  --muted: rgba(245, 242, 235, 0.62);

  --border: rgba(245, 242, 235, 0.14);
  --shadow: 0 22px 54px rgba(0, 0, 0, 0.45);

  --accent: #d07a5c;
  --accent-2: #c17358;

  --chip: rgba(245, 242, 235, 0.06);
  --chip-hover: rgba(245, 242, 235, 0.1);

  --topbar: rgba(35, 35, 35, 0.72);
}