/* Share these tokens between the static app and the new web app. */
:root,
[data-theme="dark"] {
  --bg-1: #0a0e1a;
  --bg-2: #131a2e;
  --blob-1: rgba(79, 140, 255, 0.30);
  --blob-2: rgba(160, 90, 255, 0.22);
  --glass-bg: rgba(255, 255, 255, 0.045);
  --glass-bg-strong: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-shadow: var(--sh-2);
  --text: #f0f2f7;
  --muted: #a3adc2;
  --accent: #5b95ff;
  --accent-soft: rgba(91, 149, 255, 0.16);
  --field-bg: rgba(255, 255, 255, 0.05);
  --good: #34d399;
  --bad: #fb7185;
  --account: #a78bfa;
  --menu-bg: #161b27;
  --radius: 16px;
  --blur: 18px;
  --bo-canvas: #0d121c;
  --bo-surface: #161c28;
  --bo-surface-soft: #1b2331;
  --bo-ink: #edf2fa;
  --bo-muted: #a8b5cb;
  --bo-line: #354157;
  --bo-accent: #8db5ff;
  --bo-accent-fill: #2865d7;
  --bo-accent-soft: #233a60;
  --bo-success: #6de4b0;
  --bo-success-soft: #183c32;
  --bo-warning: #f6c46d;
  --bo-warning-soft: #40321f;
  --bo-danger: #ffa4af;
  --bo-danger-soft: #44252f;
  --bo-shadow: 0 16px 60px #0005;
  --accent-hover: #74a6ff;
  --accent-active: #4683f0;
  --on-accent: #ffffff;
  --good-soft: rgba(52, 211, 153, 0.16);
  --warn: #f5b041;
  --warn-soft: rgba(245, 176, 65, 0.16);
  --bad-soft: rgba(251, 113, 133, 0.16);
  --sh-1: 0 1px 2px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.20);
  --sh-2: 0 4px 14px rgba(0,0,0,.34);
  --sh-3: 0 14px 40px rgba(0,0,0,.46);
  --glass-shadow-hover: var(--sh-3);
  --focus-ring: 0 0 0 3px var(--accent-soft);
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --section-gap: 28px;
  --fs-body: 14px;
  --fs-h3: 16px;
  --fs-display: clamp(22px, 1.2rem + 0.55vw, 28px);
  --lh-normal: 1.5;
  --ls-body: -0.005em;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-spring: cubic-bezier(.22, 1, .36, 1);
}
[data-theme="light"] {
  --bg-1: #eef2f9;
  --bg-2: #dfe7f5;
  --blob-1: rgba(79, 140, 255, 0.28);
  --blob-2: rgba(150, 110, 255, 0.20);
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(28, 42, 74, 0.12);
  --glass-shadow: var(--sh-2);
  --text: #16203a;
  --muted: #586377;
  --accent: #3a76f0;
  --accent-soft: rgba(58, 118, 240, 0.12);
  --field-bg: rgba(255, 255, 255, 0.7);
  --good: #0f9d58;
  --bad: #d83a52;
  --account: #6d28d9;
  --menu-bg: #ffffff;
  --bo-canvas: #f2f5fa;
  --bo-surface: #fff;
  --bo-surface-soft: #f7f9fc;
  --bo-ink: #101827;
  --bo-muted: #566580;
  --bo-line: #dce3ee;
  --bo-accent: #0754c9;
  --bo-accent-fill: #1260df;
  --bo-accent-soft: #e8f0ff;
  --bo-success: #13734c;
  --bo-success-soft: #e5f5ec;
  --bo-warning: #865300;
  --bo-warning-soft: #fff2d9;
  --bo-danger: #b72a42;
  --bo-danger-soft: #ffedf0;
  --bo-shadow: 0 16px 60px #34476a1a;
  --accent-hover: #2f66dc;
  --accent-active: #2858c4;
  --on-accent: #ffffff;
  --good-soft: rgba(15, 157, 88, 0.14);
  --warn: #c77f0a;
  --warn-soft: rgba(199, 127, 10, 0.14);
  --bad-soft: rgba(216, 58, 82, 0.12);
  --sh-1: 0 1px 2px rgba(40,60,110,.08), 0 1px 1px rgba(40,60,110,.06);
  --sh-2: 0 6px 22px rgba(40,60,110,.12);
  --sh-3: 0 18px 44px rgba(40,60,110,.18);
  --glass-shadow-hover: var(--sh-3);
  --focus-ring: 0 0 0 3px var(--accent-soft);
}
:root {
  --bo-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bo-text-xs: 12px;
  --bo-text-sm: 14px;
  --bo-text-md: 16px;
  --bo-text-lg: 20px;
  --bo-text-title: clamp(24px, 2.6vw, 36px);
  --bo-space-1: 4px;
  --bo-space-2: 8px;
  --bo-space-3: 12px;
  --bo-space-4: 16px;
  --bo-space-5: 20px;
  --bo-space-6: 24px;
  --bo-space-8: 32px;
  --bo-space-10: 40px;
  --bo-radius-sm: 6px;
  --bo-radius-md: 10px;
  --bo-radius-lg: 16px;
  --bo-control-height: 40px;
}