/* GENERATED FILE — do not edit.
 * Source: design/tokens.json v2.1.0 (clippr-vermillion)
 * Regenerate: python3 build_tokens.py   Verified by: test_tokens.py
 */

:root {
  /* primitives — the only place a raw value is written */
  --sb-vermillion-50: #FBE5DF;
  --sb-vermillion-600: #C8391F;
  --sb-vermillion-700: #A12C16;
  --sb-vermillion-800: #8C2B18;
  --sb-vermillion-300d: #E5543A;
  --sb-vermillion-400d: #C94A31;
  --sb-vermillion-500d: #FF8A6B;
  --sb-teal-50: #DDEFED;
  --sb-teal-600: #0E6E6B;
  --sb-teal-700: #0B4F4C;
  --sb-teal-800: #123F3D;
  --sb-teal-300d: #4FB8B4;
  --sb-graphite-50: #F3EBE4;
  --sb-graphite-300: #C9B9AF;
  --sb-graphite-350: #B8A69F;
  --sb-graphite-400: #6E5A55;
  --sb-graphite-600: #5A4642;
  --sb-graphite-900: #2B1A17;
  --sb-paper-0: #FFFFFF;
  --sb-paper-50: #FBF6F1;
  --sb-paper-100: #F3EBE4;
  --sb-paper-150: #EFE3DB;
  --sb-paper-125: #F6ECE5;
  --sb-paper-175: #EDE2DA;
  --sb-paper-200: #E9DDD5;
  --sb-paper-250: #D9C9BF;
  --sb-paper-300: #C9B9AF;
  --sb-blush-50: #FBE5DF;
  --sb-blush-150: #F7D4CC;
  --sb-slate-900: #1C1110;
  --sb-slate-800: #2A1A18;
  --sb-slate-700: #33221F;
  --sb-slate-600: #3D2A26;
  --sb-slate-500: #4E3833;
  --sb-mist-100: #F0E6E2;
  --sb-mist-300: #CDBDB7;
  --sb-mist-400: #B7A49E;
  --sb-mist-500: #8F7C76;
  --sb-sky-100: #CFE6F2;
  --sb-butter-400: #F4C542;

  /* semantics — light */
  --sb-surface-ground: #FBF6F1;
  --sb-surface-raised: #FFFFFF;
  --sb-surface-floating: #FFFFFF;
  --sb-surface-sheet: #FFFFFF;
  --sb-surface-sunken: #F3EBE4;
  --sb-surface-line: #E9DDD5;
  --sb-surface-skeleton: #EDE2DA;
  --sb-surface-handle: #D9C9BF;
  --sb-surface-placeholder-line: #C9B9AF;
  --sb-surface-stack-far: #EFE3DB;
  --sb-surface-stack-near: #F6ECE5;
  --sb-content-primary: #2B1A17;
  --sb-content-secondary: #5A4642;
  --sb-content-tertiary: #6E5A55;
  --sb-content-disclosure: #B8A69F;
  --sb-content-placeholder-icon: #C9B9AF;
  --sb-content-on-action: #FFFFFF;
  --sb-content-on-signal: #FFFFFF;
  --sb-content-on-signal-surface: #0B4F4C;
  --sb-content-on-scrim: #FFFFFF;
  --sb-content-on-scrim-secondary: rgba(255, 255, 255, 0.86);
  --sb-action-primary: #C8391F;
  --sb-action-primary-pressed: #A12C16;
  --sb-action-primary-tint: #FBE5DF;
  --sb-state-signal: #0E6E6B;
  --sb-state-signal-surface: #DDEFED;
  --sb-state-confirmed: #0E6E6B;
  --sb-state-confirmed-surface: #DDEFED;
  --sb-state-uncertain: #5A4642;
  --sb-state-uncertain-surface: #F3EBE4;
  --sb-state-failed: #8C2B18;
  --sb-state-failed-surface: #FBE5DF;
  --sb-state-unsure: #9A6A12;
  --sb-scrim-image: rgba(43, 26, 23, 0.80);
  --sb-scrim-image-fade: 62%;
  --sb-scrim-overlay: rgba(43, 26, 23, 0.45);
  --sb-scrim-overlay-confirm: rgba(43, 26, 23, 0.30);
  --sb-lane-grey: #8A8A82;
  --sb-lane-amber: #B07D1A;
  --sb-lane-green: #2F6B4F;
  --sb-lane-blue: #2F6B8F;
  --sb-lane-rose: #B4475E;
  --sb-lane-violet: #6B4FA0;
  --sb-colourway-sky: #CFE6F2;
  --sb-colourway-blush: #F7D4CC;
  --sb-colourway-butter: #F4C542;
  --sb-colourway-ink: #2B1A17;
  --sb-viz-series1: #2a78d6;
  --sb-viz-series2: #eb6834;
  --sb-viz-series3: #1baf7a;
  --sb-viz-series4: #eda100;
  --sb-viz-series5: #6250d6;
  --sb-viz-seq1: #cde2fb;
  --sb-viz-seq2: #9ec5f4;
  --sb-viz-seq3: #6da7ec;
  --sb-viz-seq4: #3987e5;
  --sb-viz-seq5: #256abf;
  --sb-viz-seq6: #184f95;
  --sb-radius-control: 10px;
  --sb-radius-sheet: 16px;
  --sb-radius-badge: 999px;
  --sb-radius-circle: 50%;
  --sb-radius-capsule: 999px;
  --sb-motion-collapse: 160ms;
  --sb-motion-hold: 900ms;
  --sb-motion-exit: 220ms;
  --sb-motion-undo: 5000ms;
  --sb-motion-skeleton: 1200ms;
  --sb-motion-buddy-look: 8000ms;
  --sb-motion-tap: 120ms;
  --sb-motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --sb-motion-hold-error: 2600ms;
  --sb-motion-enrich: 900ms;
  --sb-motion-enrich-fade: 160ms;
  --sb-target-min: 44px;
  --sb-elevation-flat: none;
  --sb-elevation-raised: 0 0 0 1px #E9DDD5;
  --sb-elevation-floating: 0 2px 4px rgba(43,26,23,0.08), 0 12px 28px rgba(43,26,23,0.14);
  --sb-elevation-sheet: 0 -4px 10px rgba(43,26,23,0.06), 0 -16px 40px rgba(43,26,23,0.16);
  --sb-elevation-flat-surface: var(--sb-surface-ground);
  --sb-elevation-raised-surface: var(--sb-surface-raised);
  --sb-elevation-floating-surface: var(--sb-surface-floating);
  --sb-elevation-sheet-surface: var(--sb-surface-sheet);

  /* interaction */
  --sb-focus-ring: 2px solid var(--sb-action-primary);
  --sb-focus-ring-offset: 2px;
  --sb-disabled-opacity: 0.38;
  --sb-pressed-surface: var(--sb-surface-sunken);

  /* G4 — every scrolling container ends clear of the navigation */
  --sb-nav-clearance: 64px;

  /* type */
  --sb-font-display: "Familjen Grotesk", "Work Sans", system-ui, sans-serif;
  --sb-font-body: "Work Sans", system-ui, sans-serif;
  --sb-font-wordmark: "Bricolage Grotesque", "Familjen Grotesk", system-ui, sans-serif;
  --sb-type-display-l-size: 30px;
  --sb-type-display-l-weight: 700;
  --sb-type-display-l-line: 1.1;
  --sb-type-display-l-tracking: -0.03em;
  --sb-type-display-m-size: 27px;
  --sb-type-display-m-weight: 700;
  --sb-type-display-m-line: 1.12;
  --sb-type-display-m-tracking: -0.03em;
  --sb-type-display-m-italic-size: 27px;
  --sb-type-display-m-italic-weight: 700;
  --sb-type-display-m-italic-line: 1.12;
  --sb-type-display-m-italic-tracking: -0.03em;
  --sb-type-display-s-size: 20px;
  --sb-type-display-s-weight: 700;
  --sb-type-display-s-line: 1.2;
  --sb-type-display-s-tracking: -0.02em;
  --sb-type-body-l-size: 15px;
  --sb-type-body-l-weight: 400;
  --sb-type-body-l-line: 1.55;
  --sb-type-body-l-tracking: 0;
  --sb-type-body-size: 13.5px;
  --sb-type-body-weight: 400;
  --sb-type-body-line: 1.45;
  --sb-type-body-tracking: 0;
  --sb-type-body-strong-size: 13.5px;
  --sb-type-body-strong-weight: 600;
  --sb-type-body-strong-line: 1.3;
  --sb-type-body-strong-tracking: 0;
  --sb-type-meta-size: 11.5px;
  --sb-type-meta-weight: 400;
  --sb-type-meta-line: 1.45;
  --sb-type-meta-tracking: 0;
  --sb-type-label-size: 12px;
  --sb-type-label-weight: 600;
  --sb-type-label-line: 1.3;
  --sb-type-label-tracking: 0;
}

/* dark — an explicit choice wins; otherwise follow the system */
:root[data-theme="dark"] {
  --sb-surface-ground: #1C1110;
  --sb-surface-raised: #2A1A18;
  --sb-surface-floating: #33221F;
  --sb-surface-sheet: #3D2A26;
  --sb-surface-sunken: #33221F;
  --sb-surface-line: #3D2A26;
  --sb-surface-skeleton: #33221F;
  --sb-surface-handle: #4E3833;
  --sb-surface-placeholder-line: #4E3833;
  --sb-surface-stack-far: #33221F;
  --sb-surface-stack-near: #3D2A26;
  --sb-content-primary: #F0E6E2;
  --sb-content-secondary: #CDBDB7;
  --sb-content-tertiary: #B7A49E;
  --sb-content-disclosure: #8F7C76;
  --sb-content-placeholder-icon: #4E3833;
  --sb-content-on-action: #1C1110;
  --sb-content-on-signal: #1C1110;
  --sb-content-on-signal-surface: #4FB8B4;
  --sb-action-primary: #E5543A;
  --sb-action-primary-pressed: #C94A31;
  --sb-action-primary-tint: rgba(240, 113, 79, 0.16);
  --sb-state-signal: #4FB8B4;
  --sb-state-signal-surface: rgba(79, 184, 180, 0.16);
  --sb-state-confirmed: #4FB8B4;
  --sb-state-confirmed-surface: rgba(79, 184, 180, 0.16);
  --sb-state-uncertain: #CDBDB7;
  --sb-state-uncertain-surface: #33221F;
  --sb-state-failed: #FF8A6B;
  --sb-state-failed-surface: rgba(255, 138, 107, 0.16);
  --sb-state-unsure: #D9A441;
  --sb-scrim-image: rgba(0, 0, 0, 0.82);
  --sb-scrim-overlay: rgba(0, 0, 0, 0.62);
  --sb-scrim-overlay-confirm: rgba(0, 0, 0, 0.42);
  --sb-lane-grey: #A3A39B;
  --sb-lane-amber: #D9A441;
  --sb-lane-green: #5FA883;
  --sb-lane-blue: #6AA6CC;
  --sb-lane-rose: #E07D93;
  --sb-lane-violet: #A58BD9;
  --sb-viz-series1: #3987e5;
  --sb-viz-series2: #d95926;
  --sb-viz-series3: #199e70;
  --sb-viz-series4: #c98500;
  --sb-viz-series5: #9085e9;
  --sb-viz-seq1: #cde2fb;
  --sb-viz-seq2: #9ec5f4;
  --sb-viz-seq3: #6da7ec;
  --sb-viz-seq4: #3987e5;
  --sb-viz-seq5: #256abf;
  --sb-viz-seq6: #184f95;
  --sb-elevation-flat: none;
  --sb-elevation-flat-surface: var(--sb-surface-ground);
  --sb-elevation-raised: none;
  --sb-elevation-raised-surface: var(--sb-surface-raised);
  --sb-elevation-floating: inset 0 1px 0 rgba(255,255,255,0.06);
  --sb-elevation-floating-surface: var(--sb-surface-floating);
  --sb-elevation-sheet: inset 0 1px 0 rgba(255,255,255,0.10);
  --sb-elevation-sheet-surface: var(--sb-surface-sheet);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sb-surface-ground: #1C1110;
    --sb-surface-raised: #2A1A18;
    --sb-surface-floating: #33221F;
    --sb-surface-sheet: #3D2A26;
    --sb-surface-sunken: #33221F;
    --sb-surface-line: #3D2A26;
    --sb-surface-skeleton: #33221F;
    --sb-surface-handle: #4E3833;
    --sb-surface-placeholder-line: #4E3833;
    --sb-surface-stack-far: #33221F;
    --sb-surface-stack-near: #3D2A26;
    --sb-content-primary: #F0E6E2;
    --sb-content-secondary: #CDBDB7;
    --sb-content-tertiary: #B7A49E;
    --sb-content-disclosure: #8F7C76;
    --sb-content-placeholder-icon: #4E3833;
    --sb-content-on-action: #1C1110;
    --sb-content-on-signal: #1C1110;
    --sb-content-on-signal-surface: #4FB8B4;
    --sb-action-primary: #E5543A;
    --sb-action-primary-pressed: #C94A31;
    --sb-action-primary-tint: rgba(240, 113, 79, 0.16);
    --sb-state-signal: #4FB8B4;
    --sb-state-signal-surface: rgba(79, 184, 180, 0.16);
    --sb-state-confirmed: #4FB8B4;
    --sb-state-confirmed-surface: rgba(79, 184, 180, 0.16);
    --sb-state-uncertain: #CDBDB7;
    --sb-state-uncertain-surface: #33221F;
    --sb-state-failed: #FF8A6B;
    --sb-state-failed-surface: rgba(255, 138, 107, 0.16);
    --sb-state-unsure: #D9A441;
    --sb-scrim-image: rgba(0, 0, 0, 0.82);
    --sb-scrim-overlay: rgba(0, 0, 0, 0.62);
    --sb-scrim-overlay-confirm: rgba(0, 0, 0, 0.42);
    --sb-lane-grey: #A3A39B;
    --sb-lane-amber: #D9A441;
    --sb-lane-green: #5FA883;
    --sb-lane-blue: #6AA6CC;
    --sb-lane-rose: #E07D93;
    --sb-lane-violet: #A58BD9;
    --sb-viz-series1: #3987e5;
    --sb-viz-series2: #d95926;
    --sb-viz-series3: #199e70;
    --sb-viz-series4: #c98500;
    --sb-viz-series5: #9085e9;
    --sb-viz-seq1: #cde2fb;
    --sb-viz-seq2: #9ec5f4;
    --sb-viz-seq3: #6da7ec;
    --sb-viz-seq4: #3987e5;
    --sb-viz-seq5: #256abf;
    --sb-viz-seq6: #184f95;
    --sb-elevation-flat: none;
    --sb-elevation-flat-surface: var(--sb-surface-ground);
    --sb-elevation-raised: none;
    --sb-elevation-raised-surface: var(--sb-surface-raised);
    --sb-elevation-floating: inset 0 1px 0 rgba(255,255,255,0.06);
    --sb-elevation-floating-surface: var(--sb-surface-floating);
    --sb-elevation-sheet: inset 0 1px 0 rgba(255,255,255,0.10);
    --sb-elevation-sheet-surface: var(--sb-surface-sheet);
  }
}

/* type steps */
.sb-display-l {
  font-family: var(--sb-font-display);
  font-size: var(--sb-type-display-l-size);
  font-weight: var(--sb-type-display-l-weight);
  line-height: var(--sb-type-display-l-line);
  letter-spacing: var(--sb-type-display-l-tracking);
}
.sb-display-m {
  font-family: var(--sb-font-display);
  font-size: var(--sb-type-display-m-size);
  font-weight: var(--sb-type-display-m-weight);
  line-height: var(--sb-type-display-m-line);
  letter-spacing: var(--sb-type-display-m-tracking);
}
.sb-display-m-italic {
  font-family: var(--sb-font-display);
  font-size: var(--sb-type-display-m-italic-size);
  font-weight: var(--sb-type-display-m-italic-weight);
  line-height: var(--sb-type-display-m-italic-line);
  letter-spacing: var(--sb-type-display-m-italic-tracking);
}
.sb-display-s {
  font-family: var(--sb-font-display);
  font-size: var(--sb-type-display-s-size);
  font-weight: var(--sb-type-display-s-weight);
  line-height: var(--sb-type-display-s-line);
  letter-spacing: var(--sb-type-display-s-tracking);
}
.sb-body-l {
  font-family: var(--sb-font-body);
  font-size: var(--sb-type-body-l-size);
  font-weight: var(--sb-type-body-l-weight);
  line-height: var(--sb-type-body-l-line);
  letter-spacing: var(--sb-type-body-l-tracking);
}
.sb-body {
  font-family: var(--sb-font-body);
  font-size: var(--sb-type-body-size);
  font-weight: var(--sb-type-body-weight);
  line-height: var(--sb-type-body-line);
  letter-spacing: var(--sb-type-body-tracking);
}
.sb-body-strong {
  font-family: var(--sb-font-body);
  font-size: var(--sb-type-body-strong-size);
  font-weight: var(--sb-type-body-strong-weight);
  line-height: var(--sb-type-body-strong-line);
  letter-spacing: var(--sb-type-body-strong-tracking);
}
.sb-meta {
  font-family: var(--sb-font-body);
  font-size: var(--sb-type-meta-size);
  font-weight: var(--sb-type-meta-weight);
  line-height: var(--sb-type-meta-line);
  letter-spacing: var(--sb-type-meta-tracking);
}
.sb-label {
  font-family: var(--sb-font-body);
  font-size: var(--sb-type-label-size);
  font-weight: var(--sb-type-label-weight);
  line-height: var(--sb-type-label-line);
  letter-spacing: var(--sb-type-label-tracking);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sb-motion-collapse: 0ms;
    --sb-motion-hold: 0ms;
    --sb-motion-exit: 0ms;
    --sb-motion-undo: 0ms;
    --sb-motion-skeleton: 0ms;
    --sb-motion-buddy-look: 0ms;
    --sb-motion-tap: 0ms;
    --sb-motion-hold-error: 0ms;
    --sb-motion-enrich-fade: 0ms;
  }
}

/* the two recipes every control shares */
.sb-focusable:focus-visible {
  outline: var(--sb-focus-ring);
  outline-offset: var(--sb-focus-ring-offset);
}
.sb-disabled,
[aria-disabled="true"] {
  opacity: var(--sb-disabled-opacity);
  pointer-events: none;
}