/* Shared design tokens. A first visit is always light, independently of OS preference. */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #fbfaf8;
  --surface: #ffffff;
  --surface2: #f6f5f9;
  --soft: #f0eef5;
  --field: #ffffff;
  --text: #242131;
  --muted: #686574;
  --quiet: #777384;
  --line: #e2dfea;
  --line-strong: #cbc5d9;
  --accent: #6844c5;
  --accent-hover: #5634ad;
  --accent-text: #6541bd;
  --accent-soft: #f0eafb;
  --accent-line: #d8c8f5;
  --on-accent: #ffffff;
  --peach: #faeee6;
  --peach-ink: #986044;
  --mint: #eaf3ec;
  --mint-ink: #3d7557;
  --success-bg: #edf5e9;
  --success-text: #3d6d35;
  --success-line: #c4d9b9;
  --info-bg: #f0f3f8;
  --info-text: #50617a;
  --info-line: #d1dae6;
  --warm-bg: #fbf1de;
  --warm-text: #885d12;
  --warm-line: #e8d4aa;
  --danger-bg: #faebee;
  --danger-text: #a52c46;
  --danger-line: #e8bdc7;
  --shadow: 0 18px 60px #43326810;
  --shadow-strong: 0 28px 75px #43326816;
  --header-bg: #fbfaf8f2;
  --grid-dot: #cfc8e047;
  --hero-glow: #e4dbf866;
  --overlay: #24213180;
  --shadow-ink: #2116321a;
  /* Compatibility aliases keep existing broker widgets reusable. */
  --lime: var(--accent);
  --lime-dark: var(--on-accent);
  --violet: var(--accent-text);
  --radius: 20px;
  --font: "Inter", "Segoe UI", Arial, sans-serif;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131219;
  --surface: #1b1923;
  --surface2: #211f2c;
  --soft: #282433;
  --field: #17151e;
  --text: #f1edf9;
  --muted: #b5adbf;
  --quiet: #a99fb7;
  --line: #363041;
  --line-strong: #50455f;
  --accent: #b69aee;
  --accent-hover: #cab3f8;
  --accent-text: #c0a5f4;
  --accent-soft: #30243f;
  --accent-line: #5b437b;
  --on-accent: #20142f;
  --peach: #342820;
  --peach-ink: #dcac8e;
  --mint: #20332b;
  --mint-ink: #9bd5b3;
  --success-bg: #273620;
  --success-text: #bbdf9f;
  --success-line: #4b643b;
  --info-bg: #242b39;
  --info-text: #b4c8e0;
  --info-line: #42516b;
  --warm-bg: #352e21;
  --warm-text: #e9ce93;
  --warm-line: #6e5b37;
  --danger-bg: #39232d;
  --danger-text: #f0b0c0;
  --danger-line: #795061;
  --shadow: 0 18px 60px #00000025;
  --shadow-strong: 0 28px 75px #00000040;
  --header-bg: #131219f2;
  --grid-dot: #75608938;
  --hero-glow: #7050a526;
  --overlay: #08060fbb;
  --shadow-ink: #00000066;
}