/*
.nexus-badge
NEXUS BADGE COMPONENT */ 

:root {
  color-scheme: light;

  /* Badge spacing tokens */
  --nexus-sys-badge-radius: 9999px;
  --nexus-sys-badge-gap: 6px;
  
  /* Small size padding */
  --nexus-sys-badge-padding-x-sm: var(--nexus-ref-spacing-8);
  --nexus-sys-badge-padding-y-sm: var(--nexus-ref-spacing-2);
  
  /* Medium size padding (default) */
  --nexus-sys-badge-padding-x-md: var(--nexus-ref-spacing-10);
  --nexus-sys-badge-padding-y-md: var(--nexus-ref-spacing-2);
  
  /* Large size padding */
  --nexus-sys-badge-padding-x-lg: var(--nexus-ref-spacing-12);
  --nexus-sys-badge-padding-y-lg: var(--nexus-ref-spacing-4);

  /* Typography tokens */
  --nexus-sys-badge-font-size-sm: var(--nexus-sys-typescale-text-xs-font-size);
  --nexus-sys-badge-line-height-sm: var(--nexus-sys-typescale-text-xs-line-height);
  --nexus-sys-badge-font-weight-sm: var(--nexus-sys-typescale-font-weight-medium);

  --nexus-sys-badge-font-size-md: var(--nexus-sys-typescale-text-sm-font-size);
  --nexus-sys-badge-line-height-md: var(--nexus-sys-typescale-text-sm-line-height);
  --nexus-sys-badge-font-weight-md: var(--nexus-sys-typescale-font-weight-medium);

  --nexus-sys-badge-font-size-lg: var(--nexus-sys-typescale-text-sm-font-size);
  --nexus-sys-badge-line-height-lg: var(--nexus-sys-typescale-text-sm-line-height);
  --nexus-sys-badge-font-weight-lg: var(--nexus-sys-typescale-font-weight-medium);
}

/* ========================================
   BASE BADGE COMPONENT
   ======================================== */
.nexus-badge {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nexus-sys-badge-gap);

  /* Typography - default to medium */
  font-size: var(--nexus-sys-badge-font-size-md);
  line-height: var(--nexus-sys-badge-line-height-md);
  font-weight: var(--nexus-sys-badge-font-weight-md);

  /* Spacing */
  padding: var(--nexus-sys-badge-padding-y-md) var(--nexus-sys-badge-padding-x-md);
  border-radius: var(--nexus-sys-badge-radius);

  /* Visual via variables (set by tone) */
  background: var(--nexus-com-badge-bg, var(--nexus-ref-neutral-95));
  color: var(--nexus-com-badge-text, var(--nexus-ref-neutral-50));
  border: 1px solid var(--nexus-com-badge-border, transparent);

  /* Box Model */
  box-sizing: border-box;
  
  /* Interactions */
  user-select: text;
  -webkit-tap-highlight-color: transparent;
  
  /* Prevent text wrapping in badges */
  white-space: nowrap;
}

/* ========================================
   SIZES
   ======================================== */
.nexus-badge[data-size="sm"] {
  padding: var(--nexus-sys-badge-padding-y-sm) var(--nexus-sys-badge-padding-x-sm);
  font-size: var(--nexus-sys-badge-font-size-sm);
  line-height: var(--nexus-sys-badge-line-height-sm);
  font-weight: var(--nexus-sys-badge-font-weight-sm);
}

.nexus-badge[data-size="md"] {
  padding: var(--nexus-sys-badge-padding-y-md) var(--nexus-sys-badge-padding-x-md);
  font-size: var(--nexus-sys-badge-font-size-md);
  line-height: var(--nexus-sys-badge-line-height-md);
  font-weight: var(--nexus-sys-badge-font-weight-md);
}

.nexus-badge[data-size="lg"] {
  padding: var(--nexus-sys-badge-padding-y-lg) var(--nexus-sys-badge-padding-x-lg);
  font-size: var(--nexus-sys-badge-font-size-lg);
  line-height: var(--nexus-sys-badge-line-height-lg);
  font-weight: var(--nexus-sys-badge-font-weight-lg);
}

/* ========================================
   TONES (Soft Pill Variant)
   ======================================== */

/* Gray - neutral tones */
.nexus-badge[data-tone="gray"] {
  --nexus-com-badge-bg: var(--nexus-ref-neutral-100);
  --nexus-com-badge-text: var(--nexus-ref-neutral-50);
  --nexus-com-badge-border: transparent;
}

/* Primary - brand color */
.nexus-badge[data-tone="primary"] {
  --nexus-com-badge-bg: var(--nexus-ref-primary-90);
  --nexus-com-badge-text: var(--nexus-ref-primary-20);
  --nexus-com-badge-border: transparent;
}

/* Error - for errors, warnings, destructive actions */
.nexus-badge[data-tone="error"] {
  --nexus-com-badge-bg: var(--nexus-ref-error-100);
  --nexus-com-badge-text: var(--nexus-ref-error-50);
  --nexus-com-badge-border: transparent;
}

/* Warning - for caution, alerts */
.nexus-badge[data-tone="warning"] {
  --nexus-com-badge-bg: var(--nexus-ref-warning-100);
  --nexus-com-badge-text: var(--nexus-ref-warning-30);
  --nexus-com-badge-border: transparent;
}

/* Success - for positive states */
.nexus-badge[data-tone="success"] {
  --nexus-com-badge-bg: var(--nexus-ref-success-100);
  --nexus-com-badge-text: var(--nexus-ref-success-20);
  --nexus-com-badge-border: transparent;
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .nexus-badge {
    transition: none;
  }
}