@layer components {
  .badge {
    display: inline-flex;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-gray-900);
    padding: var(--space-1) var(--space-2);
    background-color: var(--color-gray-100);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    &.badge--owner {
      background-color: var(--color-success-light);
      border-color: var(--color-success);
      color: var(--color-success);
    }

    &.badge--admin {
      background-color: var(--color-primary-50);
      border-color: var(--color-primary-600);
      color: var(--color-primary-600);
    }

    &.badge--draft {
      background-color: var(--color-gray-100);
      border-color: var(--color-gray-400);
      color: var(--color-gray-600);
      font-size: var(--text-xs);
      vertical-align: middle;
      margin-left: var(--space-2);
    }

    &.badge--primary {
      background-color: var(--color-primary-50);
      border-color: var(--color-primary-600);
      color: var(--color-primary-600);
    }

    &.severity--notice, &.badge--info {
      background-color: var(--color-primary-600);
      border-color: var(--color-primary-600);
      color: var(--color-white);
    }
    &.severity--warning, &.badge--warning {
      background-color: var(--color-warning);
      border-color: var(--color-warning);
      color: var(--color-white);
    }
    &.severity--error, &.badge--error {
      background-color: var(--color-error);
      border-color: var(--color-error);
      color: var(--color-white);
    }

    &.badge--outline {
      background-color: var(--color-white);
      border: 1px solid var(--color-gray-700);
      &.severity--notice, &.badge--info {
        background-color: var(--color-white);
        color: var(--color-primary-600);
        border-color: var(--color-primary-600);
      }
      &.severity--warning, &.badge--warning {
        background-color: var(--color-white);
        color: var(--color-warning);
        border-color: var(--color-warning);
      }
      &.severity--error, &.badge--error {
        background-color: var(--color-white);
        color: var(--color-error);
        border-color: var(--color-error);
      }
    }
  }

  /* ===========================================
     Severity Badge (Light Background Variant)
     Use .severity-badge--* for light backgrounds with colored text
     Use .badge.severity--* (above) for solid colored badges
     =========================================== */

  .severity-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);

    &.severity--error {
      color: var(--color-error);
      background-color: rgba(220, 38, 38, 0.1);
    }

    &.severity--warning {
      color: var(--color-warning);
      background-color: rgba(202, 138, 4, 0.1);
    }

    &.severity--notice {
      color: var(--color-info);
      background-color: rgba(37, 99, 235, 0.1);
    }
  }

  .severity-badge--error {
    color: var(--color-error);
    background-color: rgba(220, 38, 38, 0.1);
  }

  .severity-badge--warning {
    color: var(--color-warning);
    background-color: rgba(202, 138, 4, 0.1);
  }

  .severity-badge--notice {
    color: var(--color-info);
    background-color: rgba(37, 99, 235, 0.1);
  }

  [data-theme="dark"] {
    .badge {
      &.badge--outline {
        background-color: var(--color-hover);
        &.severity--notice, &.badge--info {
          background-color: var(--color-hover);
        }
        &.severity--warning, &.badge--warning {
          background-color: var(--color-hover);
        }
        &.severity--error, &.badge--error {
          background-color: var(--color-hover);
        }
      }
    }
  }
}