/* Generated from design/tokens/hummlist.tokens.json by design/tokens/build.mjs. Do not edit. */

:root {
  color-scheme: light dark;
  --hl-color-brand: #1b3fae;
  --hl-color-on-brand: #ffffff;
  --hl-color-honey: #ffe24a;
  --hl-color-on-honey: #0f1530;
  --hl-color-honey-soft: #fff2a8;
  --hl-color-accent: #1b3fae;
  --hl-color-on-accent: #ffffff;
  --hl-color-accent-soft: #e1e8ff;
  --hl-color-surface: #f7f7f2;
  --hl-color-surface-raised: #ffffff;
  --hl-color-surface-sunken: #eceff6;
  --hl-color-text: #0f1530;
  --hl-color-text-muted: #4b536c;
  --hl-color-border: #0f1530;
  --hl-color-divider: #d3d8e6;
  --hl-color-ink: #0f1530;
  --hl-color-success: #0d7a4e;
  --hl-color-on-success: #ffffff;
  --hl-color-success-soft: #d6f5e7;
  --hl-color-warning: #8a5300;
  --hl-color-on-warning: #ffffff;
  --hl-color-error: #c4280f;
  --hl-color-on-error: #ffffff;
  --hl-color-edge: #0f1530;
  --hl-color-honey-edge: #d4b20f;
  --hl-color-surface-edge: #c3cae0;
  --hl-color-mint: #7fe3b8;
  --hl-color-on-mint: #0f1530;
  --hl-color-mint-soft: #d6f5e7;
  --hl-color-mint-edge: #3fbf8a;
  --hl-color-cobalt: #1b3fae;
  --hl-color-on-cobalt: #ffffff;
  --hl-color-on-accent-soft: #132f86;
  --hl-color-tomato: #ff5b3a;
  --hl-color-on-tomato: #0f1530;
  --hl-color-tomato-edge: #c8402a;
  --hl-color-inverse: #0f1530;
  --hl-color-on-inverse: #f3f6ff;
  --hl-font-family-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --hl-font-family-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hl-font-weight-regular: 400;
  --hl-font-weight-medium: 500;
  --hl-font-weight-bold: 650;
  --hl-font-weight-heavy: 800;
  --hl-type-display-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --hl-type-display-size: 4.5rem;
  --hl-type-display-weight: 800;
  --hl-type-display-line: 0.94;
  --hl-type-display-tracking: -0.045em;
  --hl-type-headline-l-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --hl-type-headline-l-size: 3rem;
  --hl-type-headline-l-weight: 800;
  --hl-type-headline-l-line: 0.98;
  --hl-type-headline-l-tracking: -0.04em;
  --hl-type-headline-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --hl-type-headline-size: 2.25rem;
  --hl-type-headline-weight: 800;
  --hl-type-headline-line: 1;
  --hl-type-headline-tracking: -0.035em;
  --hl-type-title-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --hl-type-title-size: 1.375rem;
  --hl-type-title-weight: 700;
  --hl-type-title-line: 1.15;
  --hl-type-title-tracking: -0.02em;
  --hl-type-body-l-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hl-type-body-l-size: 1.1875rem;
  --hl-type-body-l-weight: 400;
  --hl-type-body-l-line: 1.5;
  --hl-type-body-l-tracking: -0.006em;
  --hl-type-body-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hl-type-body-size: 1.0625rem;
  --hl-type-body-weight: 400;
  --hl-type-body-line: 1.55;
  --hl-type-body-tracking: 0em;
  --hl-type-label-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hl-type-label-size: 0.9375rem;
  --hl-type-label-weight: 700;
  --hl-type-label-line: 1.2;
  --hl-type-label-tracking: 0em;
  --hl-type-caption-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hl-type-caption-size: 0.75rem;
  --hl-type-caption-weight: 700;
  --hl-type-caption-line: 1.3;
  --hl-type-caption-tracking: 0.09em;
  --hl-space-1: 4px;
  --hl-space-2: 8px;
  --hl-space-3: 12px;
  --hl-space-4: 16px;
  --hl-space-5: 24px;
  --hl-space-6: 32px;
  --hl-space-7: 48px;
  --hl-space-8: 64px;
  --hl-space-9: 96px;
  --hl-radius-s: 12px;
  --hl-radius-m: 18px;
  --hl-radius-l: 28px;
  --hl-radius-xl: 40px;
  --hl-radius-full: 999px;
  --hl-border-width: 2px;
  --hl-border-width-thin: 1px;
  --hl-shadow-sticker-s: 0px 2px 0px 0px #0f1530;
  --hl-shadow-sticker: 0px 4px 0px 0px #0f1530;
  --hl-shadow-sticker-l: 0px 8px 0px 0px #0f1530;
  --hl-shadow-night-s: 0px 2px 0px 0px #03050f, 0px 0px 12px 0px #9fb6ff1f;
  --hl-shadow-night: 0px 4px 0px 0px #03050f, 0px 0px 24px 0px #9fb6ff24;
  --hl-shadow-night-l: 0px 8px 0px 0px #03050f, 0px 0px 48px 0px #9fb6ff2e;
  --hl-motion-duration-short: 180ms;
  --hl-motion-duration-medium: 260ms;
  --hl-motion-duration-long: 360ms;
  --hl-motion-duration-press: 70ms;
  --hl-motion-duration-release: 160ms;
  --hl-motion-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hl-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --hl-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
  --hl-motion-easing-press: cubic-bezier(0.3, 0, 0.6, 1);
  --hl-shape-hex-tip: 0.2887;
  --hl-shape-hex-reference-height: 48px;
  --hl-shape-hex-corner-radius: 8px;
  --hl-depth-edge: 4px;
  --hl-depth-edge-l: 6px;
  --hl-depth-lift: 2px;
  --hl-depth-press: 4px;
  --hl-focus-ring-width: 3px;
  --hl-focus-ring-gap: 2px;
  --hl-size-target: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hl-color-brand: #9fb6ff;
    --hl-color-on-brand: #0b1024;
    --hl-color-honey: #ffe24a;
    --hl-color-on-honey: #0b1024;
    --hl-color-honey-soft: #35310f;
    --hl-color-accent: #9fb6ff;
    --hl-color-on-accent: #0b1024;
    --hl-color-accent-soft: #1d2b66;
    --hl-color-surface: #0b1024;
    --hl-color-surface-raised: #151c3a;
    --hl-color-surface-sunken: #111735;
    --hl-color-text: #eff3ff;
    --hl-color-text-muted: #b0b9d8;
    --hl-color-border: #7f8cc4;
    --hl-color-divider: #2f3a66;
    --hl-color-ink: #03050f;
    --hl-color-success: #62c99d;
    --hl-color-on-success: #0b1024;
    --hl-color-success-soft: #123a31;
    --hl-color-warning: #ffd25a;
    --hl-color-on-warning: #0b1024;
    --hl-color-error: #ff8a73;
    --hl-color-on-error: #0b1024;
    --hl-color-edge: #03050f;
    --hl-color-honey-edge: #b39b1a;
    --hl-color-surface-edge: #2a3463;
    --hl-color-mint: #62c99d;
    --hl-color-on-mint: #0b1024;
    --hl-color-mint-soft: #123a31;
    --hl-color-mint-edge: #3a9e78;
    --hl-color-cobalt: #2448c0;
    --hl-color-on-cobalt: #ffffff;
    --hl-color-on-accent-soft: #e1e8ff;
    --hl-color-tomato: #f0603f;
    --hl-color-on-tomato: #0b1024;
    --hl-color-tomato-edge: #b04530;
    --hl-color-inverse: #111735;
    --hl-color-on-inverse: #eff3ff;
  }
}