.fragno-slider-container {
  position: relative;
  width: 100%;
  min-width: 18.75rem;
}
@media screen and (min-width: 600px) {
  .fragno-slider-container {
    width: 100%;
  }
}
.fragno-slider {
  width: 90%;
  color: lightgray;
  height: 2px;
  background: lightgray;
}

.fragno-slider::-webkit-slider-thumb {
  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  transform: scale(0.8);
  transition-duration: 0.5s;
}

.fragno-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  transform: scale(1.1);
  transition-duration: 0.5s;
}

.fragno-slider-field {
  width: 1.875rem;
  height: 1.875rem;
  padding-left: 0.3125rem;
  border: 1px solid lightgray;
}

.fragno-slider-value-bubble {
  width: 1.875rem;
  height: 1.875rem;
  line-height: 1.875rem;
  text-align: center;
  background: #0175ff;
  color: #fff;
  font-size: 0.75rem;
  display: block;
  position: absolute;
  transform: translate(-50%, 0);
  border-radius: 36px;
  bottom: 1.875rem;
}
.fragno-slider-value-bubble:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 14px solid #0175ff;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  top: 100%;
  left: 50%;
  margin-left: -0.75rem;
  margin-top: -0.375rem;
}
.fragno-hidden {
  display: none;
}

/* ============================================
   BUTTON COMPONENT STYLES
   ============================================ */

/* Styles apply to button element inside shadow DOM */
.fragno-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-base);
  position: relative;
  box-sizing: border-box;
  white-space: nowrap;
  user-select: none;
  outline: none;
}

.fragno-button:focus-visible {
  outline: none;
}

/* ============================================
   BUTTON SIZE VARIANTS
   ============================================ */

.fragno-button--sm {
  height: var(--button-sm-height);
  padding: var(--button-sm-padding-y) var(--button-sm-padding-x);
  font-size: var(--button-sm-font-size);
  line-height: var(--button-sm-line-height);
  letter-spacing: var(--button-sm-letter-spacing);
}

.fragno-button--md {
  height: var(--button-md-height);
  padding: var(--button-md-padding-y) var(--button-md-padding-x);
  font-size: var(--button-md-font-size);
  line-height: var(--button-md-line-height);
  letter-spacing: var(--button-md-letter-spacing);
}

.fragno-button--lg {
  height: var(--button-lg-height);
  padding: var(--button-lg-padding-y) var(--button-lg-padding-x);
  font-size: var(--button-lg-font-size);
  line-height: var(--button-lg-line-height);
  letter-spacing: var(--button-lg-letter-spacing);
}

.fragno-button--xl {
  height: var(--button-xl-height);
  padding: var(--button-xl-padding-y) var(--button-xl-padding-x);
  font-size: var(--button-xl-font-size);
  line-height: var(--button-xl-line-height);
  letter-spacing: var(--button-xl-letter-spacing);
}

/* ============================================
   BUTTON ICON-ONLY VARIANTS
   ============================================ */

.fragno-button--icon-only.fragno-button--sm {
  width: var(--button-sm-height);
  padding: var(--button-sm-padding-y);
}

.fragno-button--icon-only.fragno-button--md {
  width: var(--button-md-height);
  padding: var(--button-md-padding-y);
}

.fragno-button--icon-only.fragno-button--lg {
  width: var(--button-lg-height);
  padding: var(--button-lg-padding-y);
}

.fragno-button--icon-only.fragno-button--xl {
  width: var(--button-xl-height);
  padding: var(--button-xl-padding-y);
}

/* ============================================
   BUTTON HIERARCHY VARIANTS - PRIMARY
   ============================================ */

.fragno-button--primary {
  background-color: var(--colors-primary-default);
  color: var(--colors-primary-text);
  border: none;
}

.fragno-button--primary:hover:not(:disabled) {
  background-color: var(--colors-primary-hover);
}

.fragno-button--primary:focus-visible {
  box-shadow:
    0 1px 2px 0 var(--colors-focus-shadow),
    0 0 0 2px var(--colors-secondary-default),
    0 0 0 0.25rem var(--colors-focus-ring);
}

.fragno-button--primary:disabled {
  background-color: var(--colors-primary-disabled);
  color: var(--colors-primary-text-disabled);
  cursor: not-allowed;
  border: 1px solid var(--colors-disabled-border);
}

/* ============================================
   BUTTON HIERARCHY VARIANTS - SECONDARY
   ============================================ */

.fragno-button--secondary {
  background-color: var(--colors-secondary-default);
  color: var(--colors-secondary-text);
  border: 1px solid var(--colors-secondary-border);
}

.fragno-button--secondary:hover:not(:disabled) {
  background-color: var(--colors-secondary-hover);
  border-color: var(--colors-secondary-border-hover);
  color: var(--colors-secondary-text-hover);
}

.fragno-button--secondary:focus-visible {
  border-color: var(--colors-secondary-border-focused);
  box-shadow:
    inset 0px 0px 0px 1px var(--colors-shadow-skeumorphic-inner-border),
    inset 0 -2px 0 0 var(--colors-shadow-skeumorphic-inner);
}

.fragno-button--secondary:disabled {
  background-color: var(--colors-secondary-default);
  color: var(--colors-secondary-text-disabled);
  border-color: var(--colors-disabled-border);
  cursor: not-allowed;
}

/* ============================================
   BUTTON HIERARCHY VARIANTS - TERTIARY
   ============================================ */

.fragno-button--tertiary {
  background-color: transparent;
  color: var(--colors-tertiary-text);
  border: none;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

.fragno-button--tertiary:hover:not(:disabled) {
  background-color: var(--colors-tertiary-hover);
  color: var(--colors-tertiary-text-hover);
}

.fragno-button--tertiary:focus-visible {
  background-color: var(--colors-secondary-default);
  border: 1px solid var(--colors-secondary-border-focused);
  text-decoration: none;
}

.fragno-button--tertiary:disabled {
  color: var(--colors-tertiary-text-disabled);
  cursor: not-allowed;
}

/* ============================================
   BUTTON LOADING STATE
   ============================================ */

.fragno-button--loading {
  pointer-events: none;
}

.fragno-button--loading.fragno-button--primary {
  background-color: var(--colors-primary-default);
}

.fragno-button--loading.fragno-button--secondary {
  background-color: var(--colors-secondary-default);
  border-color: var(--colors-secondary-border-focused);
}

.fragno-button--loading.fragno-button--tertiary {
  background-color: transparent;
}

/* ============================================
   BUTTON ICON STYLES
   ============================================ */

.fragno-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fragno-button__icon--leading {
  margin-right: var(--spacing-xs);
}

.fragno-button__icon--trailing {
  margin-left: var(--spacing-xs);
}

.fragno-button--icon-only .fragno-button__icon {
  margin: 0;
}

/* ============================================
   BUTTON LOADING SPINNER
   ============================================ */

.fragno-button__spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: fragno-spin 1s linear infinite;
}

.fragno-button--secondary .fragno-button__spinner,
.fragno-button--tertiary .fragno-button__spinner {
  border-color: rgba(66, 66, 66, 0.12);
  border-top-color: currentColor;
}

@keyframes fragno-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   BUTTON TEXT
   ============================================ */

.fragno-button__text {
  display: inline-block;
}

.fragno-button--icon-only .fragno-button__text {
  display: none;
}

/* ============================================
   INPUT COMPONENT
   ============================================ */

.fragno-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 0.5rem);
  width: 100%;
}

.fragno-input__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxs, 2px);
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-weight: 500;
  font-size: var(--font-size-text-md, 1rem);
  line-height: var(--line-height-text-md, 1.5rem);
  letter-spacing: -0.00.5rem;
  color: #292929;
}

.fragno-input__label-text {
  display: inline-block;
}

.fragno-input__required {
  display: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1.5rem;
}

.fragno-input__container {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-md, 0.5rem);
  min-height: 60px;
  max-height: 60px;
  padding: var(--spacing-xl, 1rem) var(--spacing-2xl, 1.25rem);
  background-color: #ffffff;
  border: 1px solid #737373;
  border-radius: var(--radius-3xl, 20px);
  box-shadow: 0 0.25rem 1.125rem 0.5rem rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.fragno-input__container--placeholder {
  border-color: #737373;
}

.fragno-input__container--filled {
  border-color: #737373;
}

.fragno-input__container--focused {
  border: 2px solid #2970ff;
  box-shadow:
    0 1px 2px 0 rgba(23, 44, 67, 0.15),
    0 0 0 2px #ffffff,
    0 0 0 0.25rem #155eef;
}

.fragno-input__container--active {
  border: 1.4px solid #2970ff;
  box-shadow: 0 0.25rem 0.75rem 0.375rem rgba(41, 112, 255, 0.05);
}

.fragno-input__container--error {
  border: 1.4px solid #d92d20;
}

.fragno-input__container--disabled {
  background-color: #e5e5e5;
  border-color: #94979c;
  cursor: not-allowed;
}

.fragno-input {
  flex: 1 0 0;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.75rem;
  letter-spacing: -0.005625rem;
  color: #141414;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.fragno-input::placeholder {
  color: transparent;
}

.fragno-input:disabled {
  color: #424242;
  cursor: not-allowed;
}

.fragno-input__icon-leading {
  display: none;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: #a4a7ae;
}

.fragno-input__icon-leading svg {
  width: 100%;
  height: 100%;
}

.fragno-input__toggle-password {
  display: none;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: -0.00.4375rem;
  color: #141414;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  cursor: pointer;
}

.fragno-input__toggle-password:hover {
  opacity: 0.8;
}

.fragno-input__icon-help {
  display: none;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: #a4a7ae;
  cursor: pointer;
}

.fragno-input__icon-help svg {
  width: 100%;
  height: 100%;
}

.fragno-input__error {
  display: none;
  align-items: center;
  gap: var(--spacing-sm, 0.375rem);
  padding: 0 var(--spacing-2xl, 1.25rem);
  color: #d92d20;
}

.fragno-input__error-icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  font-size: 1.125rem;
  line-height: 1;
}

.fragno-input__error-text {
  flex: 1 0 0;
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-weight: 400;
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: -0.00.4375rem;
  white-space: pre-wrap;
}

/* ============================================
   BADGE COMPONENT
   ============================================ */

.fragno-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-weight: var(--font-weight-medium, 500);
  white-space: nowrap;
  box-sizing: border-box;
}

/* Sizes */
.fragno-badge--size-sm {
  padding: var(--spacing-xxs, 2px) var(--spacing-md, 0.5rem);
  font-size: var(--font-size-text-xs, 0.75rem);
  line-height: var(--line-height-text-xs, 1.125rem);
  letter-spacing: -0.00.375rem;
  gap: var(--spacing-xs, 0.25rem);
}

.fragno-badge--size-sm.fragno-badge--icon-dot {
  padding-left: var(--spacing-sm, 0.375rem);
}

.fragno-badge--size-sm.fragno-badge--icon-x-close {
  padding-right: 3px;
}

.fragno-badge--size-sm.fragno-badge--icon-avatar {
  padding-left: 3px;
}

.fragno-badge--size-sm.fragno-badge--icon-only {
  padding: 0.3125rem;
  gap: 0;
}

.fragno-badge--size-md {
  padding: var(--spacing-xxs, 2px) 0.625rem;
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: -0.00.4375rem;
  gap: var(--spacing-sm, 0.375rem);
}

.fragno-badge--size-md.fragno-badge--icon-dot {
  padding-left: var(--spacing-md, 0.5rem);
}

.fragno-badge--size-md.fragno-badge--icon-x-close {
  padding-left: 0.625rem;
  padding-right: var(--spacing-xs, 0.25rem);
}

.fragno-badge--size-md.fragno-badge--icon-avatar {
  padding-left: var(--spacing-xs, 0.25rem);
}

.fragno-badge--size-md.fragno-badge--icon-only {
  padding: var(--spacing-sm, 0.375rem);
  gap: 0;
}

.fragno-badge--size-lg {
  padding: var(--spacing-xs, 0.25rem) var(--spacing-lg, 0.75rem);
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  letter-spacing: -0.00.4375rem;
  gap: var(--spacing-sm, 0.375rem);
}

.fragno-badge--size-lg.fragno-badge--icon-dot {
  padding-left: 0.625rem;
}

.fragno-badge--size-lg.fragno-badge--icon-x-close {
  padding-left: var(--spacing-lg, 0.75rem);
  padding-right: var(--spacing-sm, 0.375rem);
}

.fragno-badge--size-lg.fragno-badge--icon-avatar {
  padding-left: var(--spacing-sm, 0.375rem);
}

.fragno-badge--size-lg.fragno-badge--icon-only {
  padding: var(--spacing-md, 0.5rem);
  gap: 0;
}

/* Colors - White */
.fragno-badge--color-white {
  background-color: #ffffff;
  color: #424242;
}

.fragno-badge--color-white.fragno-badge--border {
  border: 1px solid #737373;
}

/* Colors - Gray */
.fragno-badge--color-gray {
  background-color: #f5f5f5;
  color: #424242;
}

.fragno-badge--color-gray.fragno-badge--border {
  border: 1px solid #a3a3a3;
}

/* Colors - Blue */
.fragno-badge--color-blue {
  background-color: #d1e0ff;
  color: #0040c1;
}

.fragno-badge--color-blue.fragno-badge--border {
  border: 1px solid #84adff;
}

/* Colors - Success (Green) */
.fragno-badge--color-success {
  background-color: #d3f8df;
  color: #095c37;
}

.fragno-badge--color-success.fragno-badge--border {
  border: 1px solid #73e2a3;
}

/* Colors - Error (Red) */
.fragno-badge--color-error {
  background-color: #fee4e2;
  color: #912018;
}

.fragno-badge--color-error.fragno-badge--border {
  border: 1px solid #fda29b;
}

/* Shadow */
.fragno-badge--shadow {
  box-shadow: 0 0.25rem 1.125rem 0.5rem rgba(0, 0, 0, 0.06);
}

/* Text */
.fragno-badge__text {
  display: inline;
  text-align: center;
}

/* Leading Icon */
.fragno-badge__icon-leading {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fragno-badge__icon-leading--dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.fragno-badge--color-white .fragno-badge__icon-leading--dot,
.fragno-badge--color-gray .fragno-badge__icon-leading--dot {
  background-color: #424242;
}

.fragno-badge--color-blue .fragno-badge__icon-leading--dot {
  background-color: #0040c1;
}

.fragno-badge--color-success .fragno-badge__icon-leading--dot {
  background-color: #095c37;
}

.fragno-badge--color-error .fragno-badge__icon-leading--dot {
  background-color: #912018;
}

.fragno-badge__icon-leading--avatar {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 0.333px solid rgba(255, 255, 255, 0.8);
  background-color: #424242;
  overflow: hidden;
}

.fragno-badge--color-blue .fragno-badge__icon-leading--avatar {
  background-color: #0040c1;
}

.fragno-badge--color-success .fragno-badge__icon-leading--avatar {
  background-color: #095c37;
}

.fragno-badge--color-error .fragno-badge__icon-leading--avatar {
  background-color: #912018;
}

/* Close Button */
.fragno-badge__close {
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xxs, 2px);
  border: none;
  background: transparent;
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
}

.fragno-badge__close:hover {
  opacity: 0.8;
}

.fragno-badge__close-icon {
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 400;
}

.fragno-badge--color-white .fragno-badge__close-icon,
.fragno-badge--color-gray .fragno-badge__close-icon {
  color: #424242;
}

.fragno-badge--color-blue .fragno-badge__close-icon {
  color: #0040c1;
}

.fragno-badge--color-success .fragno-badge__close-icon {
  color: #095c37;
}

.fragno-badge--color-error .fragno-badge__close-icon {
  color: #912018;
}

/* Icon Only */
.fragno-badge__icon-only {
  display: none;
  align-items: center;
  justify-content: center;
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}

.fragno-badge__icon-only-symbol {
  font-size: 0.75rem;
  line-height: 1;
  font-weight: 400;
}

.fragno-badge--color-white .fragno-badge__icon-only-symbol,
.fragno-badge--color-gray .fragno-badge__icon-only-symbol {
  color: #424242;
}

.fragno-badge--color-blue .fragno-badge__icon-only-symbol {
  color: #0040c1;
}

.fragno-badge--color-success .fragno-badge__icon-only-symbol {
  color: #095c37;
}

.fragno-badge--color-error .fragno-badge__icon-only-symbol {
  color: #912018;
}

/* ============================================
   MODAL COMPONENT STYLES
   Uses CSS Parts (::part) for shadow DOM styling
   ============================================ */

/* Ensure custom element has layout for proper behavior */
fragno-modal {
  display: block;
}

/* Hide light DOM children until shadow DOM is attached */
fragno-modal:not(:defined) {
  display: none;
}

fragno-modal::part(dialog) {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--modal-animation-duration) ease;
}

fragno-modal::part(dialog):focus {
  outline: none;
  box-sizing: border-box;
}

/* Hide dialog when modal is not open */
fragno-modal:not([open])::part(dialog) {
  display: none;
}

fragno-modal[open]::part(dialog) {
  opacity: 1;
}

/* Anchor positioning */
fragno-modal[data-anchor="top"]::part(dialog) {
  align-items: flex-start;
}

fragno-modal[data-anchor="middle"]::part(dialog) {
  align-items: center;
}

fragno-modal[data-anchor="bottom"]::part(dialog) {
  align-items: flex-end;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  fragno-modal::part(dialog),
  fragno-modal::part(container) {
    transition: none;
    transform: none;
  }
}

fragno-modal::part(container) {
  background: var(--modal-bg);
  border-radius: var(--modal-border-radius);
  box-shadow: var(--modal-shadow);
  max-width: var(--modal-max-width);
  max-height: calc(100vh - var(--spacing-4xl) * 2);
  max-height: calc(100dvh - var(--spacing-4xl) * 2);
  width: calc(100% - var(--spacing-xl));
  display: flex;
  flex-direction: column;
  padding-bottom: var(--spacing-3xl);
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity var(--modal-animation-duration) ease,
    transform var(--modal-animation-duration) ease;
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  box-sizing: border-box;
}

fragno-modal[open]::part(container) {
  opacity: 1;
  transform: scale(1);
}

/* Anchor positioning - container margins */
fragno-modal[data-anchor="top"]::part(container) {
  margin-top: var(--spacing-4xl);
  margin-bottom: auto;
}

fragno-modal[data-anchor="bottom"]::part(container) {
  margin-top: auto;
  margin-bottom: var(--spacing-4xl);
}

/* Mobile anchor positioning */
@media (max-width: 760.5rem) {
  fragno-modal[data-anchor-mobile="bottom"]::part(dialog) {
    align-items: flex-end;
  }

  fragno-modal[data-anchor-mobile="bottom"]::part(container) {
    margin-top: auto;
    margin-bottom: var(--spacing-md);
  }
}

fragno-modal::part(header) {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: var(--spacing-xl) var(--spacing-xl) 0;
  flex-shrink: 0;
  min-height: var(--modal-close-button-size);
}

/* Hide header when no icon and no close button */
fragno-modal:not([data-has-header])::part(header) {
  display: none;
}

/* When icon is present, add bottom padding to header */
fragno-modal[data-has-icon="true"]::part(header) {
  padding-bottom: var(--spacing-xl);
}

fragno-modal::part(icon) {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  justify-content: center;
}

/* Hide icon and icon-container when no icon is slotted */
fragno-modal:not([data-has-icon])::part(icon),
fragno-modal:not([data-has-icon])::part(icon-container) {
  display: none;
}

/* Left alignment - icon moves to column 1 */
fragno-modal[data-alignment="left"]::part(icon) {
  grid-column: 1;
  justify-self: start;
}

/* Center alignment - icon stays in column 2 */
fragno-modal[data-alignment="center"]::part(icon) {
  grid-column: 2;
  justify-self: center;
}

fragno-modal::part(icon-container) {
  background: var(--modal-icon-container-bg);
  border-radius: var(--modal-icon-container-radius);
  padding: var(--spacing-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

fragno-modal::part(close-button) {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  width: var(--modal-close-button-size);
  height: var(--modal-close-button-size);
  border: none;
  background: transparent;
  color: var(--modal-close-button-color);
  cursor: pointer;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color var(--modal-animation-duration) ease;
}

fragno-modal::part(close-button):hover {
  background-color: var(--modal-close-button-hover-bg);
}

fragno-modal::part(close-button):focus,
fragno-modal::part(close-button):focus-visible {
  outline: var(--modal-close-button-focus-outline);
  outline-offset: 2px;
}

fragno-modal::part(body) {
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  overflow-y: auto;
  padding: var(--spacing-xl) var(--spacing-xl) 0;
}

/* When header is present (icon or close button), it provides top spacing */
fragno-modal[data-has-header="true"]::part(body) {
  padding-top: 0;
}

/* Alignment variants for body content */
fragno-modal[data-alignment="center"]::part(body) {
  text-align: center;
}

fragno-modal[data-alignment="left"]::part(body) {
  text-align: left;
}

fragno-modal::part(hero) {
  flex-shrink: 0;
  padding-bottom: var(--spacing-xl);
  box-sizing: border-box;
  overflow: hidden;
}

fragno-modal::part(title) {
  margin: 0;
  font-family: var(--font-family-body);
  font-size: var(--modal-title-font-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--modal-title-line-height);
  color: var(--colors-gray-900);
  letter-spacing: var(--modal-title-letter-spacing);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

fragno-modal::part(description) {
  margin: 0;
  margin-top: var(--spacing-sm);
  font-family: var(--font-family-body);
  font-size: var(--font-size-text-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-text-md);
  color: var(--colors-gray-700);
  letter-spacing: -0.005em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

fragno-modal::part(content) {
  margin-top: var(--spacing-xl);
}

fragno-modal::part(footer) {
  padding: 0 var(--spacing-xl);
  display: flex;
  gap: var(--spacing-lg);
  flex-shrink: 0;
  margin-top: var(--spacing-3xl);
}

/* Desktop: side-by-side */
@media (min-width: 769px) {
  fragno-modal::part(footer) {
    flex-direction: row;
  }
}

/* Mobile: stacked with primary on top */
@media (max-width: 760.5rem) {
  fragno-modal::part(footer) {
    flex-direction: column-reverse;
  }
}

/* ============================================
   CARD COMPONENT
   ============================================ */

fragno-card::part(container) {
  scroll-snap-align: center;
  overflow: hidden;
  width: 100%;
}

/* ============================================
   LOADING INDICATOR COMPONENT
   ============================================ */

.fragno-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 23.4375rem;
}

.fragno-loading-indicator__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm, 0.375rem);
}

/* Icon Container */
.fragno-loading-indicator__icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.fragno-loading-indicator__icon-container--size-sm {
  width: 2rem;
  height: 2rem;
  padding: 2px;
}

.fragno-loading-indicator__icon-container--size-md {
  width: 3rem;
  height: 3rem;
  padding: 3px;
}

.fragno-loading-indicator__icon-container--size-lg {
  width: 3.5rem;
  height: 3.5rem;
  padding: 3px;
}

.fragno-loading-indicator__icon-container--size-xl {
  width: 4.625rem;
  height: 4.625rem;
  padding: 2px;
}

/* Loading Spinner */
.fragno-loading-indicator__spinner {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(66, 66, 66, 0.12);
  border-top-color: #292929;
  border-radius: 50%;
  animation: fragno-loading-spin 1s linear infinite;
  box-sizing: border-box;
}

.fragno-loading-indicator__spinner--size-sm {
  border-width: 2px;
}

.fragno-loading-indicator__spinner--size-md {
  border-width: 3px;
}

.fragno-loading-indicator__spinner--size-lg {
  border-width: 3px;
}

.fragno-loading-indicator__spinner--size-xl {
  border-width: 2px;
}

@keyframes fragno-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Success Icon */
.fragno-loading-indicator__success-icon {
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(-23.66deg, rgb(0, 0, 0) 6.81%, rgb(67, 67, 67) 76.99%);
  box-shadow: 0 0.75rem 1rem 0 rgba(10, 13, 18, 0.08),
    0 2px 2px 0 rgba(10, 13, 18, 0.04);
  flex-shrink: 0;
}

.fragno-loading-indicator__success-icon--size-sm {
  width: 2.875rem;
  height: 2.875rem;
}

.fragno-loading-indicator__success-icon--size-md {
  width: 3.875rem;
  height: 3.875rem;
}

.fragno-loading-indicator__success-icon--size-lg {
  width: 4.5rem;
  height: 4.5rem;
}

.fragno-loading-indicator__success-icon--size-xl {
  width: 5.75rem;
  height: 5.75rem;
}

.fragno-loading-indicator__check-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
}

.fragno-loading-indicator__check-icon::before {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 0.75rem;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  margin-top: -2px;
}

.fragno-loading-indicator__success-icon--size-sm .fragno-loading-indicator__check-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.fragno-loading-indicator__success-icon--size-sm .fragno-loading-indicator__check-icon::before {
  width: 0.375rem;
  height: 0.625rem;
  border-width: 2px;
}

.fragno-loading-indicator__success-icon--size-md .fragno-loading-indicator__check-icon {
  width: 1.375rem;
  height: 1.375rem;
}

.fragno-loading-indicator__success-icon--size-md .fragno-loading-indicator__check-icon::before {
  width: 0.4375rem;
  height: 11px;
  border-width: 2px;
}

.fragno-loading-indicator__success-icon--size-lg .fragno-loading-indicator__check-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.fragno-loading-indicator__success-icon--size-lg .fragno-loading-indicator__check-icon::before {
  width: 0.5rem;
  height: 0.75rem;
  border-width: 2px;
}

.fragno-loading-indicator__success-icon--size-xl .fragno-loading-indicator__check-icon {
  width: 1.75rem;
  height: 1.75rem;
}

.fragno-loading-indicator__success-icon--size-xl .fragno-loading-indicator__check-icon::before {
  width: 0.625rem;
  height: 0.875rem;
  border-width: 2px;
}

/* Title Text */
.fragno-loading-indicator__title {
  display: block;
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-weight: var(--font-weight-medium, 500);
  color: var(--colors-gray-800, #292929);
  text-align: center;
  margin: 0;
}

.fragno-loading-indicator__title--size-sm,
.fragno-loading-indicator__title--size-md {
  font-size: 1.25rem;
  line-height: 1.875rem;
  letter-spacing: 0;
}

.fragno-loading-indicator__title--size-lg,
.fragno-loading-indicator__title--size-xl {
  font-family: var(--font-family-display, "Inter", sans-serif);
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: -0.3rem;
}

/* Hide Animation Text */
.fragno-loading-indicator__hide-animation {
  display: block;
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-weight: var(--font-weight-regular, 400);
  font-size: var(--font-size-text-sm, 0.875rem);
  line-height: var(--line-height-text-sm, 1.25rem);
  color: var(--colors-gray-700, #424242);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  letter-spacing: -0.00.4375rem;
  margin: 0;
  cursor: pointer;
}

.fragno-loading-indicator__hide-animation:hover {
  opacity: 0.8;
}

/* Supportive Text */
.fragno-loading-indicator__supportive-text {
  display: block;
  font-family: var(--font-family-body, "Inter", sans-serif);
  font-weight: var(--font-weight-regular, 400);
  color: var(--colors-gray-700, #424242);
  text-align: center;
  margin: 0;
}

.fragno-loading-indicator__supportive-text--size-sm,
.fragno-loading-indicator__supportive-text--size-md {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: -0.00.4375rem;
}

.fragno-loading-indicator__supportive-text--size-lg,
.fragno-loading-indicator__supportive-text--size-xl {
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: -0.00.5rem;
}


/**
 * @file tokens-light.css
 * @title Design Tokens - Light Theme
 * @description CSS custom properties (variables) for the ID.me Design System light theme.
 *              These tokens define colors, spacing, typography, and other design values.
 *
 * @author Fragno Team
 * @version 1.1.0
 * @updated 2026-01-16 - Added semantic tokens and additional primitive tokens
 */

:root {
  /* ============================================
      COLORS - Primary
      ============================================ */
  --colors-primary-default: #141414;
  --colors-primary-hover: #424242;
  --colors-primary-disabled: #f5f5f5;
  --colors-primary-text: #ffffff;
  --colors-primary-text-disabled: #a3a3a3;

  /* ============================================
      COLORS - Secondary
      ============================================ */
  --colors-secondary-default: #ffffff;
  --colors-secondary-hover: #f7f7f7;
  --colors-secondary-border: #424242;
  --colors-secondary-border-hover: #737373;
  --colors-secondary-border-focused: #737373;
  --colors-secondary-text: #141414;
  --colors-secondary-text-hover: #292929;
  --colors-secondary-text-disabled: #a3a3a3;

  /* ============================================
      COLORS - Tertiary
      ============================================ */
  --colors-tertiary-default: #ffffff;
  --colors-tertiary-hover: #e5e5e5;
  --colors-tertiary-text: #141414;
  --colors-tertiary-text-hover: #424242;
  --colors-tertiary-text-disabled: #a3a3a3;

  /* ============================================
      COLORS - Focus & Effects
      ============================================ */
  --colors-focus-ring: #155eef;
  --colors-focus-shadow: rgba(10, 13, 18, 0.05);
  --colors-shadow-skeumorphic-inner-border: rgba(10, 13, 18, 0.18);
  --colors-shadow-skeumorphic-inner: rgba(10, 13, 18, 0.05);

  /* ============================================
      COLORS - Disabled
      ============================================ */
  --colors-disabled-border: #e5e5e5;
  --colors-disabled-background: #f5f5f5;
  --colors-disabled-foreground: #a3a3a3;

  /* ============================================
      COLORS - Gray Scale
      ============================================ */
  --colors-gray-900: #141414;
  --colors-gray-800: #292929;
  --colors-gray-700: #424242;
  --colors-gray-600: #737373;
  --colors-gray-500: #737373;
  --colors-gray-border: #94979c;
  --colors-gray-200: #e5e5e5;
  --colors-gray-100: #f5f5f5;

  /* ============================================
      COLORS - Blue (Interactive)
      ============================================ */
  --colors-blue-50: #eff6ff;
  --colors-blue-100: #d1e0ff;
  --colors-blue-500: #2970ff;
  --colors-blue-600: #1d5fef;
  --colors-blue-700: #004eeb;

  /* ============================================
      COLORS - Red (Error/Danger)
      ============================================ */
  --colors-red-50: #fee7e7;
  --colors-red-600: #e53e3e;
  --colors-red-700: #c53030;

  /* ============================================
      COLORS - Green (Success)
      ============================================ */
  --colors-green-50: #e7f5ee;
  --colors-green-600: #32a467;
  --colors-green-700: #2d8a5c;

  /* ============================================
      SPACING
      ============================================ */
  --spacing-none: 0;
  --spacing-xxs: 0.125rem;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.375rem;
  --spacing-md: 0.5rem;
  --spacing-lg: 0.75rem;
  --spacing-xl: 1rem;
  --spacing-xxl: 1.125rem;
  --spacing-2xl: 1.25rem;
  --spacing-3xl: 1.5rem;
  --spacing-4xl: 2rem;

  /* ============================================
      BORDER RADIUS
      ============================================ */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.125rem;
  --radius-3xl: 1.25rem;
  --radius-4xl: 1.5rem;
  --radius-5xl: 2rem;
  --radius-xlg: 1.5rem; /* Legacy - use radius-4xl instead */
  --radius-full: 9999px;

  /* ============================================
      TYPOGRAPHY - Font Families
      ============================================ */
  --font-family-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-display:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Monaco", "Courier New", monospace;

  /* ============================================
      TYPOGRAPHY - Font Sizes
      ============================================ */
  --font-size-text-xs: 0.75rem;
  --font-size-text-sm: 0.875rem;
  --font-size-text-md: 1rem;
  --font-size-text-lg: 1.125rem;
  --font-size-text-xl: 1.25rem;

  /* ============================================
      TYPOGRAPHY - Display Font Sizes
      ============================================ */
  --font-size-display-2xs: 1.75rem;
  --font-size-display-xs: 2rem;
  --font-size-display-sm: 2.25rem;
  --font-size-display-md: 2.5rem;
  --font-size-display-lg: 3rem;

  /* ============================================
      TYPOGRAPHY - Line Heights
      ============================================ */
  --line-height-text-xs: 1rem;
  --line-height-text-sm: 1.25rem;
  --line-height-text-md: 1.5rem;
  --line-height-text-lg: 1.75rem;
  --line-height-text-xl: 2rem;

  /* ============================================
      TYPOGRAPHY - Display Line Heights
      ============================================ */
  --line-height-display-2xs: 2.125rem;
  --line-height-display-xs: 2.375rem;
  --line-height-display-sm: 2.75rem;
  --line-height-display-md: 3rem;
  --line-height-display-lg: 3.5rem;

  /* ============================================
      TYPOGRAPHY - Font Weights
      ============================================ */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-medium-plus: 550;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ============================================
      TYPOGRAPHY - Letter Spacing
      ============================================ */
  --letter-spacing-text-sm: -0.004375rem;
  --letter-spacing-text-md: -0.00.5rem;

  /* ============================================
      TYPOGRAPHY - Display Letter Spacing
      ============================================ */
  --letter-spacing-display-2xs: -0.3.5rem;
  --letter-spacing-display-xs: -0.4rem;
  --letter-spacing-display-sm: -0.4.5rem;
  --letter-spacing-display-md: -0.0.5rem;
  --letter-spacing-display-lg: -0.6rem;

  /* ============================================
      BUTTON SIZES - Small (sm)
      ============================================ */
  --button-sm-height: 2.25rem;
  --button-sm-padding-x: 0.75rem;
  --button-sm-padding-y: 0.5rem;
  --button-sm-icon-size: 1.25rem;
  --button-sm-font-size: var(--font-size-text-sm);
  --button-sm-line-height: var(--line-height-text-sm);
  --button-sm-letter-spacing: var(--letter-spacing-text-sm);

  /* ============================================
      BUTTON SIZES - Medium (md)
      ============================================ */
  --button-md-height: 2.5rem;
  --button-md-padding-x: 0.875rem;
  --button-md-padding-y: 0.625rem;
  --button-md-icon-size: 1.25rem;
  --button-md-font-size: var(--font-size-text-sm);
  --button-md-line-height: var(--line-height-text-sm);
  --button-md-letter-spacing: var(--letter-spacing-text-sm);

  /* ============================================
      BUTTON SIZES - Large (lg)
      ============================================ */
  --button-lg-height: 2.75rem;
  --button-lg-padding-x: 1rem;
  --button-lg-padding-y: 0.625rem;
  --button-lg-icon-size: 1.25rem;
  --button-lg-font-size: var(--font-size-text-md);
  --button-lg-line-height: var(--line-height-text-md);
  --button-lg-letter-spacing: var(--letter-spacing-text-md);

  /* ============================================
      BUTTON SIZES - Extra Large (xl)
      ============================================ */
  --button-xl-height: 3.25rem;
  --button-xl-padding-x: 1.125rem;
  --button-xl-padding-y: 0.75rem;
  --button-xl-icon-size: 1.25rem;
  --button-xl-font-size: var(--font-size-text-md);
  --button-xl-line-height: var(--line-height-text-md);
  --button-xl-letter-spacing: var(--letter-spacing-text-md);

  /* ============================================
      SEMANTIC COLORS - Interactive States
      ============================================ */
  --color-interactive-default: var(--colors-blue-500);
  --color-interactive-hover: var(--colors-blue-600);
  --color-interactive-active: var(--colors-blue-700);
  --color-interactive-subtle: var(--colors-blue-100);
  --color-interactive-disabled: var(--colors-gray-200);

  /* ============================================
      SEMANTIC COLORS - Text
      ============================================ */
  --color-text-primary: var(--colors-gray-900);
  --color-text-secondary: var(--colors-gray-800);
  --color-text-tertiary: var(--colors-gray-700);
  --color-text-disabled: var(--colors-gray-500);
  --color-text-on-interactive: #ffffff;
  --color-text-link: var(--colors-gray-800);

  /* ============================================
      SEMANTIC COLORS - Borders
      ============================================ */
  --color-border-default: var(--colors-gray-border);
  --color-border-subtle: var(--colors-gray-200);
  --color-border-strong: var(--colors-gray-700);
  --color-border-interactive: var(--color-interactive-default);
  --color-border-disabled: var(--colors-disabled-border);

  /* ============================================
      SEMANTIC COLORS - Backgrounds
      ============================================ */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: var(--colors-gray-100);
  --color-bg-disabled: var(--colors-gray-100);
  --color-bg-interactive-subtle: var(--colors-blue-50);

  /* ============================================
      SEMANTIC COLORS - Status (Error)
      ============================================ */
  --color-status-error-text: var(--colors-red-700);
  --color-status-error-bg: var(--colors-red-50);
  --color-status-error-border: var(--colors-red-600);

  /* ============================================
      SEMANTIC COLORS - Status (Success)
      ============================================ */
  --color-status-success-text: var(--colors-green-700);
  --color-status-success-bg: var(--colors-green-50);
  --color-status-success-border: var(--colors-green-600);

  /* ============================================
      TRANSITIONS
      ============================================ */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ============================================
      MODAL TOKENS
      ============================================ */
  --modal-bg: var(--colors-gray-100);
  --modal-border-radius: var(--radius-5xl);
  --modal-max-width: 400px;
  --modal-shadow:
    0 1.25rem 1.5625rem -5px rgba(0, 0, 0, 0.1), 0 0.625rem 0.625rem -5px rgba(0, 0, 0, 0.04);
  --modal-backdrop-color: rgba(0, 0, 0, 0.4);
  --modal-backdrop-blur: 1rem;
  --modal-close-button-size: 2.75rem;
  --modal-close-button-color: var(--colors-gray-800);
  --modal-close-button-hover-bg: rgba(0, 0, 0, 0.05);
  --modal-close-button-focus-outline: 2px solid var(--colors-blue-500);
  --modal-icon-container-bg: var(--colors-blue-100);
  --modal-icon-container-radius: var(--radius-xl); /* 1rem per Figma */
  --modal-icon-color: var(--colors-blue-500);
  --modal-animation-duration: 250ms;
  /* Modal title typography - matches Figma display-xs specs */
  --modal-title-font-size: 1.5rem;
  --modal-title-line-height: 2rem;
  --modal-title-letter-spacing: -0.3rem;
}



/*# sourceMappingURL=119-3f028ec1.css.map*/