/* Generated by @failer/design-system 0.2.0 from tokens/failer.tokens.json. */

:root {
  --failer-color-primary-hover: #E5C477;
  --failer-color-primary-pressed: #C8A452;
  --failer-color-warning: #D49D86;
  --failer-color-background: #171614;
  --failer-color-surface: #1B1A17;
  --failer-color-surface-raised: #22211D;
  --failer-color-surface-interactive: #292722;
  --failer-color-surface-interactive-hover: #323027;
  --failer-color-foreground: #F5F0E8;
  --failer-color-muted: #D3C5AE;
  --failer-color-primary: #D8B45F;
  --failer-color-primary-foreground: #221807;
  --failer-font-heading: "Space Grotesk", "Noto Sans KR", sans-serif;
  --failer-font-body: "Manrope", "Noto Sans KR", sans-serif;
  --failer-radius-default: 0px;
  --failer-control-min-size: 44px;
  --failer-control-padding-inline: 16px;
  --failer-icon-size: 20px;
  --failer-focus-width: 2px;
  --failer-disabled-opacity: 0.45;
  --failer-type-display-large-size: 3.5rem;
  --failer-type-display-large-line-height: 1.1;
  --failer-type-display-large-weight: 700;
  --failer-type-display-large-letter-spacing: -0.075rem;
  --failer-type-display-medium-size: 2.75rem;
  --failer-type-display-medium-line-height: 1.12;
  --failer-type-display-medium-weight: 700;
  --failer-type-display-medium-letter-spacing: -0.05rem;
  --failer-type-display-small-size: 2.25rem;
  --failer-type-display-small-line-height: 1.15;
  --failer-type-display-small-weight: 700;
  --failer-type-display-small-letter-spacing: -0.034375rem;
  --failer-type-headline-large-size: 1.875rem;
  --failer-type-headline-large-line-height: 1.2;
  --failer-type-headline-large-weight: 700;
  --failer-type-headline-large-letter-spacing: -0.021875rem;
  --failer-type-headline-medium-size: 1.625rem;
  --failer-type-headline-medium-line-height: 1.25;
  --failer-type-headline-medium-weight: 700;
  --failer-type-headline-medium-letter-spacing: -0.015625rem;
  --failer-type-headline-small-size: 1.4375rem;
  --failer-type-headline-small-line-height: 1.3;
  --failer-type-headline-small-weight: 700;
  --failer-type-headline-small-letter-spacing: -0.009375rem;
  --failer-type-title-large-size: 1.25rem;
  --failer-type-title-large-line-height: 1.35;
  --failer-type-title-large-weight: 700;
  --failer-type-title-large-letter-spacing: 0rem;
  --failer-type-title-medium-size: 1.0625rem;
  --failer-type-title-medium-line-height: 1.4;
  --failer-type-title-medium-weight: 700;
  --failer-type-title-medium-letter-spacing: 0rem;
  --failer-type-title-small-size: 0.9375rem;
  --failer-type-title-small-line-height: 1.4;
  --failer-type-title-small-weight: 700;
  --failer-type-title-small-letter-spacing: 0rem;
  --failer-type-body-large-size: 1.0625rem;
  --failer-type-body-large-line-height: 1.55;
  --failer-type-body-large-weight: 400;
  --failer-type-body-large-letter-spacing: 0rem;
  --failer-type-body-medium-size: 0.9375rem;
  --failer-type-body-medium-line-height: 1.5;
  --failer-type-body-medium-weight: 400;
  --failer-type-body-medium-letter-spacing: 0rem;
  --failer-type-body-small-size: 0.8125rem;
  --failer-type-body-small-line-height: 1.45;
  --failer-type-body-small-weight: 400;
  --failer-type-body-small-letter-spacing: 0rem;
  --failer-type-label-large-size: 0.875rem;
  --failer-type-label-large-line-height: 1.35;
  --failer-type-label-large-weight: 700;
  --failer-type-label-large-letter-spacing: 0.00625rem;
  --failer-type-label-medium-size: 0.75rem;
  --failer-type-label-medium-line-height: 1.35;
  --failer-type-label-medium-weight: 700;
  --failer-type-label-medium-letter-spacing: 0.00625rem;
  --failer-type-label-small-size: 0.6875rem;
  --failer-type-label-small-line-height: 1.4;
  --failer-type-label-small-weight: 700;
  --failer-type-label-small-letter-spacing: 0.009375rem;
}

.failer-type-display-large {
  font-family: var(--failer-font-heading);
  font-size: var(--failer-type-display-large-size);
  line-height: var(--failer-type-display-large-line-height);
  font-weight: var(--failer-type-display-large-weight);
  letter-spacing: var(--failer-type-display-large-letter-spacing);
}

.failer-type-display-medium {
  font-family: var(--failer-font-heading);
  font-size: var(--failer-type-display-medium-size);
  line-height: var(--failer-type-display-medium-line-height);
  font-weight: var(--failer-type-display-medium-weight);
  letter-spacing: var(--failer-type-display-medium-letter-spacing);
}

.failer-type-display-small {
  font-family: var(--failer-font-heading);
  font-size: var(--failer-type-display-small-size);
  line-height: var(--failer-type-display-small-line-height);
  font-weight: var(--failer-type-display-small-weight);
  letter-spacing: var(--failer-type-display-small-letter-spacing);
}

.failer-type-headline-large {
  font-family: var(--failer-font-heading);
  font-size: var(--failer-type-headline-large-size);
  line-height: var(--failer-type-headline-large-line-height);
  font-weight: var(--failer-type-headline-large-weight);
  letter-spacing: var(--failer-type-headline-large-letter-spacing);
}

.failer-type-headline-medium {
  font-family: var(--failer-font-heading);
  font-size: var(--failer-type-headline-medium-size);
  line-height: var(--failer-type-headline-medium-line-height);
  font-weight: var(--failer-type-headline-medium-weight);
  letter-spacing: var(--failer-type-headline-medium-letter-spacing);
}

.failer-type-headline-small {
  font-family: var(--failer-font-heading);
  font-size: var(--failer-type-headline-small-size);
  line-height: var(--failer-type-headline-small-line-height);
  font-weight: var(--failer-type-headline-small-weight);
  letter-spacing: var(--failer-type-headline-small-letter-spacing);
}

.failer-type-title-large {
  font-family: var(--failer-font-body);
  font-size: var(--failer-type-title-large-size);
  line-height: var(--failer-type-title-large-line-height);
  font-weight: var(--failer-type-title-large-weight);
  letter-spacing: var(--failer-type-title-large-letter-spacing);
}

.failer-type-title-medium {
  font-family: var(--failer-font-body);
  font-size: var(--failer-type-title-medium-size);
  line-height: var(--failer-type-title-medium-line-height);
  font-weight: var(--failer-type-title-medium-weight);
  letter-spacing: var(--failer-type-title-medium-letter-spacing);
}

.failer-type-title-small {
  font-family: var(--failer-font-body);
  font-size: var(--failer-type-title-small-size);
  line-height: var(--failer-type-title-small-line-height);
  font-weight: var(--failer-type-title-small-weight);
  letter-spacing: var(--failer-type-title-small-letter-spacing);
}

.failer-type-body-large {
  font-family: var(--failer-font-body);
  font-size: var(--failer-type-body-large-size);
  line-height: var(--failer-type-body-large-line-height);
  font-weight: var(--failer-type-body-large-weight);
  letter-spacing: var(--failer-type-body-large-letter-spacing);
}

.failer-type-body-medium {
  font-family: var(--failer-font-body);
  font-size: var(--failer-type-body-medium-size);
  line-height: var(--failer-type-body-medium-line-height);
  font-weight: var(--failer-type-body-medium-weight);
  letter-spacing: var(--failer-type-body-medium-letter-spacing);
}

.failer-type-body-small {
  font-family: var(--failer-font-body);
  font-size: var(--failer-type-body-small-size);
  line-height: var(--failer-type-body-small-line-height);
  font-weight: var(--failer-type-body-small-weight);
  letter-spacing: var(--failer-type-body-small-letter-spacing);
}

.failer-type-label-large {
  font-family: var(--failer-font-body);
  font-size: var(--failer-type-label-large-size);
  line-height: var(--failer-type-label-large-line-height);
  font-weight: var(--failer-type-label-large-weight);
  letter-spacing: var(--failer-type-label-large-letter-spacing);
}

.failer-type-label-medium {
  font-family: var(--failer-font-body);
  font-size: var(--failer-type-label-medium-size);
  line-height: var(--failer-type-label-medium-line-height);
  font-weight: var(--failer-type-label-medium-weight);
  letter-spacing: var(--failer-type-label-medium-letter-spacing);
}

.failer-type-label-small {
  font-family: var(--failer-font-body);
  font-size: var(--failer-type-label-small-size);
  line-height: var(--failer-type-label-small-line-height);
  font-weight: var(--failer-type-label-small-weight);
  letter-spacing: var(--failer-type-label-small-letter-spacing);
}

.failer-button,
.failer-icon-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-inline-size: var(--failer-control-min-size);
  min-block-size: var(--failer-control-min-size);
  padding: 8px var(--failer-control-padding-inline);
  border: 0;
  border-radius: var(--failer-radius-default);
  background: var(--failer-color-surface-interactive);
  color: var(--failer-color-foreground);
  font-family: var(--failer-font-body);
  font-size: var(--failer-type-label-large-size);
  line-height: var(--failer-type-label-large-line-height);
  font-weight: var(--failer-type-label-large-weight);
  letter-spacing: var(--failer-type-label-large-letter-spacing);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.failer-button--primary {
  background: var(--failer-color-primary);
  color: var(--failer-color-primary-foreground);
}

.failer-icon-button { padding: 0; background: transparent; }
.failer-button:not(:disabled):hover {
  background: var(--failer-color-surface-interactive-hover);
}
.failer-button:not(:disabled):active { background: var(--failer-color-surface-raised); }
.failer-icon-button:not(:disabled):hover { background: var(--failer-color-surface-interactive); }
.failer-icon-button:not(:disabled):active { background: var(--failer-color-surface-interactive-hover); }
.failer-button--primary:not(:disabled):hover { background: var(--failer-color-primary-hover); }
.failer-button--primary:not(:disabled):active { background: var(--failer-color-primary-pressed); }

.failer-button:disabled,
.failer-icon-button:disabled,
.failer-input:disabled,
.failer-row:disabled {
  opacity: var(--failer-disabled-opacity);
  cursor: default;
}

.failer-button:focus-visible,
.failer-icon-button:focus-visible,
.failer-input:focus-visible,
.failer-row:focus-visible {
  outline: var(--failer-focus-width) solid var(--failer-color-primary);
  outline-offset: 2px;
}

.failer-button--primary:focus-visible {
  outline-color: var(--failer-color-primary-foreground);
  outline-offset: calc(-2 * var(--failer-focus-width));
}

.failer-glyph {
  display: inline-block;
  flex: none;
  inline-size: var(--failer-icon-size);
  block-size: var(--failer-icon-size);
  vertical-align: middle;
}

.failer-input {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--failer-control-min-size);
  padding: 9px var(--failer-control-padding-inline);
  border: 0;
  border-radius: var(--failer-radius-default);
  background: var(--failer-color-surface-raised);
  color: var(--failer-color-foreground);
  font-family: var(--failer-font-body);
  font-size: var(--failer-type-body-medium-size);
  line-height: var(--failer-type-body-medium-line-height);
  font-weight: var(--failer-type-body-medium-weight);
  letter-spacing: var(--failer-type-body-medium-letter-spacing);
}

.failer-input::placeholder { color: var(--failer-color-muted); }
.failer-input[aria-invalid="true"] {
  outline: var(--failer-focus-width) solid var(--failer-color-warning);
  outline-offset: -2px;
}
.failer-input[aria-invalid="true"]:focus-visible { outline-offset: 2px; }
.failer-field-error { color: var(--failer-color-warning); }

.failer-field { position: relative; }
.failer-field__leading {
  position: absolute;
  inset-inline-start: var(--failer-control-padding-inline);
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--failer-color-muted);
  pointer-events: none;
}
.failer-field__leading ~ .failer-input {
  padding-inline-start: calc(var(--failer-control-padding-inline) + var(--failer-icon-size) + 8px);
}
.failer-field:has(.failer-input:disabled) .failer-field__leading {
  opacity: var(--failer-disabled-opacity);
}

.failer-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: var(--failer-radius-default);
  background: var(--failer-color-surface-raised);
  color: var(--failer-color-muted);
  font-family: var(--failer-font-body);
  font-size: var(--failer-type-label-medium-size);
  line-height: var(--failer-type-label-medium-line-height);
  font-weight: var(--failer-type-label-medium-weight);
  letter-spacing: var(--failer-type-label-medium-letter-spacing);
}
.failer-badge--accent { color: var(--failer-color-primary); }

.failer-row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  inline-size: 100%;
  min-block-size: var(--failer-control-min-size);
  padding: 8px var(--failer-control-padding-inline);
  border: 0;
  border-radius: var(--failer-radius-default);
  background: transparent;
  color: var(--failer-color-foreground);
  font-family: var(--failer-font-body);
  font-size: var(--failer-type-body-small-size);
  line-height: var(--failer-type-body-small-line-height);
  text-align: start;
  cursor: pointer;
}
.failer-row__title {
  font-size: var(--failer-type-title-medium-size);
  line-height: var(--failer-type-title-medium-line-height);
  font-weight: var(--failer-type-title-medium-weight);
}
.failer-row:where(:not(:disabled):hover) { background: var(--failer-color-surface); }
.failer-row:is([aria-current="true"], [aria-pressed="true"]) {
  background: var(--failer-color-surface-interactive);
}
.failer-row:is([aria-current="true"], [aria-pressed="true"]) :is(.failer-row__title, .failer-row__leading) {
  color: var(--failer-color-primary);
}