/**
 * AlwaysBeside shared theme tokens for suite apps.
 * Link from each tool: <link rel="stylesheet" href="../shared/ab-theme.css">
 * Keep app style.css for layout; these variables override the palette.
 */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Outfit:wght@400;500;600;700&display=swap");

:root {
  --bg0: #e8eef0;
  --bg1: #f3f6f7;
  --card: #ffffff;
  --ink: #142428;
  --mute: #5a6d72;
  --line: #c9d5d8;
  --acc: #1a3338;
  --acc2: #2f6f7a;
  --acc-soft: #d5e8ec;
  --ok: #1f6b4a;
  --ok-soft: #d8f0e4;
  --warn: #8a5a10;
  --warn-soft: #f5e6c8;
  --bad: #8b2e2e;
  --bad-soft: #f3d6d6;
  --mid: #2f6f7a;
  --mid-soft: #d5e8ec;
  --warm: #c4784a;
  --warm-soft: #f3e4d8;
  --shadow: 0 12px 36px rgba(20, 36, 40, 0.07);
  --radius: 16px;
  --font: "Outfit", "Segoe UI", "Helvetica Neue", ui-sans-serif, sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg0: #0f171a;
    --bg1: #152024;
    --card: #1a282e;
    --ink: #e7eef1;
    --mute: #9aadb4;
    --line: #2d3e44;
    --acc: #7ec4d0;
    --acc2: #5aafbc;
    --acc-soft: #243840;
    --ok: #6fcea0;
    --ok-soft: #1d3a2e;
    --warn: #e0b45a;
    --warn-soft: #3a3018;
    --bad: #e09292;
    --bad-soft: #3a2222;
    --mid: #7ec4d0;
    --mid-soft: #243840;
    --warm: #e0a57a;
    --warm-soft: #3a2a20;
    --shadow: none;
  }
}

:root[data-theme="dark"] {
  --bg0: #0f171a;
  --bg1: #152024;
  --card: #1a282e;
  --ink: #e7eef1;
  --mute: #9aadb4;
  --line: #2d3e44;
  --acc: #7ec4d0;
  --acc2: #5aafbc;
  --acc-soft: #243840;
  --ok: #6fcea0;
  --ok-soft: #1d3a2e;
  --warn: #e0b45a;
  --warn-soft: #3a3018;
  --bad: #e09292;
  --bad-soft: #3a2222;
  --mid: #7ec4d0;
  --mid-soft: #243840;
  --warm: #e0a57a;
  --warm-soft: #3a2a20;
  --shadow: none;
}

:root[data-theme="light"] {
  --bg0: #e8eef0;
  --bg1: #f3f6f7;
  --card: #ffffff;
  --ink: #142428;
  --mute: #5a6d72;
  --line: #c9d5d8;
  --acc: #1a3338;
  --acc2: #2f6f7a;
  --acc-soft: #d5e8ec;
  --warm: #c4784a;
  --warm-soft: #f3e4d8;
  --shadow: 0 12px 36px rgba(20, 36, 40, 0.07);
}