/* Six hand-tuned palettes: three light, three dark. Every token is set per theme,
   so no theme inherits a value it does not define. Sand is the default light theme. */
:root {
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 160ms;
  --dur-med: 260ms;
  --dur-slow: 380ms;
  --theme-transition: background-color 320ms var(--ease-emphasized), color 320ms var(--ease-emphasized), border-color 320ms var(--ease-emphasized);
}

/* Default (before JS runs) = Sand */
:root, :root[data-theme="sand"] {
  --bg: #f7f4ee; --surface: #fffdf9; --surface-2: #f1ece3; --surface-3: #e6dfd3;
  --on-surface: #1f1b16; --on-surface-muted: #6b6257; --outline: #d9d0c1;
  --primary: #8a4b2a; --on-primary: #ffffff; --primary-container: #f6dccd; --on-primary-container: #3d1d0a;
  --bubble-out: #f6dccd; --on-bubble-out: #3d1d0a; --bubble-in: #fffdf9; --on-bubble-in: #1f1b16;
  --accent-2: #3d7a5a;
  --danger: #b3261e; --success: #2e7d4f; --scrim: rgba(31, 27, 22, 0.38);
  --shadow: 0 1px 2px rgba(31, 27, 22, 0.06), 0 6px 20px rgba(31, 27, 22, 0.06);
  color-scheme: light;
}

:root[data-theme="mist"] {
  --bg: #f3f6f9; --surface: #ffffff; --surface-2: #e9eef4; --surface-3: #dde5ee;
  --on-surface: #16202b; --on-surface-muted: #55616f; --outline: #cfd8e3;
  --primary: #2f6690; --on-primary: #ffffff; --primary-container: #d3e6f5; --on-primary-container: #0b2a40;
  --bubble-out: #d3e6f5; --on-bubble-out: #0b2a40; --bubble-in: #ffffff; --on-bubble-in: #16202b;
  --accent-2: #b0561f;
  --danger: #b3261e; --success: #2e7d4f; --scrim: rgba(22, 32, 43, 0.38);
  --shadow: 0 1px 2px rgba(22, 32, 43, 0.06), 0 6px 20px rgba(22, 32, 43, 0.06);
  color-scheme: light;
}

:root[data-theme="sage"] {
  --bg: #f4f7f2; --surface: #fdfefc; --surface-2: #e8efe4; --surface-3: #dbe5d5;
  --on-surface: #1c2619; --on-surface-muted: #5b6956; --outline: #cdd9c6;
  --primary: #3f6b3c; --on-primary: #ffffff; --primary-container: #d5e8cd; --on-primary-container: #13290f;
  --bubble-out: #d5e8cd; --on-bubble-out: #13290f; --bubble-in: #fdfefc; --on-bubble-in: #1c2619;
  --accent-2: #8a4f7d;
  --danger: #b3261e; --success: #2e7d4f; --scrim: rgba(28, 38, 25, 0.38);
  --shadow: 0 1px 2px rgba(28, 38, 25, 0.06), 0 6px 20px rgba(28, 38, 25, 0.06);
  color-scheme: light;
}

:root[data-theme="midnight"] {
  --bg: #12151c; --surface: #1b2030; --surface-2: #232a3c; --surface-3: #2c354a;
  --on-surface: #e4e8f2; --on-surface-muted: #9aa3b7; --outline: #333d54;
  --primary: #9ec5ff; --on-primary: #0b1d33; --primary-container: #23406a; --on-primary-container: #d6e6ff;
  --bubble-out: #23406a; --on-bubble-out: #d6e6ff; --bubble-in: #1f2638; --on-bubble-in: #e4e8f2;
  --accent-2: #f4b26a;
  --danger: #ffb4ab; --success: #8fd3a8; --scrim: rgba(0, 0, 0, 0.55);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
  color-scheme: dark;
}

:root[data-theme="ember"] {
  --bg: #17130f; --surface: #211b16; --surface-2: #2b241e; --surface-3: #362e26;
  --on-surface: #efe6dc; --on-surface-muted: #aa9c8d; --outline: #463b30;
  --primary: #f0b27a; --on-primary: #3a2000; --primary-container: #5a3a1c; --on-primary-container: #ffdcbb;
  --bubble-out: #5a3a1c; --on-bubble-out: #ffdcbb; --bubble-in: #2b241e; --on-bubble-in: #efe6dc;
  --accent-2: #8fc8e8;
  --danger: #ffb4ab; --success: #8fd3a8; --scrim: rgba(0, 0, 0, 0.55);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
  color-scheme: dark;
}

:root[data-theme="forest"] {
  --bg: #0f1712; --surface: #17221b; --surface-2: #1f2d24; --surface-3: #293a2f;
  --on-surface: #e1ece4; --on-surface-muted: #97ab9d; --outline: #2f4037;
  --primary: #9fd6b0; --on-primary: #0c2416; --primary-container: #24503a; --on-primary-container: #c9f0d6;
  --bubble-out: #24503a; --on-bubble-out: #c9f0d6; --bubble-in: #1f2d24; --on-bubble-in: #e1ece4;
  --accent-2: #e9a3b8;
  --danger: #ffb4ab; --success: #8fd3a8; --scrim: rgba(0, 0, 0, 0.55);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
  color-scheme: dark;
}