@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;
/**
 * This defines the order of our lmvz-ds' CSS layers. See readme.md for details.
 * Important: Always import this file _before_ layering your own styles!
 */
@layer lmvz-ds.theme {
/**
 * !CAUTION: Changes to this file have to be manually synced into `/packages/styles/src/no-transform/router-font.css` 
 */

@font-face {
  font-family: Router;
  src:
    local('RouterBook-Regular'),
    local('Router-Book'),
    url('/assets/fonts/Router-Book.woff') format('woff');
  font-weight: 400;
}

@font-face {
  font-family: Router;
  src:
    local('RouterMedium-Regular'),
    local('Router-Medium'),
    url('/assets/fonts/Router-Medium.woff') format('woff');
  font-weight: 500;
}

@font-face {
  font-family: Router;
  src:
    local('RouterBold-Regular'),
    local('Router-Bold'),
    url('/assets/fonts/Router-Bold.woff') format('woff');
  font-weight: 700;
}

}
:host {
  display: inline-block;

  --checkbox-box-size: var(--lmvz-global-s18, 18px); /* TODO: confirm this generic dimension token is intentional for checkbox box sizing */
  --checkbox-border-radius: var(--lmvz-global-s4, 4px); /* TODO: consider component-specific token for border-radius */

  --checkbox-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
  --checkbox-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
  --checkbox-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);
  --checkbox-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc);
  --checkbox-border-color-error: var(--lmvz-semantic-color-status-on-danger, #a31419);

  --checkbox-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
  --checkbox-wrapper-bg-checked: var(--lmvz-semantic-color-status-active, #f6fbfe);

  --checkbox-ripple-bg: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);

  --checkbox-checkmark-color: var(--lmvz-semantic-color-border-active, #0f8acc);

  --checkbox-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);
  --checkbox-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
  --checkbox-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #545454);
  --checkbox-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419);
  --checkbox-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);

  --checkbox-easing: var(--lmvz-global-easing-default, ease);
  --checkbox-duration: 0.2s;
}
.pill {
  display: flex;
  align-items: center;
  gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
  padding-block: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));
  padding-inline: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));
  border-radius: var(--lmvz-semantic-border-radius-round, 999px);
  /* WCAG 2.5.5 AAA: 44px minimum touch target */
  /* min-block-size: 44px;  */
  text-decoration: none;
  background-color: transparent;
  transition: background-color var(--checkbox-duration) var(--checkbox-easing);
}
input {
  position: absolute;
  opacity: 0;
  width: var(--checkbox-box-size);
  height: var(--checkbox-box-size);
  margin: 0;
  cursor: pointer;
  z-index: 1;
  appearance: none;
}
.box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--checkbox-box-size);
  height: var(--checkbox-box-size);
  background-color: var(--checkbox-bg);
  border: var(--lmvz-semantic-border-width-default, 1px) solid var(--checkbox-border-color);
  border-radius: var(--checkbox-border-radius);
  color: var(--checkbox-checkmark-color);
  cursor: pointer;
  transition:
    border-color var(--checkbox-duration) var(--checkbox-easing),
    background-color var(--checkbox-duration) var(--checkbox-easing);
  pointer-events: none;
  flex-shrink: 0;
}
.indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.content {
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
  min-width: 0;
  cursor: pointer;
}
label {
  font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
  color: var(--checkbox-label-color);
  transition: color var(--checkbox-duration) var(--checkbox-easing);
  cursor: pointer;
}
.helper-text {
  font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router);
  /* font-weight: 400 per DS token standard (body-sm). Note: lmvz-input.css [role='status'] incorrectly uses font-weight: 500 — DS inconsistency, see lmvz-input.css line ~153 */
  color: var(--checkbox-helper-color);
  margin-block-start: 2px;
}
.error-text {
  font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router);
  color: var(--checkbox-error-color);
  display: block;
  margin-block-start: 4px;
  padding-inline: 10px;
}
/* Hover state, guarded to prevent sticky hover on touch devices */
@media (hover: hover) {
  .pill:hover {
    background-color: var(--checkbox-wrapper-bg-hover);
  }

  .pill:hover .box {
    border-color: var(--checkbox-border-color-hover);
  }
}
/* Checked state */
:host([checked]) .pill {
  background-color: var(--checkbox-wrapper-bg-checked);
}
:host([checked]) .box {
  border-color: var(--checkbox-border-color-checked);
}
:host([checked]) label {
  color: var(--checkbox-label-color-checked);
  /* Contrast ~4.4:1 on checked wrapper background (#f1f9fe) — exception accepted per DS decision 5.3; approximately at WCAG AA threshold; pending design review for formal verification */
}
/* Error state. MUST appear AFTER checked state rules (error takes visual precedence) */
:host([error]) .box {
  border-color: var(--checkbox-border-color-error);
}
:host([error]) .helper-text {
  color: var(--checkbox-error-color);
}
:host([disabled]) {
  opacity: var(--lmvz-component-input-disabled-opacity, 40%);
  pointer-events: none;

  input,
  label,
  .box,
  .content {
    cursor: not-allowed;
  }
}
/* :host(:focus-within) .pill { */
:host:has(:focus-visible) .pill {
  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
}
/* Forced Colors / Windows High Contrast */
@media (forced-colors: active) {
  .box {
    forced-color-adjust: auto;
    border-color: ButtonText;
    background-color: Field;
  }

  :host([checked]) .box {
    border-color: Highlight;
    background-color: Field;
  }

  .indicator {
    color: ButtonText;
  }

  :host([checked]) .indicator {
    color: HighlightText;
  }

  :host:has(:focus-visible) .pill {
    outline-color: Highlight;
    box-shadow: none;
  }
}