:root {
  --base-ref-font-size-200: 0.75rem;
  --base-ref-font-size-300: 0.875rem;
  --base-ref-font-size-350: 0.9375rem;
  --base-ref-font-size-400: 1rem;
  --base-ref-font-size-450: 1.0625rem;
  --base-ref-font-size-500: 1.25rem;
  --base-ref-font-size-600: 1.5rem;
  --base-ref-font-size-700: 1.875rem;
  --base-ref-line-height-200: 1.125rem;
  --base-ref-line-height-250: 1.1875rem;
  --base-ref-line-height-300: 1.25rem;
  --base-ref-line-height-350: 1.5rem;
  --base-ref-line-height-400: 1.5rem;
  --base-ref-line-height-500: 1.8125rem;
  --base-ref-line-height-800: 2.25rem;
  --base-ref-font-weight-regular: 400;
  --base-ref-font-weight-medium: 500;
  --base-ref-font-weight-semibold: 600;
  --base-ref-letter-spacing-tight: -0.03em;
  --base-ref-letter-spacing-compact: -0.31px;
  --base-ref-letter-spacing-normal: 0;
  --base-ref-letter-spacing-wider: 0.02em;
  --base-ref-color-neutral-0: #ffffff;
  --base-ref-color-neutral-50: #f9f9f9;
  --base-ref-color-neutral-100: #f5f5f5;
  --base-ref-color-neutral-150: #f2f2f2;
  --base-ref-color-neutral-180: #ededed;
  --base-ref-color-neutral-200: #ebebeb;
  --base-ref-color-neutral-250: #e5e5e5;
  --base-ref-color-neutral-300: #cccccc;
  --base-ref-color-neutral-350: #bbbbbb;
  --base-ref-color-neutral-400: #a0a0a0;
  --base-ref-color-neutral-450: #999999;
  --base-ref-color-neutral-500: #666666;
  --base-ref-color-neutral-550: #555555;
  --base-ref-color-neutral-600: #444444;
  --base-ref-color-neutral-700: #2a2a2a;
  --base-ref-color-neutral-750: #222222;
  --base-ref-color-neutral-800: #1a1a1a;
  --base-ref-color-neutral-900: #111111;
  --base-ref-color-neutral-1000: #0a0a0a;
  --base-ref-color-blue-50: #e6eeff;
  --base-ref-color-blue-100: #8cc1ff;
  --base-ref-color-blue-200: #6aa3ff;
  --base-ref-color-blue-400: #4d90fe;
  --base-ref-color-blue-500: #0055ff;
  --base-ref-color-blue-600: #0044cc;
  --base-ref-color-blue-800: #003399;
  --base-ref-color-blue-950: #0d1a33;
  --base-ref-color-red-50: #fee4e2;
  --base-ref-color-red-200: #ff8a80;
  --base-ref-color-red-700: #b42318;
  --base-ref-color-red-950: #33120f;
  --base-ref-space-1: 0.25rem;
  --base-ref-space-2: 0.5rem;
  --base-ref-space-3: 0.75rem;
  --base-ref-space-4: 1rem;
  --base-ref-space-5: 1.25rem;
  --base-ref-space-6: 1.5rem;
  --base-ref-radius-sm: 0.375rem;
  --base-ref-radius-md: 0.75rem;
  --base-ref-radius-lg: 1rem;
  --base-ref-duration-fast: 150ms;
  --base-ref-duration-standard: 220ms;
  --base-font-family-sans: ui-sans-serif, system-ui, sans-serif;
  --base-font-family-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  --base-duration-interaction-fast: var(--base-ref-duration-fast);
  --base-duration-interaction-standard: var(--base-ref-duration-standard);
  --base-interaction-press-scale: 0.97;
  --base-interaction-press-opacity-reduced: 0.8;
}

:root,
[data-base-theme="light"] {
  --base-color-background: var(--base-ref-color-neutral-0);
  --base-color-background-subtle: var(--base-ref-color-neutral-50);
  --base-color-text-primary: var(--base-ref-color-neutral-900);
  --base-color-text-secondary: var(--base-ref-color-neutral-550);
  --base-color-text-tertiary: var(--base-ref-color-neutral-450);
  --base-color-text-disabled: var(--base-ref-color-neutral-350);
  --base-color-accent: var(--base-ref-color-blue-500);
  --base-color-accent-hover: var(--base-ref-color-blue-600);
  --base-color-accent-active: var(--base-ref-color-blue-800);
  --base-color-accent-subtle: var(--base-ref-color-blue-50);
  --base-color-danger: var(--base-ref-color-red-700);
  --base-color-danger-subtle: var(--base-ref-color-red-50);
  --base-color-on-accent: var(--base-ref-color-neutral-0);
  --base-color-surface: var(--base-ref-color-neutral-0);
  --base-color-surface-hover: var(--base-ref-color-neutral-100);
  --base-color-surface-active: var(--base-ref-color-neutral-200);
  --base-color-surface-disabled: var(--base-ref-color-neutral-150);
  --base-color-border: var(--base-ref-color-neutral-250);
  --base-color-border-hover: var(--base-ref-color-neutral-300);
  --base-color-border-focus: var(--base-ref-color-blue-500);
  --base-color-border-active: var(--base-ref-color-neutral-900);
  --base-color-focus-ring: var(--base-ref-color-blue-500);
  --base-color-code-surface: var(--base-color-background-subtle);
  --base-color-code-border: var(--base-color-border);
}

[data-base-theme="dark"] {
  --base-color-background: var(--base-ref-color-neutral-1000);
  --base-color-background-subtle: var(--base-ref-color-neutral-800);
  --base-color-text-primary: var(--base-ref-color-neutral-180);
  --base-color-text-secondary: var(--base-ref-color-neutral-400);
  --base-color-text-tertiary: var(--base-ref-color-neutral-500);
  --base-color-text-disabled: var(--base-ref-color-neutral-600);
  --base-color-accent: var(--base-ref-color-blue-400);
  --base-color-accent-hover: var(--base-ref-color-blue-200);
  --base-color-accent-active: var(--base-ref-color-blue-100);
  --base-color-accent-subtle: var(--base-ref-color-blue-950);
  --base-color-danger: var(--base-ref-color-red-200);
  --base-color-danger-subtle: var(--base-ref-color-red-950);
  --base-color-on-accent: var(--base-ref-color-neutral-1000);
  --base-color-surface: var(--base-ref-color-neutral-800);
  --base-color-surface-hover: var(--base-ref-color-neutral-750);
  --base-color-surface-active: var(--base-ref-color-neutral-700);
  --base-color-surface-disabled: var(--base-ref-color-neutral-900);
  --base-color-border: var(--base-ref-color-neutral-700);
  --base-color-border-hover: var(--base-ref-color-neutral-600);
  --base-color-border-focus: var(--base-ref-color-blue-400);
  --base-color-border-active: var(--base-ref-color-neutral-180);
  --base-color-focus-ring: var(--base-ref-color-blue-400);
  --base-color-code-surface: var(--base-color-background-subtle);
  --base-color-code-border: var(--base-color-border);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --base-duration-interaction-fast: 0ms;
    --base-duration-interaction-standard: 0ms;
    --base-interaction-press-scale: 1;
  }
}


.base-type-display,
.base-type-heading-lg,
.base-type-heading-md,
.base-type-heading-sm,
.base-type-action,
.base-type-input,
.base-type-body-lg,
.base-type-body,
.base-type-body-sm,
.base-type-caption {
  font-family: var(--base-font-family-sans);
}

.base-type-display {
  font-size: var(--base-ref-font-size-700);
  line-height: var(--base-ref-line-height-800);
  font-weight: var(--base-ref-font-weight-regular);
  letter-spacing: var(--base-ref-letter-spacing-tight);
}

.base-type-heading-lg {
  font-size: var(--base-ref-font-size-600);
  line-height: var(--base-ref-line-height-500);
  font-weight: var(--base-ref-font-weight-regular);
  letter-spacing: var(--base-ref-letter-spacing-tight);
}

.base-type-heading-md {
  font-size: var(--base-ref-font-size-500);
  line-height: var(--base-ref-line-height-350);
  font-weight: var(--base-ref-font-weight-regular);
  letter-spacing: var(--base-ref-letter-spacing-tight);
}

.base-type-heading-sm {
  font-size: var(--base-ref-font-size-400);
  line-height: var(--base-ref-line-height-250);
  font-weight: var(--base-ref-font-weight-regular);
  letter-spacing: var(--base-ref-letter-spacing-tight);
}

.base-type-action {
  font-size: var(--base-ref-font-size-350);
  line-height: var(--base-ref-line-height-400);
  font-weight: var(--base-ref-font-weight-medium);
  letter-spacing: var(--base-ref-letter-spacing-compact);
}

.base-type-input {
  font-size: var(--base-ref-font-size-350);
  line-height: var(--base-ref-line-height-350);
  font-weight: var(--base-ref-font-weight-medium);
  letter-spacing: var(--base-ref-letter-spacing-compact);
}

.base-type-body-lg {
  font-size: var(--base-ref-font-size-400);
  line-height: var(--base-ref-line-height-400);
  font-weight: var(--base-ref-font-weight-regular);
  letter-spacing: var(--base-ref-letter-spacing-normal);
}

.base-type-body {
  font-size: var(--base-ref-font-size-300);
  line-height: var(--base-ref-line-height-300);
  font-weight: var(--base-ref-font-weight-regular);
  letter-spacing: var(--base-ref-letter-spacing-normal);
}

.base-type-body-sm,
.base-type-caption {
  font-size: var(--base-ref-font-size-200);
  line-height: var(--base-ref-line-height-200);
  font-weight: var(--base-ref-font-weight-regular);
}

.base-type-body-sm {
  letter-spacing: var(--base-ref-letter-spacing-normal);
}

.base-type-caption {
  letter-spacing: var(--base-ref-letter-spacing-wider);
}

.base-type-mono {
  font-family: var(--base-font-family-mono);
  font-size: var(--base-ref-font-size-200);
  line-height: var(--base-ref-line-height-250);
  font-weight: var(--base-ref-font-weight-regular);
  letter-spacing: var(--base-ref-letter-spacing-normal);
}

.base-link,
.base-link-muted {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition-property: color, text-decoration-color;
  transition-duration: var(--base-duration-interaction-fast);
  transition-timing-function: ease-out;
}

.base-link {
  color: var(--base-color-text-primary);
}

.base-link-muted {
  color: var(--base-color-text-secondary);
}

.base-tabular-nums {
  font-variant-numeric: tabular-nums;
}

.base-link:focus-visible,
.base-link-muted:focus-visible,
.base-focus-ring:focus-visible {
  outline: 2px solid var(--base-color-focus-ring);
  outline-offset: 2px;
}

.base-pressable {
  transition-property: color, background-color, border-color, opacity, transform, scale;
  transition-duration: var(--base-duration-interaction-fast);
  transition-timing-function: ease-out;
}

.base-pressable:not(:disabled, [aria-disabled="true"]):active {
  scale: var(--base-interaction-press-scale);
}

@media (hover: hover) and (pointer: fine) {
  .base-link:hover {
    color: var(--base-color-text-secondary);
  }

  .base-link-muted:hover {
    color: var(--base-color-text-primary);
  }
}

@media (prefers-reduced-motion: reduce) {
  .base-pressable:not(:disabled, [aria-disabled="true"]):active {
    opacity: var(--base-interaction-press-opacity-reduced);
    scale: 1;
  }
}


/* base-component: button */

.base-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--base-ref-space-1);
  border: 1px solid transparent;
  border-radius: 9999px;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.base-button-default {
  height: 2.5rem;
  padding-inline: var(--base-ref-space-5);
}

.base-button-icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
}

.base-button-primary {
  color: var(--base-color-background);
  background-color: var(--base-color-text-primary);
}

.base-button-secondary {
  color: var(--base-color-text-primary);
  background-color: var(--base-color-surface);
  border-color: var(--base-color-border);
}

.base-button-secondary:not(:disabled):active {
  background-color: var(--base-color-surface-active);
  border-color: var(--base-color-border-active);
}

.base-button-subtle {
  color: var(--base-color-text-primary);
  background-color: var(--base-color-surface-hover);
}

.base-button-subtle:not(:disabled):active {
  background-color: var(--base-color-surface-active);
}

.base-button-destructive {
  color: var(--base-color-danger);
  background-color: var(--base-color-danger-subtle);
}

.base-button-text {
  color: var(--base-color-text-secondary);
  background-color: transparent;
}

.base-button-text:not(:disabled):active {
  color: var(--base-color-text-primary);
}

.base-button-text-accent {
  color: var(--base-color-accent);
  background-color: transparent;
}

.base-button-text-accent:not(:disabled):active {
  color: var(--base-color-accent-active);
}

.base-button:disabled {
  color: var(--base-color-text-disabled);
  background-color: var(--base-color-surface-disabled);
  cursor: default;
  opacity: 1;
}

.base-button-secondary:disabled {
  border-color: var(--base-color-border);
}

@media (hover: hover) and (pointer: fine) {
  .base-button-primary:not(:disabled):hover,
  .base-button-destructive:not(:disabled):hover {
    opacity: 0.85;
  }

  .base-button-secondary:not(:disabled):hover {
    background-color: var(--base-color-surface-hover);
    border-color: var(--base-color-border-hover);
  }

  .base-button-subtle:not(:disabled):hover {
    background-color: var(--base-color-surface-active);
  }

  .base-button-text:not(:disabled):hover {
    color: var(--base-color-text-primary);
  }

  .base-button-text-accent:not(:disabled):hover {
    color: var(--base-color-accent-hover);
  }
}


/* base-component: text-input */

.base-text-input {
  width: 100%;
}

.base-text-input-field {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 3rem;
  padding-inline: var(--base-ref-space-5);
  border: 1px solid var(--base-color-border);
  border-radius: 9999px;
  background: var(--base-color-surface);
  color: var(--base-color-text-primary);
  caret-color: var(--base-color-text-primary);
  transition-property: border-color, background-color, color, outline-color;
  transition-duration: var(--base-duration-interaction-fast);
  transition-timing-function: ease-out;
}

.base-text-input-field::placeholder {
  color: var(--base-color-text-secondary);
}

.base-text-input-field:focus,
.base-text-input-field:not(:placeholder-shown):not(:disabled) {
  border-width: 2px;
}

.base-text-input-field:focus,
.base-text-input-field:not(:placeholder-shown):not(:disabled):not([aria-invalid="true"]) {
  border-color: var(--base-color-border-active);
}

.base-text-input-field[aria-invalid="true"]:not(:disabled) {
  border-width: 2px;
  border-color: var(--base-color-danger);
}

.base-text-input-field[aria-invalid="true"]:focus-visible:not(:disabled) {
  outline-color: var(--base-color-danger);
}

.base-text-input-field:disabled {
  cursor: default;
  border-color: var(--base-color-border);
  background: var(--base-color-surface-disabled);
  color: var(--base-color-text-disabled);
}

.base-text-input-field:disabled::placeholder {
  color: var(--base-color-text-disabled);
}

.base-text-input-error {
  margin: var(--base-ref-space-2) 0 0;
  padding-inline: calc(var(--base-ref-space-5) + 2px);
  color: var(--base-color-danger);
}

@media (hover: hover) and (pointer: fine) {
  .base-text-input-field:hover:not(:focus):not(:disabled):not([aria-invalid="true"]) {
    border-color: var(--base-color-border-hover);
  }
}


/* base-component: progress-bar */

.base-progress-bar {
  width: 100%;
  height: 0.375rem;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--base-color-surface-disabled);
}

.base-progress-bar-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--base-color-text-primary);
  transform-origin: left;
  transition-property: transform;
  transition-duration: var(--base-duration-interaction-standard);
  transition-timing-function: linear;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .base-progress-bar-fill {
    transition: none;
  }
}