.fragno-slider-container {
  position: relative;
  width: 100%;
  min-width: 300px;
}
@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: 30px;
  height: 30px;
  padding-left: 5px;
  border: 1px solid lightgray;
}

.fragno-slider-value-bubble {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #0175ff;
  color: #fff;
  font-size: 12px;
  display: block;
  position: absolute;
  transform: translate(-50%, 0);
  border-radius: 36px;
  bottom: 30px;
}
.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: -12px;
  margin-top: -6px;
}
.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: 0px 1px 2px 0px var(--colors-focus-shadow),
    0px 0px 0px 2px var(--colors-secondary-default),
    0px 0px 0px 4px 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 0px -2px 0px 0px 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: 20px;
  height: 20px;
  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, 8px);
  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, 16px);
  line-height: var(--line-height-text-md, 24px);
  letter-spacing: -0.08px;
  color: #292929;
}

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

.fragno-input__required {
  display: none;
  color: inherit;
  font-size: 16px;
  line-height: 24px;
}

.fragno-input__container {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-md, 8px);
  min-height: 60px;
  max-height: 60px;
  padding: var(--spacing-xl, 16px) var(--spacing-2xl, 20px);
  background-color: #ffffff;
  border: 1px solid #737373;
  border-radius: var(--radius-3xl, 20px);
  box-shadow: 0px 4px 18px 8px 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: 0px 1px 2px 0px rgba(23, 44, 67, 0.15), 0px 0px 0px 2px #ffffff,
    0px 0px 0px 4px #155eef;
}

.fragno-input__container--active {
  border: 1.4px solid #2970ff;
  box-shadow: 0px 4px 12px 6px 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: 18px;
  line-height: 28px;
  letter-spacing: -0.09px;
  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: 20px;
  height: 20px;
  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: 14px;
  line-height: 20px;
  letter-spacing: -0.07px;
  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: 16px;
  height: 16px;
  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, 6px);
  padding: 0 var(--spacing-2xl, 20px);
  color: #d92d20;
}

.fragno-input__error-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  font-size: 18px;
  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, 14px);
  line-height: var(--line-height-text-sm, 20px);
  letter-spacing: -0.07px;
  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, 8px);
  font-size: var(--font-size-text-xs, 12px);
  line-height: var(--line-height-text-xs, 18px);
  letter-spacing: -0.06px;
  gap: var(--spacing-xs, 4px);
}

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

.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: 5px;
  gap: 0;
}

.fragno-badge--size-md {
  padding: var(--spacing-xxs, 2px) 10px;
  font-size: var(--font-size-text-sm, 14px);
  line-height: var(--line-height-text-sm, 20px);
  letter-spacing: -0.07px;
  gap: var(--spacing-sm, 6px);
}

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

.fragno-badge--size-md.fragno-badge--icon-x-close {
  padding-left: 10px;
  padding-right: var(--spacing-xs, 4px);
}

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

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

.fragno-badge--size-lg {
  padding: var(--spacing-xs, 4px) var(--spacing-lg, 12px);
  font-size: var(--font-size-text-sm, 14px);
  line-height: var(--line-height-text-sm, 20px);
  letter-spacing: -0.07px;
  gap: var(--spacing-sm, 6px);
}

.fragno-badge--size-lg.fragno-badge--icon-dot {
  padding-left: 10px;
}

.fragno-badge--size-lg.fragno-badge--icon-x-close {
  padding-left: var(--spacing-lg, 12px);
  padding-right: var(--spacing-sm, 6px);
}

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

.fragno-badge--size-lg.fragno-badge--icon-only {
  padding: var(--spacing-md, 8px);
  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: 0px 4px 18px 8px 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: 8px;
  height: 8px;
  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: 16px;
  height: 16px;
  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: 12px;
  height: 12px;
}

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

.fragno-badge__close-icon {
  font-size: 12px;
  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: 12px;
  height: 12px;
  flex-shrink: 0;
}

.fragno-badge__icon-only-symbol {
  font-size: 12px;
  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;
}


/**
 * @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: 0px;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-xxl: 18px;
  --spacing-2xl: 20px;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 18px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-5xl: 32px;
  --radius-xlg: 24px; /* 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: 12px;
  --font-size-text-sm: 14px;
  --font-size-text-md: 16px;
  --font-size-text-lg: 18px;
  --font-size-text-xl: 20px;

  /* ============================================
     TYPOGRAPHY - Display Font Sizes
     ============================================ */
  --font-size-display-2xs: 28px;
  --font-size-display-xs: 32px;
  --font-size-display-sm: 36px;
  --font-size-display-md: 40px;
  --font-size-display-lg: 48px;

  /* ============================================
     TYPOGRAPHY - Line Heights
     ============================================ */
  --line-height-text-xs: 16px;
  --line-height-text-sm: 20px;
  --line-height-text-md: 24px;
  --line-height-text-lg: 28px;
  --line-height-text-xl: 32px;

  /* ============================================
     TYPOGRAPHY - Display Line Heights
     ============================================ */
  --line-height-display-2xs: 34px;
  --line-height-display-xs: 38px;
  --line-height-display-sm: 44px;
  --line-height-display-md: 48px;
  --line-height-display-lg: 56px;

  /* ============================================
     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.07px;
  --letter-spacing-text-md: -0.08px;

  /* ============================================
     TYPOGRAPHY - Display Letter Spacing
     ============================================ */
  --letter-spacing-display-2xs: -0.56px;
  --letter-spacing-display-xs: -0.64px;
  --letter-spacing-display-sm: -0.72px;
  --letter-spacing-display-md: -0.80px;
  --letter-spacing-display-lg: -0.96px;

  /* ============================================
     BUTTON SIZES - Small (sm)
     ============================================ */
  --button-sm-height: 36px;
  --button-sm-padding-x: 12px;
  --button-sm-padding-y: 8px;
  --button-sm-icon-size: 20px;
  --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: 40px;
  --button-md-padding-x: 14px;
  --button-md-padding-y: 10px;
  --button-md-icon-size: 20px;
  --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: 44px;
  --button-lg-padding-x: 16px;
  --button-lg-padding-y: 10px;
  --button-lg-icon-size: 20px;
  --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: 52px;
  --button-xl-padding-x: 18px;
  --button-xl-padding-y: 12px;
  --button-xl-icon-size: 20px;
  --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;
}




/*# sourceMappingURL=119-42af5ef3.css.map*/