/* GENERATED from core/design/tokens.css by tools/sync-design.mjs. Do not edit this copy:
 * edit core/design/tokens.css and run `node tools/sync-design.mjs`.
 * tests/design-sync.mjs fails when the two differ. */
/* Nib design tokens.
 *
 * Two layers, one file, no build step.
 *
 *   1. SQUIGGLE. Every value in the Squiggle Design System's tokens.json, under the
 *      same name, with the same value. Nib never redefines one of these. If a Squiggle
 *      value changes, it changes here first and Nib follows.
 *   2. NIB. The product layer: semantic surfaces, the four states, provenance, the two
 *      type scales (dense app and public), control sizes, motion, z-index and the
 *      layout widths of the three-column workspace. Each one is built from layer 1
 *      wherever layer 1 has the colour. Where it does not (blue, violet, amber and red
 *      for states and provenance), the value is new, named here, and its contrast is
 *      written beside it.
 *
 * LIGHT ONLY, ON PURPOSE. The document preview is paper, and a will on a black page is
 * not the will anyone signs. A dark theme done properly would need every state and
 * provenance pair re-measured for both faces; Squiggle itself defines one theme. So
 * `color-scheme: light` is declared and there is no dark block. See README, "Dark mode".
 *
 * Generated copies of this file live in the apps (tools/sync-design.mjs). Edit THIS one.
 * tests/design-sync.mjs fails when a copy differs.
 */

:root {
  color-scheme: light;

  /* ------------------------------------------------------------------------
   * 1. SQUIGGLE: colour primitives (tokens.json, color.tokens)
   * --------------------------------------------------------------------- */
  --green: #00ce3f;            /* brand green, Pantone 802U. Black text on it, never white */
  --black: #000000;
  --white: #ffffff;
  --green-tint: #e5faeb;       /* the approved 10% tint */

  --green-50: #f2fcf5;
  --green-100: #e5faeb;
  --green-200: #bff2ce;
  --green-300: #8ae8a6;
  --green-400: #46dc75;        /* green on black: 11.8:1 */
  --green-500: #00ce3f;
  --green-600: #00b838;        /* hover of green fills */
  --green-700: #009e30;        /* press, focus ring, ticks. 3.5:1 on white: marks only */
  --green-800: #007a25;        /* accessible green text. 5.5:1 on white */
  --green-900: #045c1e;        /* text on green tint. 7.5:1 */

  --neutral-0: #ffffff;
  --neutral-50: #f7f8f7;
  --neutral-100: #eff1ef;
  --neutral-200: #e2e5e2;
  --neutral-300: #cdd2cd;
  --neutral-400: #a6ada6;
  --neutral-500: #7c847c;      /* control borders. 3.85:1 on white */
  --neutral-600: #5a615a;      /* muted text. 6.4:1 on white */
  --neutral-700: #3e443e;
  --neutral-800: #262a26;      /* body text */
  --neutral-900: #141714;

  /* Squiggle semantic aliases, unchanged */
  --surface-page: var(--white);
  --surface-subtle: var(--green-50);
  --surface-card: var(--white);
  --surface-tint: var(--green-tint);
  --surface-inverse: var(--black);
  --surface-brand: var(--green-500);

  --text-strong: var(--black);
  --text-body: var(--neutral-800);
  --text-muted: var(--neutral-600);
  --text-on-brand: var(--white);   /* 2.1:1. Kept as Squiggle defines it; never for text */
  --text-on-dark: var(--white);
  --text-link: var(--green-800);

  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-500);
  --border-strong: var(--black);
  --border-brand: var(--green-500);

  --action-bg: var(--green-500);
  --action-bg-hover: var(--green-600);
  --action-bg-press: var(--green-700);
  --action-fg: var(--black);        /* 9.9:1 on green */

  --focus-ring: var(--green-700);

  --success: var(--green-600);
  --warning: #e5a100;
  --danger: #d14343;
  --info: var(--green-800);

  /* Squiggle type */
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md: 1.125rem;    /* 18 */
  --text-lg: 1.375rem;    /* 22 */
  --text-xl: 1.75rem;     /* 28, h4 */
  --text-2xl: 2.25rem;    /* 36, h3 */
  --text-3xl: 3rem;       /* 48, h2 */
  --text-4xl: 3.75rem;    /* 60, h1 */
  --text-5xl: 4.75rem;    /* 76 */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.12em;

  /* Squiggle spacing, 4px grid */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Squiggle radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Squiggle shadow */
  --shadow-xs: 0 1px 2px rgba(20, 23, 20, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 23, 20, 0.08), 0 1px 2px rgba(20, 23, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 23, 20, 0.08), 0 2px 4px rgba(20, 23, 20, 0.05);
  --shadow-lg: 0 12px 32px rgba(20, 23, 20, 0.10), 0 4px 8px rgba(20, 23, 20, 0.05);
  --shadow-brand: 0 8px 24px rgba(0, 206, 63, 0.28);

  /* Squiggle borders and focus. The ring is written in rem (3px at the default text
   * size) so the public site's "no fixed pixel widths" test does not read a token as
   * a layout width, and so the ring grows with the reader's text size. */
  --border-width: 1px;
  --border-width-strong: 2px;
  --focus-ring-width: 0.1875rem;
  --focus-ring-offset: 2px;

  /* Squiggle layout */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1280px;

  /* ------------------------------------------------------------------------
   * 2. NIB: extra hues. Only for states and provenance, never decoration.
   * Contrast is against the paired background unless it says otherwise.
   * --------------------------------------------------------------------- */
  --blue-50: #eff4fc;
  --blue-100: #dde8f9;
  --blue-300: #86a9e0;
  --blue-800: #1a4a8f;         /* 8.7:1 on white, 7.0:1 on blue-100 */

  --violet-50: #f4f1fd;
  --violet-300: #bcaaf0;
  --violet-800: #4a2f9e;       /* 9.6:1 on white, 8.6:1 on violet-50 */

  --amber-50: #fff7e6;
  --amber-200: #f7d48a;
  --amber-300: #f0c46a;
  --amber-600: #b07800;        /* icon on white, 3.8:1 */
  --amber-800: #6b4100;        /* 8.8:1 on white, 8.3:1 on amber-50 */
  --amber-900: #5c3700;        /* 7.4:1 on amber-200 */

  --red-50: #fdf2f2;
  --red-100: #fbe2e2;
  --red-300: #eba5a5;
  --red-700: #b0262f;          /* white on it 6.6:1 */
  --red-800: #8a1f26;          /* 8.3:1 on red-50 */

  /* ------------------------------------------------------------------------
   * 2. NIB: semantic surfaces
   * --------------------------------------------------------------------- */
  --surface-canvas: var(--neutral-50);      /* the staff console's ground, behind panels */
  --surface-panel: var(--white);            /* a column, card or table */
  --surface-sunken: var(--neutral-100);     /* wells, code, the desk behind the paper */
  --surface-hover: var(--neutral-50);       /* a row or step under the pointer */
  --surface-selected: var(--green-50);      /* a chosen row, radio card or current step */
  --surface-overlay: rgba(20, 23, 20, 0.40);/* behind a dialog */
  --surface-topbar: rgba(255, 255, 255, 0.86); /* the sticky bar, over a backdrop blur */
  --surface-paper: #fffdf8;                 /* the document. Body text 14.3:1 */
  --surface-desk: var(--neutral-100);       /* what the paper lies on */

  --text-subtle: var(--neutral-700);        /* secondary labels where muted is too light */
  --text-placeholder: var(--neutral-600);   /* placeholders keep 4.5:1; never lighter */
  --text-disabled: var(--neutral-600);      /* disabled controls also drop to 0.55 opacity of fill, not text */
  --text-inverse-muted: var(--neutral-300); /* secondary text on black, 11.8:1 */

  --border-control: var(--neutral-500);     /* 2px on inputs and checkboxes, 3.85:1 */
  --border-hover: var(--neutral-700);
  --border-selected: var(--green-700);
  --border-divider: var(--neutral-200);

  --action-secondary-fg: var(--black);
  --action-secondary-border: var(--black);
  --action-ghost-fg: var(--green-800);
  --action-ghost-hover-bg: var(--green-100);
  --action-neutral-bg: var(--white);
  --action-neutral-border: var(--neutral-300);
  --action-neutral-hover-border: var(--neutral-500);
  --action-dark-bg: var(--black);
  --action-dark-hover-bg: var(--neutral-800);

  --focus-glow: 0 0 0 4px var(--green-100); /* the soft halo on a focused input */
  --focus-gap: var(--white);                /* inner gap so the ring reads on green */

  /* ------------------------------------------------------------------------
   * 2. NIB: states. Each trio: text passes 4.5:1 on its bg and on white.
   * --------------------------------------------------------------------- */
  --state-success-bg: var(--green-50);
  --state-success-fg: var(--green-900);     /* 7.8:1 */
  --state-success-border: var(--green-300);
  --state-success-icon: var(--green-700);

  --state-warning-bg: var(--amber-50);
  --state-warning-fg: var(--amber-800);     /* 8.3:1 */
  --state-warning-border: var(--amber-300);
  --state-warning-icon: var(--amber-600);

  --state-danger-bg: var(--red-50);
  --state-danger-fg: var(--red-700);        /* 6.1:1 */
  --state-danger-border: var(--red-300);
  --state-danger-icon: var(--danger);       /* Squiggle danger, 4.6:1 on white */

  --state-info-bg: var(--blue-50);
  --state-info-fg: var(--blue-800);         /* 7.9:1 */
  --state-info-border: var(--blue-300);
  --state-info-icon: var(--blue-800);

  --state-neutral-bg: var(--neutral-100);
  --state-neutral-fg: var(--neutral-700);   /* 8.8:1 */
  --state-neutral-border: var(--neutral-200);

  /* ------------------------------------------------------------------------
   * 2. NIB: provenance. Where a value came from. Always a word and an icon as
   * well as the colour (WCAG 1.4.1). Background lightness (CIE L*) steps so the
   * five read apart in greyscale: typed 100 (outline), derived 96, crm 92,
   * edited 86, unplaced 39, firm policy 7.
   * --------------------------------------------------------------------- */
  --prov-typed-bg: var(--white);
  --prov-typed-fg: var(--neutral-700);      /* 10:1 */
  --prov-typed-border: var(--neutral-300);

  --prov-derived-bg: var(--violet-50);
  --prov-derived-fg: var(--violet-800);     /* 8.6:1 */
  --prov-derived-border: var(--violet-300);

  --prov-crm-bg: var(--blue-100);
  --prov-crm-fg: var(--blue-800);           /* 7.0:1 */
  --prov-crm-border: var(--blue-300);

  --prov-edited-bg: var(--amber-200);
  --prov-edited-fg: var(--amber-900);       /* 7.4:1 */
  --prov-edited-border: var(--amber-600);

  --prov-unplaced-bg: var(--red-700);
  --prov-unplaced-fg: var(--white);         /* 6.6:1 */
  --prov-unplaced-border: var(--red-700);

  --prov-firm-policy-bg: var(--neutral-900);
  --prov-firm-policy-fg: var(--white);      /* 18:1 */
  --prov-firm-policy-border: var(--neutral-900);
  --prov-firm-policy-icon: var(--green-400);/* 10:1 on neutral-900 */

  /* ------------------------------------------------------------------------
   * 2. NIB: the document preview
   * --------------------------------------------------------------------- */
  --font-document: Georgia, "Times New Roman", Tinos, "Liberation Serif", serif;
  --doc-text-app: 0.9375rem;                /* 15 in the staff document pane */
  --doc-text-public: 1.0625rem;             /* 17 in "your will so far" */
  --doc-leading: 1.7;
  --doc-text: var(--neutral-900);
  --doc-muted: var(--neutral-600);
  --doc-rule: var(--neutral-200);
  --doc-current-bg: var(--green-50);        /* the clauses this step decides */
  --doc-current-mark: var(--green-700);
  --doc-gap-bg: var(--red-50);
  --doc-gap-fg: var(--red-800);             /* 8.3:1 */
  --doc-gap-border: var(--danger);
  --doc-pending-bg: var(--neutral-50);
  --doc-pending-fg: var(--neutral-600);     /* 6.0:1 */
  --doc-pending-border: var(--neutral-400);

  /* ------------------------------------------------------------------------
   * 2. NIB: type scales
   * App: dense, 12 to 16px body, for a consultant's fifth will of the morning.
   * Public: 18px body and up, for a reader who may be 80 and on a phone.
   * --------------------------------------------------------------------- */
  --app-text-2xs: 0.6875rem;   /* 11. Kbd hints only */
  --app-text-xs: 0.75rem;      /* 12. Badges, chips, meta */
  --app-text-sm: 0.8125rem;    /* 13. Tables, secondary lines, hints */
  --app-text-base: 0.875rem;   /* 14. Default UI text */
  --app-text-md: 0.9375rem;    /* 15. Values in edit rows, document body */
  --app-text-lg: 1rem;         /* 16. Emphasised values */
  --app-title-sm: 1.25rem;     /* 20. Pane titles (display) */
  --app-title-md: 1.625rem;    /* 26. Page title (display) */
  --app-leading: 1.45;

  --public-text-sm: 1rem;          /* 16. Footnotes and legal lines only */
  --public-text-hint: 1.0625rem;   /* 17. Hints under a question */
  --public-text-base: 1.125rem;    /* 18. Body */
  --public-text-lg: 1.25rem;       /* 20. Lead paragraph, labels on radio cards */
  --public-text-badge: 0.9375rem;  /* 15. Badges and chips on the public site */
  --public-title-sm: 1.5rem;       /* 24. Card titles (display) */
  --public-title-md: clamp(1.625rem, 1.3rem + 1.2vw, 2rem);      /* question heading */
  --public-title-lg: clamp(2rem, 1.5rem + 2.2vw, 3rem);          /* page h1 */
  --public-leading: 1.6;

  /* ------------------------------------------------------------------------
   * 2. NIB: control sizes and targets
   * --------------------------------------------------------------------- */
  --control-h-xs: 1.5rem;      /* 24. The WCAG 2.2 minimum; icon buttons in dense rows */
  --control-h-sm: 2rem;        /* 32. Dense buttons and inputs */
  --control-h-md: 2.25rem;     /* 36. Default app control */
  --control-h-lg: 3.25rem;     /* 52. Public controls */
  --target-min: 1.5rem;        /* 24. App minimum (SC 2.5.8) */
  --target-min-public: 2.75rem;/* 44. Public minimum */

  /* ------------------------------------------------------------------------
   * 2. NIB: elevation additions
   * --------------------------------------------------------------------- */
  --shadow-paper: 0 1px 2px rgba(20, 23, 20, 0.05), 0 8px 24px rgba(20, 23, 20, 0.07);
  --shadow-popover: 0 0 0 1px rgba(20, 23, 20, 0.06), 0 16px 48px rgba(20, 23, 20, 0.16), 0 4px 12px rgba(20, 23, 20, 0.06);
  --shadow-topbar: 0 1px 0 var(--neutral-200);
  --shadow-inset-selected: inset 0 0 0 2px var(--green-700);

  /* ------------------------------------------------------------------------
   * 2. NIB: motion. Calm. Fades and short slides only.
   * --------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --duration-instant: 80ms;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ------------------------------------------------------------------------
   * 2. NIB: z-index
   * --------------------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 10;
  --z-topbar: 20;
  --z-dropdown: 30;
  --z-overlay: 40;
  --z-dialog: 50;
  --z-toast: 60;
  --z-skip: 70;

  /* ------------------------------------------------------------------------
   * 2. NIB: layout
   * --------------------------------------------------------------------- */
  --layout-topbar-h: 3.5rem;           /* 56 */
  --layout-app-max: 100rem;            /* 1600: the console stops growing here */
  --layout-gutter-app: var(--space-5); /* 24 */
  --layout-gutter-public: var(--space-4);
  --layout-rail: 15rem;                /* 240: the step list */
  --layout-doc-min: 24rem;             /* 384: the narrowest the document pane goes */
  --layout-workspace-columns: var(--layout-rail) minmax(0, 1fr) minmax(var(--layout-doc-min), 1.1fr);
  --layout-workspace-gap: var(--space-5);
  --layout-measure: 40rem;             /* 640: one column of questions on the public site */
  --layout-public-max: 76rem;          /* 1216: questions plus "your will so far" */
  --layout-public-columns: minmax(0, 1fr) minmax(0, 28rem);
  --layout-doc-measure: 42rem;         /* 672: a line of the document, about 75 characters */
  --layout-palette: 40rem;             /* the command palette */
  --layout-dialog: 32rem;

  /* ------------------------------------------------------------------------
   * 2. NIB: icons, as CSS masks (drawn in currentColor). Lucide-style 2px strokes on a
   * 24px grid. data: URLs are allowed by both apps' img-src.
   * --------------------------------------------------------------------- */
  --icon-crm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5'/%3E%3Cpath d='M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E");
  --icon-derived: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='12' r='3'/%3E%3Cpath d='M9 6h2a4 4 0 0 1 4 4v0M9 18h2a4 4 0 0 0 4-4v0'/%3E%3C/svg%3E");
  --icon-typed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  --icon-edited: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
  --icon-firm-policy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --icon-unplaced: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E");
  --icon-matched: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3 4 7l4 4'/%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='m16 21 4-4-4-4'/%3E%3Cpath d='M20 17H4'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  /* A solid disc with the exclamation cut out (even-odd), for the blocking mark. */
  --icon-alert-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M12 1a11 11 0 1 1 0 22 11 11 0 0 1 0-22Zm-1.3 5.5h2.6l-.4 8h-1.8Zm1.3 10a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z'/%3E%3C/svg%3E");
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  /* The select chevron is a background, not a mask, so its colour is baked in:
   * neutral-700 (#3e443e). */
  --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e443e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icon-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='black'/%3E%3C/svg%3E");
}