/* GENERATED by scripts/generate-web-theme.ts in the Basis app repo.
   Do not edit by hand — rerun `npm run generate:web-theme` after any change
   to src/theme, and commit the result here.

   These are the iOS app's own tokens (src/theme/appTheme.ts + redesign.ts), so
   the two surfaces share one palette instead of two that look similar. The app
   defaults to dark and offers a toggle; so does this. */

:root {
  color-scheme: dark;
  --ba-bg: #0B0714;
  --ba-surface: #171221;
  --ba-card-border: #2A2438;
  --ba-divider: #231D31;
  --ba-ink: #F7F8FA;
  --ba-ink-deep: #FFFFFF;
  --ba-muted: #8B90A0;
  --ba-muted2: #A6ACBB;
  --ba-day-label: #5B606E;
  --ba-primary: #818CF8;
  --ba-primary-tint: rgba(99,102,241,0.20);
  --ba-primary-pill: rgba(99,102,241,0.20);
  --ba-ring-track: #2A2438;
  --ba-deep: #100A1E;
  --ba-scenario-from: #7C3AED;
  --ba-scenario-to: #241544;
  --ba-welcome-from: #7C3AED;
  --ba-welcome-to: #241544;
  --ba-gold: #F4B23C;
  --ba-flame: #FB923C;
  --ba-streak-done-bg: rgba(251,146,60,0.20);
  --ba-day-empty-bg: #1E1830;
  --ba-dashed: #332B47;
  --ba-success: #34D399;
  --ba-success-bg: #11291B;
  --ba-danger-bg: #2A1318;
  --ba-track-markets: #818CF8;
  --ba-track-markets-bg: rgba(129,140,248,0.18);
  --ba-track-banking: #5AA6E8;
  --ba-track-banking-bg: rgba(90,166,232,0.18);
  --ba-track-macro: #F0843C;
  --ba-track-macro-bg: rgba(240,132,60,0.18);
  --ba-white: #FFFFFF;

  /* Fonts — Plus Jakarta Sans for text, Space Grotesk for display/numerics,
     matching fonts.* in src/theme/index.ts. */
  --ba-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ba-font-display: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;

  --ba-sp-xs: 4px;
  --ba-sp-sm: 8px;
  --ba-sp-md: 12px;
  --ba-sp-lg: 16px;
  --ba-sp-xl: 24px;
  --ba-sp-xxl: 32px;
  --ba-sp-xxxl: 48px;
  --ba-r-sm: 8px;
  --ba-r-md: 12px;
  --ba-r-lg: 16px;
  --ba-r-xl: 24px;
  --ba-r-pill: 999px;

  --ba-display-size: 34px; --ba-display-lh: 40px; --ba-display-ls: -0.8px;
  --ba-h1-size: 28px; --ba-h1-lh: 34px; --ba-h1-ls: -0.6px;
  --ba-h2-size: 22px; --ba-h2-lh: 28px; --ba-h2-ls: -0.4px;
  --ba-h3-size: 18px; --ba-h3-lh: 24px; --ba-h3-ls: -0.2px;
  --ba-body-size: 16px; --ba-body-lh: 24px;
  --ba-body-strong-size: 16px; --ba-body-strong-lh: 24px;
  --ba-prose-size: 16px; --ba-prose-lh: 26px;
  --ba-label-size: 14px; --ba-label-lh: 20px;
  --ba-caption-size: 12px; --ba-caption-lh: 16px;
}

[data-theme='light'] {
  color-scheme: light;
  --ba-bg: #F4F2F8;
  --ba-surface: #FFFFFF;
  --ba-card-border: #ECEAF3;
  --ba-divider: #F2F0F7;
  --ba-ink: #1C1530;
  --ba-ink-deep: #241544;
  --ba-muted: #A39DB5;
  --ba-muted2: #7E78A0;
  --ba-day-label: #B4AEC4;
  --ba-primary: #5A4DE6;
  --ba-primary-tint: #F1EFFE;
  --ba-primary-pill: #EFECFD;
  --ba-ring-track: #E4E0FA;
  --ba-deep: #2A1A52;
  --ba-scenario-from: #7C3AED;
  --ba-scenario-to: #241544;
  --ba-welcome-from: #7C3AED;
  --ba-welcome-to: #241544;
  --ba-gold: #F4B23C;
  --ba-flame: #F2853C;
  --ba-streak-done-bg: #FDEBDC;
  --ba-day-empty-bg: #EFEDF5;
  --ba-dashed: #DAD5E6;
  --ba-success: #1FA06A;
  --ba-success-bg: #E7F5EE;
  --ba-danger-bg: #FDEBE9;
  --ba-track-markets: #5A4DE6;
  --ba-track-markets-bg: #E4E0FA;
  --ba-track-banking: #3B82C4;
  --ba-track-banking-bg: #EAF3FF;
  --ba-track-macro: #F0843C;
  --ba-track-macro-bg: #FFF1E8;
  --ba-white: #FFFFFF;
}