:root {
  --iw-purple: #45395b;
  --iw-navy: #25233a;
  --iw-violet: #6c55b5;
  --iw-blue: #4d79e6;
  --iw-teal: #25a6a1;
  --iw-magenta: #c23985;
  --iw-orange: #e67e22;
  --text-primary: #25233a;
  --text-secondary: #49454d;
  --text-on-brand: #ffffff;
  --surface-white: #ffffff;
  --surface-warm: #fcfbff;
  --surface-lavender: #f4f1fa;
  --surface-purple: #eeeaf7;
  --surface-blue: #eff5fc;
  --surface-teal: #edf9f8;
  --surface-neutral: #f6f7f9;
  --surface-blush: #fff6f2;
  --border-soft: #e9e5f2;
  --role-all: #6c55b5;
  --role-sales: #25a6a1;
  --role-operations: #e67e22;
  --role-presales: #4d79e6;
  --role-lead: #c23985;
  --role-all-ink: #53408f;
  --role-sales-ink: #0b5f5b;
  --role-operations-ink: #8a4508;
  --role-presales-ink: #2546a8;
  --role-lead-ink: #8d2460;
  --focus: #6c55b5;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --radius-control: 10px;
  --radius-button: 14px;
  --radius-card: 18px;
  --radius-pill: 999px;
  --shadow-soft: 0 1px 2px rgba(37, 35, 58, 0.06);
  --font-family: "Plus Jakarta Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --text-display: 28px;
  --line-display: 1.2;
  --text-h1: 22px;
  --line-h1: 1.27;
  --text-h2: 19px;
  --line-h2: 1.37;
  --text-h3: 16px;
  --line-h3: 1.4;
  --text-body: 15px;
  --line-body: 1.6;
  --text-small: 13px;
  --line-small: 1.45;
  /* Reading hierarchy for lessons and Help. Chrome and Home keep the sizes above. */
  --type-page: 34px;
  --line-page: 1.16;
  --type-section: 24px;
  --line-section: 1.28;
  --type-subhead: 20px;
  --line-subhead: 1.35;
  --type-reading: 17px;
  --line-reading: 1.55;
  --type-label: 12px;
  --line-label: 1.3;
  --type-meta: 14px;
  /* Spacing says what belongs together. */
  --rhythm-page: 36px;
  --rhythm-section: 44px;
  --rhythm-section-tight: 28px;
  --rhythm-subhead: 24px;
  --rhythm-label: 6px;
  --rhythm-heading: 14px;
  --rhythm-paragraph: 18px;
  --rhythm-list: 14px;
  --rhythm-item: 10px;
  --rhythm-unit: 36px;
  --measure: 65ch;
  --content-width: 42rem;
  --shell-width: 72rem;
  --bp-tablet: 768px;
  --bp-nav: 1024px;
  --bp-desktop: 1100px;
  --motion: 160ms ease;
  --tabbar-height: 64px;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@media (min-width: 768px) {
  :root {
    --text-display: 32px;
    --text-h1: 24px;
    --type-page: 36px;
    --type-section: 26px;
    --type-reading: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0ms; }
}