/* AUTO-GENERATED from Figma by scripts/sync-figma-tokens.mjs — do not edit by hand.
 * Run `yarn tokens:build` to regenerate this file.
 *
 * The Figma design tokens and component classes for the static pages in public/, which can't
 * load src/index.css:
 * colors.css, typography.css, sizes.css, effects.css, componentTokens.css, components.css from src/assets/styles/, bundled
 * into one request. scripts/publicPages/partials/head.html links it on every page, so use the
 * same `.type-*` classes and `var(--…)` tokens there (see docs/designSystem/figmaTokens.md).
 */

/* ---- src/assets/styles/tokens/colors.css ---- */

/* AUTO-GENERATED from Figma by scripts/sync-figma-tokens.mjs — do not edit by hand.
 * Run `yarn tokens:build` to regenerate this file.
 */

:root {
  color-scheme: light;

  /* Primitives */
  --color-primary: #343ced;
  --color-accent-green: #34c759;
  --color-accent-green-12: #34c7591f;
  --color-accent-orange: #ff8d28;
  --color-accent-orange-12: #ff8d281f;
  --color-accent-red: #ff383c;
  --color-accent-red-5: #ff383c0d;
  --color-accent-red-12: #ff383c1f;
  --color-accent-red-20: #ff383c33;
  --color-greyscale-50: #f5f5f5;
  --color-greyscale-100: #e8e8e8;
  --color-greyscale-200: #d1d1d1;
  --color-greyscale-300: #b2b2b2;
  --color-greyscale-400: #a2a2a2;
  --color-greyscale-500: #8a8a8a;
  --color-greyscale-600: #707070;
  --color-greyscale-600-12: #7070701f;
  --color-greyscale-700: #595959;
  --color-greyscale-800: #383838;
  --color-greyscale-850: #282828;
  --color-greyscale-900: #242424;
  --color-greyscale-950: #1a1a1a;
  --color-primary-200: #83a8fe;
  --color-primary-500: #343ced;
  --color-primary-500-5: #343ced0d;
  --color-primary-500-12: #343ced1f;
  --color-primary-600: #161dc0;
  --color-white: #ffffff;

  /* Semantic — light mode */
  --color-accent: var(--color-primary-500);
  --color-accent-10: #343ced1a;
  --color-surface-bg: var(--color-white);
  --color-surface-outline-1: var(--color-greyscale-300);
  --color-surface-outline-2: var(--color-greyscale-100);
  --color-surface-skeleton: var(--color-greyscale-50);
  --color-surface-1: var(--color-white);
  --color-surface-2: var(--color-greyscale-50);
  --color-surface-3: var(--color-greyscale-100);
  --color-text-disabled: var(--color-greyscale-400);
  --color-text-primary: var(--color-greyscale-950);
  --color-text-secondary: var(--color-greyscale-700);
  --color-text-tertiary: var(--color-greyscale-600);

  /* Gradients (paint styles; angles follow Figma's handles, exact on square elements) */
  --gradient-primary-gradient: linear-gradient(180deg, #6b70ff 0%, #343ced 100%);
  --gradient-style: linear-gradient(155.43deg, #343ced 0%, #343ced 0.39%, #8ba0ff 37.68%, #343ced 100%);
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Semantic — dark mode */
  --color-accent: var(--color-primary-200);
  --color-accent-10: #83a8fe1a;
  --color-surface-bg: var(--color-greyscale-950);
  --color-surface-outline-1: var(--color-greyscale-800);
  --color-surface-outline-2: var(--color-greyscale-700);
  --color-surface-skeleton: var(--color-greyscale-900);
  --color-surface-1: var(--color-greyscale-900);
  --color-surface-2: var(--color-greyscale-850);
  --color-surface-3: var(--color-greyscale-800);
  --color-text-disabled: var(--color-greyscale-700);
  --color-text-primary: var(--color-white);
  --color-text-secondary: var(--color-greyscale-50);
  --color-text-tertiary: var(--color-greyscale-500);
}


/* ---- src/assets/styles/tokens/typography.css ---- */

/* AUTO-GENERATED from Figma by scripts/sync-figma-tokens.mjs — do not edit by hand.
 * Run `yarn tokens:build` to regenerate this file.
 *
 * One `.type-*` class per Figma text style (App/ = product, Web/ = public site);
 * docs/designSystem/figmaTokens.md maps the Figma style names to these classes.
 * Mobile-first: Web/ styles follow responsive Figma variables, so their sizes change at the
 * min-widths below (in rem). Only values that change are repeated.
 */

:root {
  /* App/Body/L */
  --type-app-body-l-family: "Poppins", sans-serif;
  --type-app-body-l-weight: 400;
  --type-app-body-l-size: 1.0625rem;
  --type-app-body-l-line-height: 1.25rem;
  --type-app-body-l-letter-spacing: 0;

  /* App/Body/M */
  --type-app-body-m-family: "Poppins", sans-serif;
  --type-app-body-m-weight: 400;
  --type-app-body-m-size: 0.9375rem;
  --type-app-body-m-line-height: 1.25rem;
  --type-app-body-m-letter-spacing: 0;

  /* App/Body/S */
  --type-app-body-s-family: "Poppins", sans-serif;
  --type-app-body-s-weight: 400;
  --type-app-body-s-size: 0.875rem;
  --type-app-body-s-line-height: 1.125rem;
  --type-app-body-s-letter-spacing: 0;

  /* App/Body/XL */
  --type-app-body-xl-family: "Poppins", sans-serif;
  --type-app-body-xl-weight: 400;
  --type-app-body-xl-size: 1.1875rem;
  --type-app-body-xl-line-height: 1.5rem;
  --type-app-body-xl-letter-spacing: 0;

  /* App/Caption/Medium */
  --type-app-caption-medium-family: "Poppins", sans-serif;
  --type-app-caption-medium-weight: 500;
  --type-app-caption-medium-size: 0.75rem;
  --type-app-caption-medium-line-height: 1rem;
  --type-app-caption-medium-letter-spacing: 0;

  /* App/Caption/Regular */
  --type-app-caption-regular-family: "Poppins", sans-serif;
  --type-app-caption-regular-weight: 400;
  --type-app-caption-regular-size: 0.75rem;
  --type-app-caption-regular-line-height: 1rem;
  --type-app-caption-regular-letter-spacing: 0;

  /* App/Caption/XS */
  --type-app-caption-xs-family: "Poppins", sans-serif;
  --type-app-caption-xs-weight: 400;
  --type-app-caption-xs-size: 0.5625rem;
  --type-app-caption-xs-line-height: 0.75rem;
  --type-app-caption-xs-letter-spacing: 0.02em;
  --type-app-caption-xs-text-transform: uppercase;

  /* App/Heading/L */
  --type-app-heading-l-family: "Poppins", sans-serif;
  --type-app-heading-l-weight: 500;
  --type-app-heading-l-size: 2.375rem;
  --type-app-heading-l-line-height: 2.75rem;
  --type-app-heading-l-letter-spacing: -0.01em;

  /* App/Heading/M */
  --type-app-heading-m-family: "Poppins", sans-serif;
  --type-app-heading-m-weight: 500;
  --type-app-heading-m-size: 2rem;
  --type-app-heading-m-line-height: 2.5rem;
  --type-app-heading-m-letter-spacing: -0.01em;

  /* App/Heading/S */
  --type-app-heading-s-family: "Poppins", sans-serif;
  --type-app-heading-s-weight: 500;
  --type-app-heading-s-size: 1.625rem;
  --type-app-heading-s-line-height: 2rem;
  --type-app-heading-s-letter-spacing: -0.01em;

  /* App/Heading/XS */
  --type-app-heading-xs-family: "Poppins", sans-serif;
  --type-app-heading-xs-weight: 500;
  --type-app-heading-xs-size: 1.0625rem;
  --type-app-heading-xs-line-height: 1.25rem;
  --type-app-heading-xs-letter-spacing: -0.01em;

  /* App/Label/L */
  --type-app-label-l-family: "Poppins", sans-serif;
  --type-app-label-l-weight: 500;
  --type-app-label-l-size: 1.125rem;
  --type-app-label-l-line-height: 1.75rem;
  --type-app-label-l-letter-spacing: 0;

  /* App/Label/M */
  --type-app-label-m-family: "Poppins", sans-serif;
  --type-app-label-m-weight: 500;
  --type-app-label-m-size: 0.9375rem;
  --type-app-label-m-line-height: 1.25rem;
  --type-app-label-m-letter-spacing: 0;

  /* App/Label/S */
  --type-app-label-s-family: "Poppins", sans-serif;
  --type-app-label-s-weight: 500;
  --type-app-label-s-size: 0.875rem;
  --type-app-label-s-line-height: 1.125rem;
  --type-app-label-s-letter-spacing: 0;

  /* Web/Body/S */
  --type-web-body-s-family: "Poppins", sans-serif;
  --type-web-body-s-weight: 400;
  --type-web-body-s-size: 0.875rem;
  --type-web-body-s-line-height: 1.125rem;
  --type-web-body-s-letter-spacing: 0;

  /* Web/Body/XL */
  --type-web-body-xl-family: "Poppins", sans-serif;
  --type-web-body-xl-weight: 400;
  --type-web-body-xl-size: 1rem;
  --type-web-body-xl-line-height: 1.25rem;
  --type-web-body-xl-letter-spacing: 0;

  /* Web/Caption/Medium */
  --type-web-caption-medium-family: "Poppins", sans-serif;
  --type-web-caption-medium-weight: 500;
  --type-web-caption-medium-size: 0.75rem;
  --type-web-caption-medium-line-height: 1rem;
  --type-web-caption-medium-letter-spacing: 0;

  /* Web/Caption/Regular */
  --type-web-caption-regular-family: "Poppins", sans-serif;
  --type-web-caption-regular-weight: 400;
  --type-web-caption-regular-size: 0.75rem;
  --type-web-caption-regular-line-height: 1rem;
  --type-web-caption-regular-letter-spacing: 0;

  /* Web/Label/S */
  --type-web-label-s-family: "Poppins", sans-serif;
  --type-web-label-s-weight: 500;
  --type-web-label-s-size: 0.875rem;
  --type-web-label-s-line-height: 1.125rem;
  --type-web-label-s-letter-spacing: 0;

  /* Web/Title/L */
  --type-web-title-l-family: "Poppins", sans-serif;
  --type-web-title-l-weight: 500;
  --type-web-title-l-size: 1.75rem;
  --type-web-title-l-line-height: 2rem;
  --type-web-title-l-letter-spacing: 0;

  /* Web/Title/M */
  --type-web-title-m-family: "Poppins", sans-serif;
  --type-web-title-m-weight: 500;
  --type-web-title-m-size: 1.375rem;
  --type-web-title-m-line-height: 1.75rem;
  --type-web-title-m-letter-spacing: 0;

  /* Web/Title/S */
  --type-web-title-s-family: "Poppins", sans-serif;
  --type-web-title-s-weight: 500;
  --type-web-title-s-size: 1.25rem;
  --type-web-title-s-line-height: 1.5rem;
  --type-web-title-s-letter-spacing: 0;

  /* Web/Title/XL */
  --type-web-title-xl-family: "Poppins", sans-serif;
  --type-web-title-xl-weight: 500;
  --type-web-title-xl-size: 2.5rem;
  --type-web-title-xl-line-height: 3.25rem;
  --type-web-title-xl-letter-spacing: 0;

  /* Web/Title/XS */
  --type-web-title-xs-family: "Poppins", sans-serif;
  --type-web-title-xs-weight: 500;
  --type-web-title-xs-size: 1rem;
  --type-web-title-xs-line-height: 1.25rem;
  --type-web-title-xs-letter-spacing: 0;
}

/* 768 and up */
@media (min-width: 48rem) {
  :root {
    --type-web-body-xl-line-height: 1.375rem;
    --type-web-title-l-size: 2.25rem;
    --type-web-title-l-line-height: 2.625rem;
    --type-web-title-m-size: 1.625rem;
    --type-web-title-m-line-height: 2rem;
    --type-web-title-xl-size: 3.5rem;
    --type-web-title-xl-line-height: 4rem;
    --type-web-title-xs-line-height: 1.375rem;
  }
}

/* 1024 and up */
@media (min-width: 64rem) {
  :root {
    --type-web-body-xl-size: 1.125rem;
    --type-web-body-xl-line-height: 1.5rem;
    --type-web-title-l-line-height: 2.75rem;
    --type-web-title-s-size: 1.375rem;
    --type-web-title-s-line-height: 1.75rem;
    --type-web-title-xs-size: 1.125rem;
    --type-web-title-xs-line-height: 1.5rem;
  }
}

/* 1440 and up */
@media (min-width: 90rem) {
  :root {
    --type-web-title-xl-size: 3.875rem;
    --type-web-title-xl-line-height: 4.5rem;
  }
}

/* App/Body/L — Descriptions in cards */
.type-app-body-l {
  font-family: var(--type-app-body-l-family);
  font-weight: var(--type-app-body-l-weight);
  font-size: var(--type-app-body-l-size);
  line-height: var(--type-app-body-l-line-height);
  letter-spacing: var(--type-app-body-l-letter-spacing);
}

/* App/Body/M — Main body text */
.type-app-body-m {
  font-family: var(--type-app-body-m-family);
  font-weight: var(--type-app-body-m-weight);
  font-size: var(--type-app-body-m-size);
  line-height: var(--type-app-body-m-line-height);
  letter-spacing: var(--type-app-body-m-letter-spacing);
}

/* App/Body/S — Supporting text inside inputs */
.type-app-body-s {
  font-family: var(--type-app-body-s-family);
  font-weight: var(--type-app-body-s-weight);
  font-size: var(--type-app-body-s-size);
  line-height: var(--type-app-body-s-line-height);
  letter-spacing: var(--type-app-body-s-letter-spacing);
}

/* App/Body/XL — Status labels in agent activity */
.type-app-body-xl {
  font-family: var(--type-app-body-xl-family);
  font-weight: var(--type-app-body-xl-weight);
  font-size: var(--type-app-body-xl-size);
  line-height: var(--type-app-body-xl-line-height);
  letter-spacing: var(--type-app-body-xl-letter-spacing);
}

/* App/Caption/Medium — Small UI text: badges, calendar cells, segmented-select options, timestamps in message bubbles, validation messages. */
.type-app-caption-medium {
  font-family: var(--type-app-caption-medium-family);
  font-weight: var(--type-app-caption-medium-weight);
  font-size: var(--type-app-caption-medium-size);
  line-height: var(--type-app-caption-medium-line-height);
  letter-spacing: var(--type-app-caption-medium-letter-spacing);
}

/* App/Caption/Regular — Helper text and hints */
.type-app-caption-regular {
  font-family: var(--type-app-caption-regular-family);
  font-weight: var(--type-app-caption-regular-weight);
  font-size: var(--type-app-caption-regular-size);
  line-height: var(--type-app-caption-regular-line-height);
  letter-spacing: var(--type-app-caption-regular-letter-spacing);
}

/* App/Caption/XS — Uppercase micro labels and counters */
.type-app-caption-xs {
  font-family: var(--type-app-caption-xs-family);
  font-weight: var(--type-app-caption-xs-weight);
  font-size: var(--type-app-caption-xs-size);
  line-height: var(--type-app-caption-xs-line-height);
  letter-spacing: var(--type-app-caption-xs-letter-spacing);
  text-transform: var(--type-app-caption-xs-text-transform);
}

/* App/Heading/L — Page titles on main app screens */
.type-app-heading-l {
  font-family: var(--type-app-heading-l-family);
  font-weight: var(--type-app-heading-l-weight);
  font-size: var(--type-app-heading-l-size);
  line-height: var(--type-app-heading-l-line-height);
  letter-spacing: var(--type-app-heading-l-letter-spacing);
}

/* App/Heading/M — Section titles inside pages */
.type-app-heading-m {
  font-family: var(--type-app-heading-m-family);
  font-weight: var(--type-app-heading-m-weight);
  font-size: var(--type-app-heading-m-size);
  line-height: var(--type-app-heading-m-line-height);
  letter-spacing: var(--type-app-heading-m-letter-spacing);
}

/* App/Heading/S — Agent names in agent views */
.type-app-heading-s {
  font-family: var(--type-app-heading-s-family);
  font-weight: var(--type-app-heading-s-weight);
  font-size: var(--type-app-heading-s-size);
  line-height: var(--type-app-heading-s-line-height);
  letter-spacing: var(--type-app-heading-s-letter-spacing);
}

/* App/Heading/XS — Titles of cards and list items */
.type-app-heading-xs {
  font-family: var(--type-app-heading-xs-family);
  font-weight: var(--type-app-heading-xs-weight);
  font-size: var(--type-app-heading-xs-size);
  line-height: var(--type-app-heading-xs-line-height);
  letter-spacing: var(--type-app-heading-xs-letter-spacing);
}

/* App/Label/L — Large input text and prompts, buttons */
.type-app-label-l {
  font-family: var(--type-app-label-l-family);
  font-weight: var(--type-app-label-l-weight);
  font-size: var(--type-app-label-l-size);
  line-height: var(--type-app-label-l-line-height);
  letter-spacing: var(--type-app-label-l-letter-spacing);
}

/* App/Label/M — Default UI label, buttons */
.type-app-label-m {
  font-family: var(--type-app-label-m-family);
  font-weight: var(--type-app-label-m-weight);
  font-size: var(--type-app-label-m-size);
  line-height: var(--type-app-label-m-line-height);
  letter-spacing: var(--type-app-label-m-letter-spacing);
}

/* App/Label/S — Compact labels */
.type-app-label-s {
  font-family: var(--type-app-label-s-family);
  font-weight: var(--type-app-label-s-weight);
  font-size: var(--type-app-label-s-size);
  line-height: var(--type-app-label-s-line-height);
  letter-spacing: var(--type-app-label-s-letter-spacing);
}

/* Web/Body/S — Default web body text: footer links, web-tab and menu-item-web labels, layout copy. */
.type-web-body-s {
  font-family: var(--type-web-body-s-family);
  font-weight: var(--type-web-body-s-weight);
  font-size: var(--type-web-body-s-size);
  line-height: var(--type-web-body-s-line-height);
  letter-spacing: var(--type-web-body-s-letter-spacing);
}

/* Web/Body/XL — Lead paragraphs, FAQ answers (faq-item), testimonial quotes (review). */
.type-web-body-xl {
  font-family: var(--type-web-body-xl-family);
  font-weight: var(--type-web-body-xl-weight);
  font-size: var(--type-web-body-xl-size);
  line-height: var(--type-web-body-xl-line-height);
  letter-spacing: var(--type-web-body-xl-letter-spacing);
}

/* Web/Caption/Medium — Footer links and timeline-item phase labels */
.type-web-caption-medium {
  font-family: var(--type-web-caption-medium-family);
  font-weight: var(--type-web-caption-medium-weight);
  font-size: var(--type-web-caption-medium-size);
  line-height: var(--type-web-caption-medium-line-height);
  letter-spacing: var(--type-web-caption-medium-letter-spacing);
}

/* Web/Caption/Regular — Footer legal text (copyright, address, compliance) and small notes */
.type-web-caption-regular {
  font-family: var(--type-web-caption-regular-family);
  font-weight: var(--type-web-caption-regular-weight);
  font-size: var(--type-web-caption-regular-size);
  line-height: var(--type-web-caption-regular-line-height);
  letter-spacing: var(--type-web-caption-regular-letter-spacing);
}

/* Web/Label/S — Buttons (btn), web-tab numbers, footer column headings, segmented-select items. */
.type-web-label-s {
  font-family: var(--type-web-label-s-family);
  font-weight: var(--type-web-label-s-weight);
  font-size: var(--type-web-label-s-size);
  line-height: var(--type-web-label-s-line-height);
  letter-spacing: var(--type-web-label-s-letter-spacing);
}

/* Web/Title/L — Section titles and get-started block headings */
.type-web-title-l {
  font-family: var(--type-web-title-l-family);
  font-weight: var(--type-web-title-l-weight);
  font-size: var(--type-web-title-l-size);
  line-height: var(--type-web-title-l-line-height);
  letter-spacing: var(--type-web-title-l-letter-spacing);
}

/* Web/Title/M — Subsection headings and large figures */
.type-web-title-m {
  font-family: var(--type-web-title-m-family);
  font-weight: var(--type-web-title-m-weight);
  font-size: var(--type-web-title-m-size);
  line-height: var(--type-web-title-m-line-height);
  letter-spacing: var(--type-web-title-m-letter-spacing);
}

/* Web/Title/S — Feature headings in get-started; progress values in Onboarding. */
.type-web-title-s {
  font-family: var(--type-web-title-s-family);
  font-weight: var(--type-web-title-s-weight);
  font-size: var(--type-web-title-s-size);
  line-height: var(--type-web-title-s-line-height);
  letter-spacing: var(--type-web-title-s-letter-spacing);
}

/* Web/Title/XL — Page hero titles */
.type-web-title-xl {
  font-family: var(--type-web-title-xl-family);
  font-weight: var(--type-web-title-xl-weight);
  font-size: var(--type-web-title-xl-size);
  line-height: var(--type-web-title-xl-line-height);
  letter-spacing: var(--type-web-title-xl-letter-spacing);
}

/* Web/Title/XS — Card titles, nav-dropdown items, timeline-item quarters, amounts. */
.type-web-title-xs {
  font-family: var(--type-web-title-xs-family);
  font-weight: var(--type-web-title-xs-weight);
  font-size: var(--type-web-title-xs-size);
  line-height: var(--type-web-title-xs-line-height);
  letter-spacing: var(--type-web-title-xs-letter-spacing);
}


/* ---- src/assets/styles/tokens/sizes.css ---- */

/* AUTO-GENERATED from Figma by scripts/sync-figma-tokens.mjs — do not edit by hand.
 * Run `yarn tokens:build` to regenerate this file.
 *
 * Size, spacing and radius variables from Figma, in rem; docs/designSystem/figmaTokens.md maps
 * each Figma variable name to its CSS variable. Mobile-first: responsive values change at the
 * min-widths below. Only values that change are repeated.
 */

:root {
  /* Sizes / Semantic (App) */
  --border-radius-0: 0rem;
  --border-radius-2: 0.125rem;
  --border-radius-4: 0.25rem;
  --border-radius-8: 0.5rem;
  --border-radius-12: 0.75rem;
  --border-radius-16: 1rem;
  --border-radius-20: 1.25rem;
  --border-radius-24: 1.5rem;
  --border-radius-32: 2rem;
  --border-radius-full: 6.25rem;

  /* Sizes / Semantic Token (Responsiveness) */
  --size-button-height: 2.75rem;
  --size-button-horizontal-padding: 1rem;
  --size-container-max-width: 62.5rem;
  --size-horizontal-gap-md: 1rem;
  --size-horizontal-gap-sm: 1rem;
  --size-horizontal-margins-section: 1rem;
  --size-screen-width: 23.4375rem;
  --size-text-max-width: 37.5rem;
  --size-title-body-gap: 1rem;
  --size-vertical-gap-section: 2.5rem;
  --size-vertical-margins-section: 4rem;
}

/* 768 and up */
@media (min-width: 48rem) {
  :root {
    --size-button-height: 3.25rem;
    --size-button-horizontal-padding: 1.25rem;
    --size-horizontal-gap-md: 1.5rem;
    --size-horizontal-margins-section: 1.5rem;
    --size-screen-width: 48rem;
    --size-title-body-gap: 1.25rem;
    --size-vertical-gap-section: 3rem;
    --size-vertical-margins-section: 4.5rem;
  }
}

/* 1024 and up */
@media (min-width: 64rem) {
  :root {
    --size-horizontal-gap-md: 3rem;
    --size-horizontal-gap-sm: 1.5rem;
    --size-screen-width: 64rem;
    --size-vertical-gap-section: 3.5rem;
    --size-vertical-margins-section: 5rem;
  }
}

/* 1440 and up */
@media (min-width: 90rem) {
  :root {
    --size-horizontal-margins-section: 5rem;
    --size-screen-width: 120rem;
  }
}


/* ---- src/assets/styles/tokens/effects.css ---- */

/* AUTO-GENERATED from Figma by scripts/sync-figma-tokens.mjs — do not edit by hand.
 * Run `yarn tokens:build` to regenerate this file.
 *
 * Shadow effect styles from Figma as box-shadow values, in rem; docs/designSystem/figmaTokens.md
 * maps each Figma effect style name to its CSS variable.
 */

:root {
  /* Accent-hover */
  --shadow-accent-hover: 0 0 0.125rem 0 #00000033, 0 0 0.225rem 0 #343ced, 0 0 0.625rem 0 #343cedad;
  /* Misc/button-neutral */
  --shadow-misc-button-neutral: 0 0 0.3125rem 0 #8585858c;
  /* Misc/button-primary */
  --shadow-misc-button-primary: 0 0 0.3125rem 0 #343cedd9;
  /* Misc/neutral-2 */
  --shadow-misc-neutral-2: 0 0 0.275rem 0 #85858540;
}


/* ---- src/assets/styles/tokens/componentTokens.css ---- */

/* AUTO-GENERATED from Figma by scripts/sync-figma-tokens.mjs — do not edit by hand.
 * Run `yarn tokens:build` to regenerate this file.
 *
 * The values behind the design-system classes in src/assets/styles/components.css, read from the
 * Figma components (see COMPONENT_SPECS in scripts/figmaTokens/exportSnapshot.plugin.js). Declared
 * on [data-theme] too, so the var() references follow a nested light/dark theme.
 */

:root,
[data-theme] {
  /* btn */
  --ds-btn-height: 3.25rem;
  --ds-btn-padding-x: 1.25rem;
  --ds-btn-padding-y: 0.5rem;
  --ds-btn-gap: 0.125rem;
  --ds-btn-radius: var(--border-radius-full);
  --ds-btn-font: var(--type-app-label-m-weight) var(--type-app-label-m-size) / var(--type-app-label-m-line-height) var(--type-app-label-m-family);
  --ds-btn-font-letter-spacing: var(--type-app-label-m-letter-spacing);
  --ds-btn-label-padding-x: 0.25rem;
  --ds-btn-icon-size: 1.5rem;
  --ds-btn-border-width: 0.0625rem;
  --ds-btn-primary-bg: var(--color-primary-500);
  --ds-btn-primary-border: transparent;
  --ds-btn-primary-shadow: none;
  --ds-btn-primary-color: var(--color-white);
  --ds-btn-primary-hover-bg: var(--color-primary-500);
  --ds-btn-primary-hover-border: transparent;
  --ds-btn-primary-hover-shadow: 0 0 0.4375rem 0 #343ced;
  --ds-btn-primary-hover-color: var(--color-white);
  --ds-btn-primary-disabled-bg: var(--color-greyscale-400);
  --ds-btn-primary-disabled-border: transparent;
  --ds-btn-primary-disabled-shadow: none;
  --ds-btn-primary-disabled-color: var(--color-white);
  --ds-btn-danger-bg: #ff383c;
  --ds-btn-danger-border: transparent;
  --ds-btn-danger-shadow: none;
  --ds-btn-danger-color: var(--color-white);
  --ds-btn-danger-hover-bg: var(--color-accent-red);
  --ds-btn-danger-hover-border: transparent;
  --ds-btn-danger-hover-shadow: 0 0 0.4375rem 0 #ff383c;
  --ds-btn-danger-hover-color: var(--color-white);
  --ds-btn-danger-disabled-bg: var(--color-greyscale-400);
  --ds-btn-danger-disabled-border: transparent;
  --ds-btn-danger-disabled-shadow: none;
  --ds-btn-danger-disabled-color: var(--color-white);
  --ds-btn-secondary-bg: var(--color-surface-1);
  --ds-btn-secondary-border: var(--color-surface-outline-1);
  --ds-btn-secondary-shadow: none;
  --ds-btn-secondary-color: var(--color-text-secondary);
  --ds-btn-secondary-hover-bg: var(--color-surface-2);
  --ds-btn-secondary-hover-border: var(--color-surface-outline-1);
  --ds-btn-secondary-hover-shadow: none;
  --ds-btn-secondary-hover-color: var(--color-text-secondary);
  --ds-btn-secondary-disabled-bg: var(--color-surface-1);
  --ds-btn-secondary-disabled-border: var(--color-surface-outline-2);
  --ds-btn-secondary-disabled-shadow: none;
  --ds-btn-secondary-disabled-color: var(--color-text-disabled);
  --ds-btn-on-dark-bg: var(--color-surface-1);
  --ds-btn-on-dark-border: var(--color-surface-outline-1);
  --ds-btn-on-dark-shadow: none;
  --ds-btn-on-dark-color: var(--color-text-secondary);
  --ds-btn-on-dark-hover-bg: var(--color-primary-500);
  --ds-btn-on-dark-hover-border: transparent;
  --ds-btn-on-dark-hover-shadow: none;
  --ds-btn-on-dark-hover-color: var(--color-greyscale-50);
  --ds-btn-on-dark-disabled-bg: var(--color-surface-2);
  --ds-btn-on-dark-disabled-border: transparent;
  --ds-btn-on-dark-disabled-shadow: none;
  --ds-btn-on-dark-disabled-color: var(--color-text-disabled);

  /* icon-btn */
  --ds-icon-btn-size: 3.25rem;
  --ds-icon-btn-padding: 0.5rem;
  --ds-icon-btn-radius: var(--border-radius-full);
  --ds-icon-btn-icon-size: 1.5rem;
  --ds-icon-btn-border-width: 0.0625rem;
  --ds-icon-btn-sm-size: 2.25rem;
  --ds-icon-btn-sm-padding: 0.5rem;
  --ds-icon-btn-sm-icon-size: 1rem;
  --ds-icon-btn-secondary-bg: transparent;
  --ds-icon-btn-secondary-border: var(--color-surface-outline-1);
  --ds-icon-btn-secondary-shadow: none;
  --ds-icon-btn-secondary-hover-bg: var(--color-surface-2);
  --ds-icon-btn-secondary-hover-border: var(--color-surface-outline-1);
  --ds-icon-btn-secondary-hover-shadow: none;
  --ds-icon-btn-secondary-disabled-bg: transparent;
  --ds-icon-btn-secondary-disabled-border: var(--color-surface-outline-2);
  --ds-icon-btn-secondary-disabled-shadow: none;
  --ds-icon-btn-tertiary-bg: transparent;
  --ds-icon-btn-tertiary-border: transparent;
  --ds-icon-btn-tertiary-shadow: none;
  --ds-icon-btn-tertiary-hover-bg: var(--color-surface-2);
  --ds-icon-btn-tertiary-hover-border: transparent;
  --ds-icon-btn-tertiary-hover-shadow: none;
  --ds-icon-btn-tertiary-disabled-bg: transparent;
  --ds-icon-btn-tertiary-disabled-border: transparent;
  --ds-icon-btn-tertiary-disabled-shadow: none;

  /* input */
  --ds-input-height: 4.25rem;
  --ds-input-padding-x: 2rem;
  --ds-input-padding-y: 0.75rem;
  --ds-input-gap: 0.5rem;
  --ds-input-radius: var(--border-radius-full);
  --ds-input-border-width: 0.0625rem;
  --ds-input-font: var(--type-app-label-l-weight) var(--type-app-label-l-size) / var(--type-app-label-l-line-height) var(--type-app-label-l-family);
  --ds-input-font-letter-spacing: var(--type-app-label-l-letter-spacing);
  --ds-input-sm-height: 3.5rem;
  --ds-input-sm-padding-x: 1.25rem;
  --ds-input-sm-padding-y: 0.75rem;
  --ds-input-sm-gap: 0.5rem;
  --ds-input-sm-radius: var(--border-radius-full);
  --ds-input-sm-border-width: 0.0625rem;
  --ds-input-sm-font: var(--type-app-label-m-weight) var(--type-app-label-m-size) / var(--type-app-label-m-line-height) var(--type-app-label-m-family);
  --ds-input-sm-font-letter-spacing: var(--type-app-label-m-letter-spacing);
  --ds-input-xs-height: 2.25rem;
  --ds-input-xs-padding-x: 0.5rem;
  --ds-input-xs-padding-y: 0.125rem;
  --ds-input-xs-gap: 0.25rem;
  --ds-input-xs-radius: var(--border-radius-8);
  --ds-input-xs-border-width: 0.0313rem;
  --ds-input-xs-font: var(--type-app-label-s-weight) var(--type-app-label-s-size) / var(--type-app-label-s-line-height) var(--type-app-label-s-family);
  --ds-input-xs-font-letter-spacing: var(--type-app-label-s-letter-spacing);
  --ds-input-bg: var(--color-surface-bg);
  --ds-input-border: var(--color-surface-outline-1);
  --ds-input-shadow: 0 0 0.1316rem 0 #00000033;
  --ds-input-focus-bg: var(--color-surface-bg);
  --ds-input-focus-border: var(--color-accent);
  --ds-input-focus-shadow: 0 0 0.1316rem 0 #00000033;
  --ds-input-error-bg: var(--color-surface-bg);
  --ds-input-error-border: var(--color-accent-red);
  --ds-input-error-shadow: 0 0 0.1316rem 0 #ff3a28;
  --ds-input-disabled-bg: var(--color-surface-2);
  --ds-input-disabled-border: var(--color-surface-outline-1);
  --ds-input-disabled-shadow: 0 0 0.1316rem 0 #00000033;
  --ds-input-placeholder-color: var(--color-text-disabled);
  --ds-input-color: var(--color-text-primary);
  --ds-input-disabled-color: var(--color-text-disabled);
  --ds-input-hint-gap: 0.25rem;
  --ds-input-hint-padding-x: 2rem;
  --ds-input-hint-font: var(--type-app-caption-medium-weight) var(--type-app-caption-medium-size) / var(--type-app-caption-medium-line-height) var(--type-app-caption-medium-family);
  --ds-input-hint-font-letter-spacing: var(--type-app-caption-medium-letter-spacing);
  --ds-input-hint-color: var(--color-accent-red);

  /* checkbox */
  --ds-checkbox-size: 1rem;
  --ds-checkbox-radius: var(--border-radius-4);
  --ds-checkbox-border-width: 0.0625rem;
  --ds-checkbox-icon-size: 0.75rem;
  --ds-checkbox-bg: transparent;
  --ds-checkbox-border: var(--color-surface-outline-1);
  --ds-checkbox-shadow: none;
  --ds-checkbox-hover-bg: var(--color-surface-2);
  --ds-checkbox-hover-border: var(--color-surface-outline-1);
  --ds-checkbox-hover-shadow: none;
  --ds-checkbox-disabled-bg: var(--color-surface-1);
  --ds-checkbox-disabled-border: var(--color-surface-outline-2);
  --ds-checkbox-disabled-shadow: none;
  --ds-checkbox-checked-bg: var(--color-primary-500);
  --ds-checkbox-checked-border: transparent;
  --ds-checkbox-checked-shadow: none;
  --ds-checkbox-checked-hover-bg: var(--color-primary-600);
  --ds-checkbox-checked-hover-border: transparent;
  --ds-checkbox-checked-hover-shadow: none;
  --ds-checkbox-checked-disabled-bg: var(--color-surface-1);
  --ds-checkbox-checked-disabled-border: var(--color-surface-outline-2);
  --ds-checkbox-checked-disabled-shadow: none;
  --ds-checkbox-check: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3L4.5 8.5L2 6' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ds-checkbox-check-disabled: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3L4.5 8.5L2 6' stroke='%23E8E8E8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ds-checkbox-minus: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6H9.5' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ds-checkbox-minus-disabled: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6H9.5' stroke='%23E8E8E8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* radio */
  --ds-radio-size: 1rem;
  --ds-radio-border-width: 0.0625rem;
  --ds-radio-dot-size: 0.375rem;
  --ds-radio-bg: transparent;
  --ds-radio-border: var(--color-surface-outline-1);
  --ds-radio-shadow: none;
  --ds-radio-hover-bg: var(--color-surface-2);
  --ds-radio-hover-border: var(--color-surface-outline-1);
  --ds-radio-hover-shadow: none;
  --ds-radio-disabled-bg: var(--color-surface-2);
  --ds-radio-disabled-border: var(--color-surface-outline-2);
  --ds-radio-disabled-shadow: none;
  --ds-radio-checked-bg: var(--color-primary-500);
  --ds-radio-checked-border: transparent;
  --ds-radio-checked-shadow: none;
  --ds-radio-checked-hover-bg: var(--color-primary-600);
  --ds-radio-checked-hover-border: transparent;
  --ds-radio-checked-hover-shadow: none;
  --ds-radio-checked-disabled-bg: var(--color-surface-2);
  --ds-radio-checked-disabled-border: var(--color-surface-outline-2);
  --ds-radio-checked-disabled-shadow: none;
  --ds-radio-dot: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3C0 1.34315 1.34315 0 3 0C4.65685 0 6 1.34315 6 3C6 4.65685 4.65685 6 3 6C1.34315 6 0 4.65685 0 3Z' fill='white'/%3E%3C/svg%3E");
  --ds-radio-dot-disabled: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3C0 1.34315 1.34315 0 3 0C4.65685 0 6 1.34315 6 3C6 4.65685 4.65685 6 3 6C1.34315 6 0 4.65685 0 3Z' fill='%23E8E8E8'/%3E%3C/svg%3E");

  /* toggle */
  --ds-toggle-width: 1.625rem;
  --ds-toggle-height: 1rem;
  --ds-toggle-knob-size: 0.75rem;
  --ds-toggle-md-width: 2.5rem;
  --ds-toggle-md-height: 1.375rem;
  --ds-toggle-md-knob-size: 1.125rem;
  --ds-toggle-padding: 0.125rem;
  --ds-toggle-border-width: 0.0313rem;
  --ds-toggle-bg: var(--color-greyscale-100);
  --ds-toggle-border: var(--color-greyscale-200);
  --ds-toggle-shadow: inset 0 0 0.1404rem 0 #0000001a;
  --ds-toggle-knob: var(--color-greyscale-50);
  --ds-toggle-knob-shadow: 0 0 0.125rem 0 #00000040;
  --ds-toggle-disabled-bg: var(--color-greyscale-100);
  --ds-toggle-disabled-border: var(--color-greyscale-100);
  --ds-toggle-disabled-shadow: none;
  --ds-toggle-disabled-knob: var(--color-white);
  --ds-toggle-disabled-knob-shadow: none;
  --ds-toggle-on-bg: var(--color-accent-green);
  --ds-toggle-on-border: transparent;
  --ds-toggle-on-shadow: inset 0 0 0.1404rem 0 #0000001a;
  --ds-toggle-on-knob: var(--color-white);
  --ds-toggle-on-knob-shadow: 0 0 0.125rem 0 #00000040;
  --ds-toggle-on-disabled-bg: var(--color-text-disabled);
  --ds-toggle-on-disabled-border: transparent;
  --ds-toggle-on-disabled-shadow: inset 0 0 0.1404rem 0 #0000001a;
  --ds-toggle-on-disabled-knob: var(--color-white);
  --ds-toggle-on-disabled-knob-shadow: 0 0 0.125rem 0 #00000040;
}


/* ---- src/assets/styles/components.css ---- */

/*
 * Design-system component classes, from the Figma "Components" page.
 *
 * Every value is a variable, never a literal (src/__tests__/designSystemComponents.test.ts enforces
 * this):
 *   --ds-*                       component values read from the Figma components, generated into
 *                                tokens/componentTokens.css by `yarn tokens:build`
 *   --color-*, --type-*, --border-radius-*, --shadow-*   the Figma design tokens
 * So when the design changes in Figma, re-exporting the snapshot and running `yarn tokens:build`
 * restyles these classes; this file only changes when a component gains a new state or part.
 *
 * Each class keeps its colours in private --_* properties: a modifier or state only reassigns them.
 * Markup for each class: docs/designSystem/README.md.
 */

/* ---- Button (Figma "btn"): <button class="ds-btn">, ds-btn--secondary, ds-btn--danger ---- */

.ds-btn {
  --_bg: var(--ds-btn-primary-bg);
  --_border: var(--ds-btn-primary-border);
  --_shadow: var(--ds-btn-primary-shadow);
  --_color: var(--ds-btn-primary-color);
  --_bg-hover: var(--ds-btn-primary-hover-bg);
  --_border-hover: var(--ds-btn-primary-hover-border);
  --_shadow-hover: var(--ds-btn-primary-hover-shadow);
  --_color-hover: var(--ds-btn-primary-hover-color);
  --_bg-disabled: var(--ds-btn-primary-disabled-bg);
  --_border-disabled: var(--ds-btn-primary-disabled-border);
  --_shadow-disabled: var(--ds-btn-primary-disabled-shadow);
  --_color-disabled: var(--ds-btn-primary-disabled-color);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-btn-gap);
  box-sizing: border-box;
  height: var(--ds-btn-height);
  margin: initial;
  padding: var(--ds-btn-padding-y) var(--ds-btn-padding-x);
  border: var(--ds-btn-border-width) solid var(--_border);
  border-radius: var(--ds-btn-radius);
  background: var(--_bg);
  box-shadow: var(--_shadow);
  color: var(--_color);
  font: var(--ds-btn-font);
  letter-spacing: var(--ds-btn-font-letter-spacing);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.ds-btn:hover:not(:disabled, [aria-disabled="true"]) {
  border-color: var(--_border-hover);
  background: var(--_bg-hover);
  box-shadow: var(--_shadow-hover);
  color: var(--_color-hover);
}

.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
  border-color: var(--_border-disabled);
  background: var(--_bg-disabled);
  box-shadow: var(--_shadow-disabled);
  color: var(--_color-disabled);
  cursor: not-allowed;
}

/* Optional parts: <span class="ds-btn__label"> keeps Figma's text padding; ds-btn__icon sizes an icon. */
.ds-btn__label {
  padding-inline: var(--ds-btn-label-padding-x);
}

.ds-btn__icon {
  flex: none;
  width: var(--ds-btn-icon-size);
  height: var(--ds-btn-icon-size);
}

.ds-btn--secondary {
  --_bg: var(--ds-btn-secondary-bg);
  --_border: var(--ds-btn-secondary-border);
  --_shadow: var(--ds-btn-secondary-shadow);
  --_color: var(--ds-btn-secondary-color);
  --_bg-hover: var(--ds-btn-secondary-hover-bg);
  --_border-hover: var(--ds-btn-secondary-hover-border);
  --_shadow-hover: var(--ds-btn-secondary-hover-shadow);
  --_color-hover: var(--ds-btn-secondary-hover-color);
  --_bg-disabled: var(--ds-btn-secondary-disabled-bg);
  --_border-disabled: var(--ds-btn-secondary-disabled-border);
  --_shadow-disabled: var(--ds-btn-secondary-disabled-shadow);
  --_color-disabled: var(--ds-btn-secondary-disabled-color);
}

/* Figma's "color theme=dark" secondary button: used wherever data-theme="dark" applies. */
[data-theme="dark"] .ds-btn--secondary {
  --_bg: var(--ds-btn-on-dark-bg);
  --_border: var(--ds-btn-on-dark-border);
  --_shadow: var(--ds-btn-on-dark-shadow);
  --_color: var(--ds-btn-on-dark-color);
  --_bg-hover: var(--ds-btn-on-dark-hover-bg);
  --_border-hover: var(--ds-btn-on-dark-hover-border);
  --_shadow-hover: var(--ds-btn-on-dark-hover-shadow);
  --_color-hover: var(--ds-btn-on-dark-hover-color);
  --_bg-disabled: var(--ds-btn-on-dark-disabled-bg);
  --_border-disabled: var(--ds-btn-on-dark-disabled-border);
  --_shadow-disabled: var(--ds-btn-on-dark-disabled-shadow);
  --_color-disabled: var(--ds-btn-on-dark-disabled-color);
}

.ds-btn--danger {
  --_bg: var(--ds-btn-danger-bg);
  --_border: var(--ds-btn-danger-border);
  --_shadow: var(--ds-btn-danger-shadow);
  --_color: var(--ds-btn-danger-color);
  --_bg-hover: var(--ds-btn-danger-hover-bg);
  --_border-hover: var(--ds-btn-danger-hover-border);
  --_shadow-hover: var(--ds-btn-danger-hover-shadow);
  --_color-hover: var(--ds-btn-danger-hover-color);
  --_bg-disabled: var(--ds-btn-danger-disabled-bg);
  --_border-disabled: var(--ds-btn-danger-disabled-border);
  --_shadow-disabled: var(--ds-btn-danger-disabled-shadow);
  --_color-disabled: var(--ds-btn-danger-disabled-color);
}

/* ---- Icon button (Figma "icon-button"): <button class="ds-icon-btn"><img …></button> ---- */

.ds-icon-btn {
  --_size: var(--ds-icon-btn-size);
  --_padding: var(--ds-icon-btn-padding);
  --_icon-size: var(--ds-icon-btn-icon-size);
  --_bg: var(--ds-icon-btn-secondary-bg);
  --_border: var(--ds-icon-btn-secondary-border);
  --_shadow: var(--ds-icon-btn-secondary-shadow);
  --_bg-hover: var(--ds-icon-btn-secondary-hover-bg);
  --_border-hover: var(--ds-icon-btn-secondary-hover-border);
  --_shadow-hover: var(--ds-icon-btn-secondary-hover-shadow);
  --_bg-disabled: var(--ds-icon-btn-secondary-disabled-bg);
  --_border-disabled: var(--ds-icon-btn-secondary-disabled-border);
  --_shadow-disabled: var(--ds-icon-btn-secondary-disabled-shadow);

  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--_size);
  height: var(--_size);
  margin: initial;
  padding: var(--_padding);
  border: var(--ds-icon-btn-border-width) solid var(--_border);
  border-radius: var(--ds-icon-btn-radius);
  background: var(--_bg);
  box-shadow: var(--_shadow);
  cursor: pointer;
}

.ds-icon-btn > img,
.ds-icon-btn > svg {
  width: var(--_icon-size);
  height: var(--_icon-size);
}

.ds-icon-btn:hover:not(:disabled, [aria-disabled="true"]) {
  border-color: var(--_border-hover);
  background: var(--_bg-hover);
  box-shadow: var(--_shadow-hover);
}

.ds-icon-btn:disabled,
.ds-icon-btn[aria-disabled="true"] {
  border-color: var(--_border-disabled);
  background: var(--_bg-disabled);
  box-shadow: var(--_shadow-disabled);
  cursor: not-allowed;
}

.ds-icon-btn--sm {
  --_size: var(--ds-icon-btn-sm-size);
  --_padding: var(--ds-icon-btn-sm-padding);
  --_icon-size: var(--ds-icon-btn-sm-icon-size);
}

.ds-icon-btn--tertiary {
  --_bg: var(--ds-icon-btn-tertiary-bg);
  --_border: var(--ds-icon-btn-tertiary-border);
  --_shadow: var(--ds-icon-btn-tertiary-shadow);
  --_bg-hover: var(--ds-icon-btn-tertiary-hover-bg);
  --_border-hover: var(--ds-icon-btn-tertiary-hover-border);
  --_shadow-hover: var(--ds-icon-btn-tertiary-hover-shadow);
  --_bg-disabled: var(--ds-icon-btn-tertiary-disabled-bg);
  --_border-disabled: var(--ds-icon-btn-tertiary-disabled-border);
  --_shadow-disabled: var(--ds-icon-btn-tertiary-disabled-shadow);
}

/* ---- Text field (Figma "Input"): <input class="ds-input">, <textarea>, <select>; ds-input--sm/--xs ---- */

.ds-input {
  --_height: var(--ds-input-height);
  --_padding-x: var(--ds-input-padding-x);
  --_padding-y: var(--ds-input-padding-y);
  --_gap: var(--ds-input-gap);
  --_radius: var(--ds-input-radius);
  --_border-width: var(--ds-input-border-width);
  --_font: var(--ds-input-font);
  --_letter-spacing: var(--ds-input-font-letter-spacing);
  --_bg: var(--ds-input-bg);
  --_border: var(--ds-input-border);
  --_shadow: var(--ds-input-shadow);

  box-sizing: border-box;
  height: var(--_height);
  margin: initial;
  padding: var(--_padding-y) var(--_padding-x);
  border: var(--_border-width) solid var(--_border);
  border-radius: var(--_radius);
  outline: none;
  background: var(--_bg);
  box-shadow: var(--_shadow);
  color: var(--ds-input-color);
  font: var(--_font);
  letter-spacing: var(--_letter-spacing);
}

textarea.ds-input {
  height: auto;
  min-height: var(--_height);
}

.ds-input::placeholder {
  color: var(--ds-input-placeholder-color);
  opacity: initial;
}

/* Figma "State=Active". */
.ds-input:focus {
  --_bg: var(--ds-input-focus-bg);
  --_border: var(--ds-input-focus-border);
  --_shadow: var(--ds-input-focus-shadow);
}

/* Figma "State=Error": set aria-invalid="true" (or add ds-input--error) and show a .ds-input-hint. */
.ds-input[aria-invalid="true"],
.ds-input--error {
  --_bg: var(--ds-input-error-bg);
  --_border: var(--ds-input-error-border);
  --_shadow: var(--ds-input-error-shadow);
}

.ds-input:disabled {
  --_bg: var(--ds-input-disabled-bg);
  --_border: var(--ds-input-disabled-border);
  --_shadow: var(--ds-input-disabled-shadow);

  color: var(--ds-input-disabled-color);
  cursor: not-allowed;
}

.ds-input--sm {
  --_height: var(--ds-input-sm-height);
  --_padding-x: var(--ds-input-sm-padding-x);
  --_padding-y: var(--ds-input-sm-padding-y);
  --_gap: var(--ds-input-sm-gap);
  --_radius: var(--ds-input-sm-radius);
  --_border-width: var(--ds-input-sm-border-width);
  --_font: var(--ds-input-sm-font);
  --_letter-spacing: var(--ds-input-sm-font-letter-spacing);
}

.ds-input--xs {
  --_height: var(--ds-input-xs-height);
  --_padding-x: var(--ds-input-xs-padding-x);
  --_padding-y: var(--ds-input-xs-padding-y);
  --_gap: var(--ds-input-xs-gap);
  --_radius: var(--ds-input-xs-radius);
  --_border-width: var(--ds-input-xs-border-width);
  --_font: var(--ds-input-xs-font);
  --_letter-spacing: var(--ds-input-xs-font-letter-spacing);
}

/*
 * A field with icons, like Figma's password eye or select chevron: the wrapper is the field.
 *   <label class="ds-input ds-input-field"><input class="ds-input-field__control"><img …></label>
 */
.ds-input-field {
  display: flex;
  align-items: center;
  gap: var(--_gap);
  cursor: text;
}

.ds-input-field:focus-within {
  --_bg: var(--ds-input-focus-bg);
  --_border: var(--ds-input-focus-border);
  --_shadow: var(--ds-input-focus-shadow);
}

.ds-input-field:has([aria-invalid="true"]) {
  --_bg: var(--ds-input-error-bg);
  --_border: var(--ds-input-error-border);
  --_shadow: var(--ds-input-error-shadow);
}

.ds-input-field:has(.ds-input-field__control:disabled) {
  --_bg: var(--ds-input-disabled-bg);
  --_border: var(--ds-input-disabled-border);
  --_shadow: var(--ds-input-disabled-shadow);

  color: var(--ds-input-disabled-color);
  cursor: not-allowed;
}

.ds-input-field__control {
  flex: auto;
  margin: initial;
  padding: initial;
  border: none;
  outline: none;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

.ds-input-field__control::placeholder {
  color: var(--ds-input-placeholder-color);
  opacity: initial;
}

/* The error message under a field: <p class="ds-input-hint">. */
.ds-input-hint {
  display: block;
  margin: initial;
  margin-top: var(--ds-input-hint-gap);
  padding-inline: var(--ds-input-hint-padding-x);
  color: var(--ds-input-hint-color);
  font: var(--ds-input-hint-font);
  letter-spacing: var(--ds-input-hint-font-letter-spacing);
}

/* ---- Checkbox (Figma "checkbox"): <input type="checkbox" class="ds-checkbox"> ---- */

.ds-checkbox {
  --_bg: var(--ds-checkbox-bg);
  --_border: var(--ds-checkbox-border);
  --_shadow: var(--ds-checkbox-shadow);
  --_icon: none;

  flex: none;
  box-sizing: border-box;
  width: var(--ds-checkbox-size);
  height: var(--ds-checkbox-size);
  margin: initial;
  border: var(--ds-checkbox-border-width) solid var(--_border);
  border-radius: var(--ds-checkbox-radius);
  background: var(--_icon) center / var(--ds-checkbox-icon-size) no-repeat var(--_bg);
  box-shadow: var(--_shadow);
  vertical-align: middle;
  cursor: pointer;
  appearance: none;
}

.ds-checkbox:hover:not(:disabled) {
  --_bg: var(--ds-checkbox-hover-bg);
  --_border: var(--ds-checkbox-hover-border);
  --_shadow: var(--ds-checkbox-hover-shadow);
}

.ds-checkbox:checked,
.ds-checkbox:indeterminate {
  --_bg: var(--ds-checkbox-checked-bg);
  --_border: var(--ds-checkbox-checked-border);
  --_shadow: var(--ds-checkbox-checked-shadow);
  --_icon: var(--ds-checkbox-check);
}

.ds-checkbox:indeterminate {
  --_icon: var(--ds-checkbox-minus);
}

.ds-checkbox:checked:hover:not(:disabled),
.ds-checkbox:indeterminate:hover:not(:disabled) {
  --_bg: var(--ds-checkbox-checked-hover-bg);
  --_border: var(--ds-checkbox-checked-hover-border);
  --_shadow: var(--ds-checkbox-checked-hover-shadow);
}

.ds-checkbox:disabled {
  --_bg: var(--ds-checkbox-disabled-bg);
  --_border: var(--ds-checkbox-disabled-border);
  --_shadow: var(--ds-checkbox-disabled-shadow);

  cursor: not-allowed;
}

.ds-checkbox:checked:disabled,
.ds-checkbox:indeterminate:disabled {
  --_bg: var(--ds-checkbox-checked-disabled-bg);
  --_border: var(--ds-checkbox-checked-disabled-border);
  --_shadow: var(--ds-checkbox-checked-disabled-shadow);
  --_icon: var(--ds-checkbox-check-disabled);
}

.ds-checkbox:indeterminate:disabled {
  --_icon: var(--ds-checkbox-minus-disabled);
}

/* ---- Radio (Figma "radio"): <input type="radio" class="ds-radio"> ---- */

.ds-radio {
  --_bg: var(--ds-radio-bg);
  --_border: var(--ds-radio-border);
  --_shadow: var(--ds-radio-shadow);
  --_dot: none;

  flex: none;
  box-sizing: border-box;
  width: var(--ds-radio-size);
  height: var(--ds-radio-size);
  margin: initial;
  border: var(--ds-radio-border-width) solid var(--_border);
  border-radius: var(--border-radius-full);
  background: var(--_dot) center / var(--ds-radio-dot-size) no-repeat var(--_bg);
  box-shadow: var(--_shadow);
  vertical-align: middle;
  cursor: pointer;
  appearance: none;
}

.ds-radio:hover:not(:disabled) {
  --_bg: var(--ds-radio-hover-bg);
  --_border: var(--ds-radio-hover-border);
  --_shadow: var(--ds-radio-hover-shadow);
}

.ds-radio:checked {
  --_bg: var(--ds-radio-checked-bg);
  --_border: var(--ds-radio-checked-border);
  --_shadow: var(--ds-radio-checked-shadow);
  --_dot: var(--ds-radio-dot);
}

.ds-radio:checked:hover:not(:disabled) {
  --_bg: var(--ds-radio-checked-hover-bg);
  --_border: var(--ds-radio-checked-hover-border);
  --_shadow: var(--ds-radio-checked-hover-shadow);
}

.ds-radio:disabled {
  --_bg: var(--ds-radio-disabled-bg);
  --_border: var(--ds-radio-disabled-border);
  --_shadow: var(--ds-radio-disabled-shadow);

  cursor: not-allowed;
}

.ds-radio:checked:disabled {
  --_bg: var(--ds-radio-checked-disabled-bg);
  --_border: var(--ds-radio-checked-disabled-border);
  --_shadow: var(--ds-radio-checked-disabled-shadow);
  --_dot: var(--ds-radio-dot-disabled);
}

/* ---- Toggle (Figma "toggle"): <button type="button" role="switch" aria-checked="false" class="ds-toggle"> ---- */

.ds-toggle {
  --_width: var(--ds-toggle-width);
  --_height: var(--ds-toggle-height);
  --_knob-size: var(--ds-toggle-knob-size);
  --_bg: var(--ds-toggle-bg);
  --_border: var(--ds-toggle-border);
  --_shadow: var(--ds-toggle-shadow);
  --_knob: var(--ds-toggle-knob);
  --_knob-shadow: var(--ds-toggle-knob-shadow);

  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: var(--_width);
  height: var(--_height);
  margin: initial;
  padding: var(--ds-toggle-padding);
  border: none;
  border-radius: var(--border-radius-full);
  /* Figma draws this stroke outside the track, so it mustn't take up room inside. */
  outline: var(--ds-toggle-border-width) solid var(--_border);
  background: var(--_bg);
  box-shadow: var(--_shadow);
  cursor: pointer;
  appearance: none;
}

.ds-toggle::before {
  content: "";
  flex: none;
  width: var(--_knob-size);
  height: var(--_knob-size);
  border-radius: var(--border-radius-full);
  background: var(--_knob);
  box-shadow: var(--_knob-shadow);
}

.ds-toggle[aria-checked="true"],
.ds-toggle:checked {
  --_bg: var(--ds-toggle-on-bg);
  --_border: var(--ds-toggle-on-border);
  --_shadow: var(--ds-toggle-on-shadow);
  --_knob: var(--ds-toggle-on-knob);
  --_knob-shadow: var(--ds-toggle-on-knob-shadow);

  justify-content: flex-end;
}

.ds-toggle:disabled {
  --_bg: var(--ds-toggle-disabled-bg);
  --_border: var(--ds-toggle-disabled-border);
  --_shadow: var(--ds-toggle-disabled-shadow);
  --_knob: var(--ds-toggle-disabled-knob);
  --_knob-shadow: var(--ds-toggle-disabled-knob-shadow);

  cursor: not-allowed;
}

.ds-toggle[aria-checked="true"]:disabled,
.ds-toggle:checked:disabled {
  --_bg: var(--ds-toggle-on-disabled-bg);
  --_border: var(--ds-toggle-on-disabled-border);
  --_shadow: var(--ds-toggle-on-disabled-shadow);
  --_knob: var(--ds-toggle-on-disabled-knob);
  --_knob-shadow: var(--ds-toggle-on-disabled-knob-shadow);
}

.ds-toggle--md {
  --_width: var(--ds-toggle-md-width);
  --_height: var(--ds-toggle-md-height);
  --_knob-size: var(--ds-toggle-md-knob-size);
}