/* GENERATED by scripts/gen-web-tokens.mjs — do not edit.
   Source of truth: lib/theme.ts (colour) and lib/tokens.ts (everything else).
   Regenerate with: node scripts/gen-web-tokens.mjs */

:root {
  --color-bg: #f1f5f9;
  --color-card: #ffffff;
  --color-card-muted: #f8fafc;
  --color-card-raised: #ffffff;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-text: #0f172a;
  --color-text-muted: #556377;
  --color-text-faint: #6b7a90;
  --color-brand: #2b7fff;
  --color-brand-text: #ffffff;
  --color-brand-soft-bg: #eef7ff;
  --color-brand-soft-text: #1450b4;
  --color-brand-ramp-1: #2b7fff;
  --color-brand-ramp-2: #5c9bff;
  --color-brand-ramp-3: #8bb8ff;
  --color-brand-ramp-4: #b4d2ff;
  --color-brand-ramp-5: #d8e8ff;
  --color-good: #047857;
  --color-good-bg: #ecfdf5;
  --color-good-text: #065f46;
  --color-warn: #b45309;
  --color-warn-bg: #fffbeb;
  --color-warn-text: #92400e;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-danger-text: #b91c1c;
  --color-track: #e2e8f0;
  --color-money-positive: #047857;
  --color-money-negative: #dc2626;
  --color-money-positive-bg: #ecfdf5;
  --color-money-negative-bg: #fef2f2;

  --space-none: 0px;
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-xxl: 24px;
  --space-xxxl: 32px;
  --space-huge: 40px;

  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 22px;
  --radius-pill: 999px;

  --type-display-size: 30px;
  --type-display-weight: 800;
  --type-display-leading: 38px;
  --type-title-size: 22px;
  --type-title-weight: 800;
  --type-title-leading: 30px;
  --type-heading-size: 18px;
  --type-heading-weight: 800;
  --type-heading-leading: 26px;
  --type-subtitle-size: 16px;
  --type-subtitle-weight: 700;
  --type-subtitle-leading: 24px;
  --type-body-strong-size: 15px;
  --type-body-strong-weight: 700;
  --type-body-strong-leading: 23px;
  --type-body-size: 15px;
  --type-body-weight: 400;
  --type-body-leading: 23px;
  --type-callout-size: 14px;
  --type-callout-weight: 700;
  --type-callout-leading: 21px;
  --type-sub-size: 13px;
  --type-sub-weight: 600;
  --type-sub-leading: 20px;
  --type-sub-muted-size: 13px;
  --type-sub-muted-weight: 400;
  --type-sub-muted-leading: 20px;
  --type-caption-size: 12px;
  --type-caption-weight: 500;
  --type-caption-leading: 18px;
  --type-micro-size: 11px;
  --type-micro-weight: 500;
  --type-micro-leading: 17px;
  --type-micro-bold-size: 11px;
  --type-micro-bold-weight: 700;
  --type-micro-bold-leading: 17px;
  --type-eyebrow-size: 11px;
  --type-eyebrow-weight: 600;
  --type-eyebrow-leading: 16px;
  --type-display-num-size: 30px;
  --type-display-num-weight: 800;
  --type-hero-num-size: 26px;
  --type-hero-num-weight: 800;
  --type-stat-num-size: 20px;
  --type-stat-num-weight: 700;
  --type-mini-num-size: 14px;
  --type-mini-num-weight: 700;
  --type-micro-num-size: 13px;
  --type-micro-num-weight: 700;

  --type-fa-display-size: 31px;
  --type-fa-display-weight: 800;
  --type-fa-display-leading: 43px;
  --type-fa-title-size: 23px;
  --type-fa-title-weight: 800;
  --type-fa-title-leading: 32px;
  --type-fa-heading-size: 19px;
  --type-fa-heading-weight: 800;
  --type-fa-heading-leading: 27px;
  --type-fa-subtitle-size: 18px;
  --type-fa-subtitle-weight: 700;
  --type-fa-subtitle-leading: 32px;
  --type-fa-body-strong-size: 17px;
  --type-fa-body-strong-weight: 700;
  --type-fa-body-strong-leading: 30px;
  --type-fa-body-size: 17px;
  --type-fa-body-weight: 400;
  --type-fa-body-leading: 30px;
  --type-fa-callout-size: 16px;
  --type-fa-callout-weight: 700;
  --type-fa-callout-leading: 28px;
  --type-fa-sub-size: 15px;
  --type-fa-sub-weight: 600;
  --type-fa-sub-leading: 26px;
  --type-fa-sub-muted-size: 15px;
  --type-fa-sub-muted-weight: 400;
  --type-fa-sub-muted-leading: 26px;
  --type-fa-caption-size: 14px;
  --type-fa-caption-weight: 500;
  --type-fa-caption-leading: 25px;
  --type-fa-micro-size: 13px;
  --type-fa-micro-weight: 500;
  --type-fa-micro-leading: 23px;
  --type-fa-micro-bold-size: 13px;
  --type-fa-micro-bold-weight: 700;
  --type-fa-micro-bold-leading: 23px;
  --type-fa-eyebrow-size: 13px;
  --type-fa-eyebrow-weight: 600;
  --type-fa-eyebrow-leading: 23px;
  --type-fa-display-num-size: 30px;
  --type-fa-display-num-weight: 800;
  --type-fa-hero-num-size: 26px;
  --type-fa-hero-num-weight: 800;
  --type-fa-stat-num-size: 20px;
  --type-fa-stat-num-weight: 700;
  --type-fa-mini-num-size: 14px;
  --type-fa-mini-num-weight: 700;
  --type-fa-micro-num-size: 13px;
  --type-fa-micro-num-weight: 700;

  --motion-fast: 160ms;
  --motion-base: 200ms;
  --motion-slow: 240ms;
  --content-max: 1240px;
  --bp-tablet: 600px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;
  --chart-1: #2b7fff;
  --chart-2: #0ea5e9;
  --chart-3: #14b8a6;
  --chart-4: #8b5cf6;
  --chart-5: #f59e0b;
  --chart-6: #64748b;
  --chart-7: #a855f7;
  --chart-8: #0891b2;
}

/* The dark palette is emitted but NOT applied.
 *
 * The app follows the OS scheme; the marketing site deliberately does not. A
 * landing page for a finance product is doing one job — convincing a stranger
 * to trust it with their money — and a light, high-contrast page reads as more
 * credible for that than a dark one, regardless of what the visitor's laptop is
 * set to. The app behind the login is where their preference wins.
 *
 * Kept in the file, unused, so re-enabling is uncommenting a media query rather
 * than regenerating and re-deriving the palette.
 *
 * @media (prefers-color-scheme: dark) { :root { ... } }
 */
[data-scheme="dark"] {
  --color-bg: #121212;
  --color-card: #1c1c1e;
  --color-card-muted: #242426;
  --color-card-raised: #2c2c2e;
  --color-border: #2f2f31;
  --color-border-strong: #3f3f42;
  --color-text: #dedede;
  --color-text-muted: #a9a9ad;
  --color-text-faint: #8a8a90;
  --color-brand: #7aa7f0;
  --color-brand-text: #0b1220;
  --color-brand-soft-bg: #1b2637;
  --color-brand-soft-text: #bcd3f7;
  --color-brand-ramp-1: #7aa7f0;
  --color-brand-ramp-2: #6690d4;
  --color-brand-ramp-3: #5279b8;
  --color-brand-ramp-4: #3f639c;
  --color-brand-ramp-5: #2d4d80;
  --color-good: #4ade80;
  --color-good-bg: #12291d;
  --color-good-text: #86efac;
  --color-warn: #fbbf24;
  --color-warn-bg: #2e2410;
  --color-warn-text: #fcd34d;
  --color-danger: #f87171;
  --color-danger-bg: #2e1618;
  --color-danger-text: #fca5a5;
  --color-track: #2f2f31;
  --color-money-positive: #4ade80;
  --color-money-negative: #f87171;
  --color-money-positive-bg: #12291d;
  --color-money-negative-bg: #2e1618;
}

/* Farsi is the default locale and its type scale is genuinely different —
   larger, with more leading — because Arabic-script ascenders and descenders
   overflow a Latin line box. Selecting it by :lang keeps every rule below
   written once. */
:lang(fa) {
  --type-display-size: var(--type-fa-display-size);
  --type-display-weight: var(--type-fa-display-weight);
  --type-display-leading: var(--type-fa-display-leading);
  --type-title-size: var(--type-fa-title-size);
  --type-title-weight: var(--type-fa-title-weight);
  --type-title-leading: var(--type-fa-title-leading);
  --type-heading-size: var(--type-fa-heading-size);
  --type-heading-weight: var(--type-fa-heading-weight);
  --type-heading-leading: var(--type-fa-heading-leading);
  --type-subtitle-size: var(--type-fa-subtitle-size);
  --type-subtitle-weight: var(--type-fa-subtitle-weight);
  --type-subtitle-leading: var(--type-fa-subtitle-leading);
  --type-body-strong-size: var(--type-fa-body-strong-size);
  --type-body-strong-weight: var(--type-fa-body-strong-weight);
  --type-body-strong-leading: var(--type-fa-body-strong-leading);
  --type-body-size: var(--type-fa-body-size);
  --type-body-weight: var(--type-fa-body-weight);
  --type-body-leading: var(--type-fa-body-leading);
  --type-callout-size: var(--type-fa-callout-size);
  --type-callout-weight: var(--type-fa-callout-weight);
  --type-callout-leading: var(--type-fa-callout-leading);
  --type-sub-size: var(--type-fa-sub-size);
  --type-sub-weight: var(--type-fa-sub-weight);
  --type-sub-leading: var(--type-fa-sub-leading);
  --type-sub-muted-size: var(--type-fa-sub-muted-size);
  --type-sub-muted-weight: var(--type-fa-sub-muted-weight);
  --type-sub-muted-leading: var(--type-fa-sub-muted-leading);
  --type-caption-size: var(--type-fa-caption-size);
  --type-caption-weight: var(--type-fa-caption-weight);
  --type-caption-leading: var(--type-fa-caption-leading);
  --type-micro-size: var(--type-fa-micro-size);
  --type-micro-weight: var(--type-fa-micro-weight);
  --type-micro-leading: var(--type-fa-micro-leading);
  --type-micro-bold-size: var(--type-fa-micro-bold-size);
  --type-micro-bold-weight: var(--type-fa-micro-bold-weight);
  --type-micro-bold-leading: var(--type-fa-micro-bold-leading);
  --type-eyebrow-size: var(--type-fa-eyebrow-size);
  --type-eyebrow-weight: var(--type-fa-eyebrow-weight);
  --type-eyebrow-leading: var(--type-fa-eyebrow-leading);
  --type-display-num-size: var(--type-fa-display-num-size);
  --type-display-num-weight: var(--type-fa-display-num-weight);
  --type-hero-num-size: var(--type-fa-hero-num-size);
  --type-hero-num-weight: var(--type-fa-hero-num-weight);
  --type-stat-num-size: var(--type-fa-stat-num-size);
  --type-stat-num-weight: var(--type-fa-stat-num-weight);
  --type-mini-num-size: var(--type-fa-mini-num-size);
  --type-mini-num-weight: var(--type-fa-mini-num-weight);
  --type-micro-num-size: var(--type-fa-micro-num-size);
  --type-micro-num-weight: var(--type-fa-micro-num-weight);
}